Container Widgets

How to Use Container Widgets

 

[Ko]

 - Container widget에 대하여 알아봅시다. Container widget은 web development에서의 div와 비슷한 개념이며, layout box의 역할을 한다.

 - Container widget은 child를 받아서 대상 widget의 size, position 등을 정해줌.

 - layout widget은 child의 숫자에 따라서 Single-child layout widgets와 Multi-child layout widgets로 나누어지며 Container widget은 Single-child layout widget에 속함.

 - children을 가지지 않는 Container는 가능한 한 최대의 공간을 차지하려는 속성을 가지며, children을 가지는 경우는 Container size는 children size와 같아짐.

 - Text widget은 대상 string의 font size 만큼의 크기를 가짐.

 - SafeArea : 핸드폰 상하단의 기기 모양에 따라 잘리는 부분을 제외한 안전한 공간에 배치시키는 widget.

 - flutter inspector의 파란 사각 버튼(Show Debug Paint)을 누르면 margin, padding 등의 layout 구조를 보다 정확하게 볼 수 있음. (아래 그림) 

 

 

 - widget의 바깥 공간 여백 조정 : margin

 - widget의 안쪽 공간 여백 조정 : padding

 - margin, padding 모두 Edgeinsets를 사용하며, Edgeinsets class는 all, symmetric, fromLTRB, only 등의 다양한 constructor를 가짐.

 - final code

import 'package:flutter/material.dart';

 

void main() {

  runApp(

    MyApp()

  );

}

 

class MyApp extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return     MaterialApp(

      home: Scaffold(

        backgroundColor: Colors.teal,

        body: SafeArea(

          child: Container(

            height: 100.0,

            width: 100.0,

//            margin: EdgeInsets.all(20),

//            margin: EdgeInsets.symmetric(vertical: 50.0, horizontal: 10.0),

//            margin: EdgeInsets.fromLTRB(30.0, 10.0, 50.0, 20.0),

            margin: EdgeInsets.only(left: 30.0, top: 30.0),

            padding: EdgeInsets.all(20.0),

            color: Colors.white,

            child: Text('Hello'),

          ),

        ),

      ),

    );

  }

}

 

 - container는 1개의 child만을 가질 수 있음. 복수의 child를 이용해서 layout을 구성하기 위해서는 Column widget이나 Row widget을 사용할 수 있음.

 - Container의 배경색을 color property를 시용해서 설정하는 것은 괜찮지만 decoration property에 BoxDecoration 위젯을 사용하는 경우에는 color property를 BoxDecoration 내부로 옮겨야 함. (옮기지 않으면 app crash 발생), Container가 가지고 있는 color property는 원애 BoxDecoration의 color property를 편의를 위해 밖으로 빼놓은 것임.

 

[En]

 - Let's find out about Container widget. Container widget is a concept similar to div in web development, and serves as a layout box.

 - Container widget receives child and determines size, position, etc. of target widget.

 - The layout widget is divided into single-child layout widgets and multi-child layout widgets according to the number of children, and the container widget belongs to the single-child layout widget.

 - Containers that do not have children have the property of occupying the maximum space possible, and if they have children, Container size is the same as children size.

 - Text widget has the size of the font size of the target string.

 - SafeArea: A widget that is placed in a safe space except for the cut portion depending on the shape of the device at the top and bottom of the mobile phone.

 - If you press the blue square button (Show Debug Paint) of the flutter inspector, you can see the layout structure such as margin and padding more accurately. (Picture below)

 

- Adjust the margin of the outer space of the widget: margin

 - Adjust the inner space margin of the widget: padding

 - Both margin and padding use Edgeinsets, and Edgeinsets class has various constructors such as all, symmetric, fromLTRB, and only.

 - final code

import 'package:flutter/material.dart';

 

void main() {

  runApp(

    MyApp()

  );

}

 

class MyApp extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return     MaterialApp(

      home: Scaffold(

        backgroundColor: Colors.teal,

        body: SafeArea(

          child: Container(

            height: 100.0,

            width: 100.0,

//            margin: EdgeInsets.all(20),

//            margin: EdgeInsets.symmetric(vertical: 50.0, horizontal: 10.0),

//            margin: EdgeInsets.fromLTRB(30.0, 10.0, 50.0, 20.0),

            margin: EdgeInsets.only(left: 30.0, top: 30.0),

            padding: EdgeInsets.all(20.0),

            color: Colors.white,

            child: Text('Hello'),

          ),

        ),

      ),

    );

  }

}

 

 - A container can have only one child. Column or Row widget can be used to configure layout using multiple children.
 - It is okay to set the background color of the container by using the color property, but when using the BoxDecoration widget for the decoration property, the color property must be moved inside the BoxDecoration. (If it doesn't move, an app crash occurs), and the color property of the container is the color property of the original BoxDecoration taken out for convenience.