Column & Row Widgets for Layout

[Ko]

Column & Row Widgets for Layout

 - Multi-child layout widgets : Row, Column, Stack 등

 - Column widget은 최대의 vertical space를 차지하는 속성을 가짐. (Show Debug Paint 모드에서 확인해 볼 수 있음.) horizontally 방향으로는 children의 가로 길이 size를 차지함. 

 - mainAxissize : 세로방향 사이즈 지정(max, min)

 - verticalDirection: 세로방향에서의 children 정렬 방향을 지정(up, down ; down이 default value)

 - mainAxisAlignment : Column 내 세로 방향에서의 children간의 간격을 지정(start, end, center, spaceAround, spaceBetween, SpaceEvenly)

 - crossAxisAlignment : Column 내 가로 방향에서의 children간의 간격을 지정(start, end, center, spaceAround, spaceBetween, SpaceEvenly)

 - Row에서는 mainAxis가 가로 방향, crossAxis가 세로 방향임.

 - column에서 crossAxisAlignment를 제대로 사용하기 위해서는 column내 children의 width를 정해주거나 최대로 지정해주어야 함.(기본적으로는 최소의 children width만 차지하기 때문에 crossAxisAlignment의 효과가 나타나지 않음.) ; column의 height나 width를 지정할 수는 없음.

 —> children을 그대로 둔 상태에서 crossAxisAlignment의 효과를 나타내려면 다른 child로 invisible container를 만들어주는 방향을 사용할 수 있음.

  Container(

    width: double.infinity,

    height: 10.0,

  )

],

 

 - child item들을 가로 방향으로 확장하려면?

각 child container의 width를 double.infinity로 지정하거나, Column의 crossAxisAlignment property를 CrossAxisAlignment.stretch로 지정함. 

 - Column에서 배운 모든 내용은 Row에서도 동일하게 사용할 수 있으며 방향만 반대로 적용됨.

 - 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: Column(

//            mainAxisSize: MainAxisSize.min,

//          verticalDirection: VerticalDirection.down,

//            verticalDirection: VerticalDirection.up,

//            mainAxisAlignment: MainAxisAlignment.start,

//            mainAxisAlignment: MainAxisAlignment.end,

//            mainAxisAlignment: MainAxisAlignment.center,

//            mainAxisAlignment:  MainAxisAlignment.spaceAround,

//            mainAxisAlignment: MainAxisAlignment.spaceBetween,

//            mainAxisAlignment: MainAxisAlignment.spaceEvenly,

            crossAxisAlignment: CrossAxisAlignment.stretch,

            children: <Widget>[

              Container(

                height: 100.0,

                width: 100.0,

                color: Colors.white,

                child: Text('Container1'),

              ),

              SizedBox(

                height: 20.0,

              ),

              Container(

                width: 100.0,

                height: 100.0,

                color: Colors.blue,

                child: Text('Container2'),

              ),

              Container(

                width: 100.0,

                height: 100.0,

                color: Colors.red,

                child: Text('Container3'),

              ),

//              Container(

//                width: double.infinity,

//                height: 10.0,

//              )

            ],

          ),

        ),

      ),

    );

  }

}

 

==================================================================================

 

[En]

Column & Row Widgets for Layout

- Multi-child layout widgets: Row, Column, Stack, etc.

 - Column widget has the property of occupying the maximum vertical space. (You can check it in Show Debug Paint mode.) It occupies the size of the children's width in the horizontally direction.

- mainAxissize: Specify vertical size (max, min)

 - verticalDirection: Specifies the direction of children alignment in the vertical direction (up, down; down is the default value)

 - mainAxisAlignment: Specify the spacing between children in the vertical direction in the column (start, end, center, spaceAround, spaceBetween, SpaceEvenly)

 - crossAxisAlignment: Specify the spacing between children in the horizontal direction in the column (start, end, center, spaceAround, spaceBetween, SpaceEvenly)

 - In Row, mainAxis is horizontal and crossAxis is vertical.

 - In order to use the crossAxisAlignment properly in the column, the width of the children in the column must be set or designated as the maximum (by default, the effect of the crossAxisAlignment does not appear because it occupies only the smallest children width); Column height or width cannot be specified.

 --> To show the effect of crossAxisAlignment while leaving children unchanged, you can use the direction to create an invisible container with other children.

 

  Container(

    width: double.infinity,

    height: 10.0,

  )

],

 

- How to expand child items horizontally?

Set the width of each child container to double.infinity, or set the crossAxisAlignment property of Column to CrossAxisAlignment.stretch.

-All contents learned in Column can be used in the same way in Row, and only the direction is applied in reverse.

 - 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: Column(

//            mainAxisSize: MainAxisSize.min,

//          verticalDirection: VerticalDirection.down,

//            verticalDirection: VerticalDirection.up,

//            mainAxisAlignment: MainAxisAlignment.start,

//            mainAxisAlignment: MainAxisAlignment.end,

//            mainAxisAlignment: MainAxisAlignment.center,

//            mainAxisAlignment:  MainAxisAlignment.spaceAround,

//            mainAxisAlignment: MainAxisAlignment.spaceBetween,

//            mainAxisAlignment: MainAxisAlignment.spaceEvenly,

            crossAxisAlignment: CrossAxisAlignment.stretch,

            children: <Widget>[

              Container(

                height: 100.0,

                width: 100.0,

                color: Colors.white,

                child: Text('Container1'),

              ),

              SizedBox(

                height: 20.0,

              ),

              Container(

                width: 100.0,

                height: 100.0,

                color: Colors.blue,

                child: Text('Container2'),

              ),

              Container(

                width: 100.0,

                height: 100.0,

                color: Colors.red,

                child: Text('Container3'),

              ),

//              Container(

//                width: double.infinity,

//                height: 10.0,

//              )

            ],

          ),

        ),

      ),

    );

  }

}