[flutter] 20강 | 컨테이너 위젯 (container widget) 되짚어 보기.

✅ 드디어 여기부터는 순한맛을 벗어나 조금 매운맛 강좌이다 ㅎ..ㅎ

무료 강좌인데 진짜 이렇게 좋을 수가 없음...

 

유튜브 코딩쉐프님 강좌를 무한히 추천한다.

 

✅ 이번시간부터는 컨테이너 위젯에 대해서 알아볼 예정인데, 차근차근 봐보자.

우선 플러터 공식 홈페이지 가서 레이아웃 위젯을 확인하는 것도 좋은 방법이겠지?

https://flutter-ko.dev/docs/development/ui/widgets/layout#Single-child%20layout%20widgets

Layout widgets

 

플러터의 컨테이너의 공식 문서를 보면

 

"Containers with no children try to be as big as possible"

childern이 없을경우 컨테이너가 가능한 큰 부분을 차지한다.

 

🟠 코드를 보아라.

백그라운드가 white로 설정되어 있어도 컨테이너가 화면을 최대로 차지해서 빨간색으로 모두 덮여있다.

import 'package:flutter/material.dart'; // 데스크탑, 앱 등에 고루 UI를 적용할 수 있게 해주는 구글이 제공해주는 패키
import 'package:fluttertoast/fluttertoast.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      // 실질적으로 모든 앱을 감싸고 있다.
      title: 'Appbar', // 앱을 총칭하는 이름 -> 스마트 폰 앱에서 최근 사용한 앱 보여줄 때의 이름
      theme:
          ThemeData(primarySwatch: Colors.green // 특정색의 응용들을 기본 색상으로 지정해서 사용하겠
              ),
      home: MyPage(), // home은 앱이 실행될 때 가장먼저 보여주는 페이
    );
  }
}

class MyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Container(
        color: Colors.red
      ),
    );
  }
}

컨테이너가 가능한 많은 부분을 차지한다.

 

 

✅ 그렇다면 child를 가지고 있으면 어떻게 될까?

class MyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blue,
      body: Container(
        color: Colors.red,
        child: Text('Hello Hello Hello Hello Hello'),
      ),
    );
  }
}

바뀐 코드는 한줄 밖에 없다. 하지만 결과는 엄청난 차이를 보여준다... 

공식 문서를 보면

"Containers with children size themselves to their childred"

컨테이너가 children을 가지면 children의 크기가 된다.

 

다만 아래 그림의 단점은 화면 밖으로 벗어나게 된다는 점이다. 그럼 이런 문제를 해결하기 위해서는 어떻게 해야할까?

child를 가진 컨테이너

 

바로 SafeArea !

iOS 개발에서 자주 보았던 내용인데, iOS에서 애플의 설명에 따르면 SafeArea는 노치가 생김으로써 가려지는 화면이 생기는데 이 영역을 제외하여 안전하게 뷰를 보여줄 수 있는 부분이다. 

class MyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blue,
      body: SafeArea(
        child: Container(
          color: Colors.red,
          child: Text('Hello Hello Hello Hello Hello'),
        ),
      ),
    );
  }
}

맥 기준으로 컨테이너에 option + enter 누르면 바로 child 가능한 옵션을 제공해준다.

SafeArea 설정!

 

✅ 이번에는 컨테이너의 크기와 margin을 설정해보자.

class MyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blue,
      body: SafeArea(
        child: Container(
          color: Colors.red,
          width: 100,
          height: 100,
          margin: EdgeInsets.symmetric( //가로 세로 값 설정
            vertical: 50, // 세로축
            horizontal: 10, // 가로축
          ), 
          padding: EdgeInsets.all(20), 
          //EdgeInsets.all(20), // 모든 외부면에 20 픽셀 여백

          child: Text('Hello Hello Hello Hello Hello'),
        ),
      ),
    );
  }
}

 margin : (왼쪽 EdgeInsets.all,  가운데 EdgeInsets.symmetric), padding( 오른쪽 ) 

✅ Container 위젯은 Only One child

플러터에는 멀티차일드와 원차일드 두개가 있는데 컨테이너는 원 차일드이다.