[flutter-09] 컨테이너 위젯과 Column, Row

컨테이너 위젯

• 레이아웃의 Single-child layout widgets 일종입니다.
• 컨테이너 위젯은 자식(child)가 없는 경우에는 페이지 내에서 가능한 최대한의 공간을 차지합니다.

컨테이너의 색상을 red로 설정했더니 화면 전체가 red가 됨을 볼 수 있습니다.

import 'package:flutter/material.dart';

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

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

컨네이터 위젯에서 자식(child)를 불러오면 자식 위젯에 맞춰서 컨테이너 위젯이 변경됨을 볼 수 있습니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
          backgroundColor: Colors.blue,
            body: Container(
      color: Colors.red,
      child: Text(
        "Text",
        style: TextStyle(color: Colors.blue),
      ),
    )));
  }
}

SafeArea를 이용해서 화면 안으로 보여주게 만들어줄 수 있습니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            backgroundColor: Colors.blue,
            body: SafeArea(
              child: Container(
                color: Colors.red,
                child: Text(
                  "Text",
                  style: TextStyle(color: Colors.blue),
                ),
              ),
            )));
  }
}

컨테이너 위젯 width, height, margin, padding과 flutter inspector를 사용할 수 있습니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            backgroundColor: Colors.blue,
            body: SafeArea(
              child: Container(
                color: Colors.red,
                child: Text(
                  "Text",
                  style: TextStyle(color: Colors.blue),
                ),
                width: 100,
                height: 100,
                // margin: EdgeInsets.all(20),
                margin: EdgeInsets.symmetric(
                  vertical: 80,
                  horizontal: 20
                ),
                // padding: EdgeInsets.all(20),
                padding: EdgeInsets.all(40),

              ),
            )));
  }
}

---

Column과 Row 위젯

flutter 레이아웃 참고하기 좋은 사이트 https://medium.com/flutter-community/flutter-layout-cheat-sheet-5363348d037e

Column과 row는 반대의 성질을 가지기 때문에 Column으로만 작성합니다.

mainAxisAlignment는 세로 정렬, crossAxisAlignment는 가로 정렬을 합니다.

• Column은 세로로 정렬해주는 역할을 하며 세로 축을 모두 사용하고 세로축은 위젯의 크기로 제한이 되는 children을 가지는 위젯입니다.
• Row는 가로로 정렬해주는 역할을 하며 가로 축을 모두 사용하고 가로축은 위젯의 크기로 제한이 되는 children을 가지는 위젯입니다.

• Center 위젯을 사용하면 오직 가로축으로만 정렬이 되며 mainAxisAlignment: MainAxisAlignment.center로 가로축 정렬을 사용할 수 있고 Center와 mainAxisAlignment: MainAxisAlignment.center를 같이 사용해야 정중앙 정렬이 가능합니다.
  mainAxisAlignment 는 가로 축 정렬에만 사용되는게 아니라 주축 정렬이라고 봐야합니다.

• 세로축의 모든 공간을 차지 하지 못하도록 하는 기능으로 mainAxisSize: MainAxisSize.min,을 사용할 수 있고mainAxisAlignment 없이 정중앙 정렬을 할 수 있습니다.

• verticalDirection: VerticalDirection.up, 사용하면 밑에서부터 채워줄 수 있습니다.

• mainAxisAlignment: MainAxisAlignment.spaceEvenly을 사용하면 일정한 간격으로 위젯을 배치할 수 있습니다.

• mainAxisAlignment: MainAxisAlignment.spaceBetween을 사용하면 상 중 하로 위젯을 배치할 수 있습니다.

• crossAxisAlignment: CrossAxisAlignment.end를 사용하여 가로축 정렬을 할 수 있습니다.
  
  

• width: double.infinity을 이용하여 hight가 없는 위젯을 생성하면 오른쪽으로 다른 위젯들을 정렬할 수 있습니다.

• crossAxisAlignment: CrossAxisAlignment.stretch 가로로 위젯을 가득채우고 싶은 경우에 사용합니다.

• sizedBox는 위젯간의 간격을 두고 싶은 경우에 사용합니다.

import 'package:flutter/material.dart';

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


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: MyPage(),
      ),
    );
  }
}


class MyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.teal,
      body: SafeArea(
        // child: Center(
          child: Column(
            // mainAxisAlignment: MainAxisAlignment.center,
            // mainAxisSize: MainAxisSize.min,

            // verticalDirection: VerticalDirection.up,
            // verticalDirection: VerticalDirection.down,

            // mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            // mainAxisAlignment: MainAxisAlignment.spaceBetween,

            // crossAxisAlignment: CrossAxisAlignment.end,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Container(
                // width: 100,
                height: 100,
                color: Colors.white,
                child: Text("Container1"),
              ),
              SizedBox(height: 30.0,),
              Container(
                // width: 100,
                height: 100,
                color: Colors.red,
                child: Text("Container2"),
              ),

              Container(
                // width: 100,
                height: 100,
                color: Colors.blue,
                child: Text("Container3"),
              ),
              // Container(
                // width: double.infinity,
              // ),
            ],
          ),
        ),
      // )
    );
  }
}