Flutter 컨테이너(Container) 정리

Flutter 컨테이너(Container) 정리

 

이번 시간에는 Container 위젯을 다루며, 공식 문서에 나온 내용을 직접 실습.

Container란?

플러터 공식 문서에서 Container는 이렇게 정의

“Containers with no children try to be as big as possible.”

→ child가 없을 경우, 가능한 한 큰 영역을 차지한다.

 

즉, 컨테이너는 레이아웃 상의 빈 공간을 최대한 확장하여 채우는 위젯이다.

 

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

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

 

 

예제 1: child가 없는 경우

백그라운드 색이 white로 설정되어 있어도,

Container가 화면 전체를 덮으며 빨간색으로 꽉 찬 화면을 보여줌.

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
      ),
    );
  }
}

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

 

 

 

 

 

예제 2: child가 있는 경우

이번엔 컨테이너에 Text 위젯을 자식으로 추가해보자.

단, 이 상태에서는 노치(Notch)나 시스템 UI 영역을 침범할 수 있음.

 

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'),
      ),
    );
  }
}

 

child를 가진 컨테이너

 

 

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'),
        ),
      ),
    );
  }
}

 

 

Container의 크기, 여백(margin) & 패딩(padding)

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

 

SafeArea 설정!

 

 

Container의 크기, 여백(margin) & 패딩(padding)

컨테이너는 width, height, margin, padding 속성을 통해 위치와 크기를 세밀하게 조절할 수 있음.

 

 

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( 오른쪽 )