Flutter - Container, Row, Column

레이아웃은 위젯의 위치를 잡아주는 역할을 합니다.

레이아웃이 다른 위젯이나 레이아웃의 child 또는 children 속성을 가지기도 합니다.

 

Container

Container는 한 개의 자식을 갖는 레이아웃 위젯입니다.

 

 

Container의 생성자는 아래와 같습니다.

Container({
    Key key,
    this.alignment,
    this.padding,
    Color color,
    Decoration decoration,
    this.foregroundDecoration,
    double width,
    double height,
    BoxConstraints constraints,
    this.margin,
    this.transform,
    this.child,
  })

 

padding은 Container 내부의 공간을 의미하고 Color는 배경색을 의미합니다.

margin은 Container 외부의 공간을 의미합니다.

 

아래는 Container을 사용한 예제입니다.

import 'package:flutter/material.dart';

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

class ContainerExample extends StatelessWidget {

  static const String _title = 'Container';

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      title: _title,
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: Text(_title)),
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Container(
              child: Text('텍스트'),
              padding: EdgeInsets.only(left: 10, top: 20, bottom: 20),
            ),
            Container(
              color: Colors.green,
              padding: EdgeInsets.symmetric(vertical: 30, horizontal: 50),
              child: Container(
                color: Colors.yellow,
                child: Text('텍스트'),
              ),
            )
          ],
        ),
      ),
    );
  }
}

 

 

위 Container에서는 padding 부분에서 EdgeInsets.only을 사용하였습니다.

EdgeInsets.only는 상단, 하단, 좌측, 우측에 각각 padding을 적용할 수 있습니다.

 

아래 Container에서는 Container안에 Container을 사용하였고, EdgeInsets.symmetric을 사용하였습니다.

EdgeInsets.symmetric은 세로와 가로를 정할 수 있습니다.

 

 

 

Row

Row({
    Key key,
    MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
    MainAxisSize mainAxisSize = MainAxisSize.max,
    CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
    TextDirection textDirection,
    VerticalDirection verticalDirection = VerticalDirection.down,
    TextBaseline textBaseline,
    List<Widget> children = const <Widget>[],
  })

 

mainAxisAlignment, crossAxisAlignment, children이 가장 중요한 속성입니다.

 

children은 위젯을 넣을 수 있는 자식 위젯입니다.

 

crossAxisAlignment는 Row 위젯이 기본적으로 정의하는 가로 방향과 반대인 세로 방식입니다.

crossAxisAlignment.center은 가로 방향을 유지하되 세로 방향은 중간으로 설정한다는 의미입니다.

 

mainAxisAlignment는 기본 값을 왼쪽으로 하며 가운데 정렬을 원하면 mainAxisAlignment.center을 하면 된다.

 

 

 

Column

Column({
    Key key,
    MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
    MainAxisSize mainAxisSize = MainAxisSize.max,
    CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
    TextDirection textDirection,
    VerticalDirection verticalDirection = VerticalDirection.down,
    TextBaseline textBaseline,
    List<Widget> children = const <Widget>[],
  })

 

기본적으로 Row와 비슷합니다.

 

다른 점은 mainAxisAlignment의 기본 값이 세로이고, crossAxisAlignment이 가로 방향입니다.

 

 

Row와 Column을 사용한 로그인 화면

import 'package:flutter/material.dart';

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

class LoginFormExample extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Login',
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Container(
          padding: EdgeInsets.fromLTRB(20, 120, 20, 120),
          child: Column(
            children: <Widget>[
              Hero(
                tag: 'Hero',
                child: CircleAvatar(
                  child: Image.asset('asset/images/cat.jpeg'),
                  backgroundColor: Colors.transparent,
                  radius: 58.0,
                )
              ),
              SizedBox(height: 45.0),
              TextFormField(
                keyboardType: TextInputType.emailAddress,
                decoration: InputDecoration(
                  hintText: '이메일',
                  border: OutlineInputBorder()
                ),
              ),
              SizedBox(height: 15.0),
              TextFormField(
                keyboardType: TextInputType.visiblePassword,
                obscureText: true,
                decoration: InputDecoration(
                    hintText: '비밀번호',
                    border: OutlineInputBorder()
                ),
              ),
              SizedBox(height: 10.0),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  RaisedButton(
                    child: Text('로그인'),
                    onPressed: () {},
                  ),
                  SizedBox(width: 10.0),
                  RaisedButton(
                    child: Text('취소'),
                    onPressed: () {},
                  )
                ],
              )
            ],
          ),
        ),
      ),
    );
  }
}

 

AppBar 속성을 넣지 않았고, body 전체에 padding을 EdgeInsets.fromLTRB을 통해 주었습니다.

 

 

EdgeInsets의 생성자는 아래와 같습니다.

 

• EdgeInsets.only - 지정하기 원하는 left, top, right, bottom 인자만 지정할 수 있습니다.
• EdgeInsets.symmetric - 가로 혹은 세로 방향이 대칭인 경우에 호출합니다.
• EdgeInsets.fromLTRB - left, top, right, bottom을 각각 지정할 때 사용합니다.

 

 

위에서 쓰인 TextFormField는 아래와 같습니다.

 

TextFormField

TextFormField({
    Key key,
    this.controller,
    String initialValue,
    FocusNode focusNode,
    InputDecoration decoration = const InputDecoration(),
    TextInputType keyboardType,
    TextCapitalization textCapitalization = TextCapitalization.none,
    TextInputAction textInputAction,
    TextStyle style,
    StrutStyle strutStyle,
    TextDirection textDirection,
    TextAlign textAlign = TextAlign.start,
    TextAlignVertical textAlignVertical,
    bool autofocus = false,
    bool readOnly = false,
    ToolbarOptions toolbarOptions,
    bool showCursor,
    bool obscureText = false,
    bool autocorrect = true,
    bool enableSuggestions = true,
    bool autovalidate = false,
    bool maxLengthEnforced = true,
    int maxLines = 1,
    int minLines,
    bool expands = false,
    int maxLength,
    ValueChanged<String> onChanged,
    GestureTapCallback onTap,
    VoidCallback onEditingComplete,
    ValueChanged<String> onFieldSubmitted,
    FormFieldSetter<String> onSaved,
    FormFieldValidator<String> validator,
    List<TextInputFormatter> inputFormatters,
    bool enabled = true,
    double cursorWidth = 2.0,
    Radius cursorRadius,
    Color cursorColor,
    Brightness keyboardAppearance,
    EdgeInsets scrollPadding = const EdgeInsets.all(20.0),
    bool enableInteractiveSelection = true,
    InputCounterWidgetBuilder buildCounter,
  })

 

TextFormField는 값을 입력받을 수 있는 Form입니다.