플러터 튜토리얼 - 기본이 되는 필수 Container 위젯 학습

안녕하세요 :)

저번 시간에는 플러터를 구동하고 Hello World를 확인을 했어요.

플러터의 모든 구성 요소는 위젯이라고 설명을 드렸는데요. 기본이 되는 위젯들을 하나씩 살펴볼게요.

이번 시간에 학습을 할 위젯은 Container, Center 위젯 입니다.

Container, Center는 플러터의 레이아웃을 담당하는 위젯[0]이에요. HTML/CSS에서 익숙한 BOX 모델을 표현하기 위한 방법이에요.

1. Center

Center 위젯은 가운데 정렬을 위한 위젯이에요.

child를 중앙 정렬을 시키겠습니다.

 

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text(title)
      ),
      body: const Center(
        child: Text("hello World"),
      ),
    );
  }

 

세밀하게 박스의 설정을 조정하기 위해서는 아래의 Container 위젯을 사용해볼게요.

2. Container

컨테이너를 선언하면 하나의 박스가 만들어져요. 컨테이너 위젯은 색, 박스의 위치, 크기를 조절할 수 있겠습니다.

 

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text(title)
      ),
      body: Container(
        margin: const EdgeInsets.all(30),
        padding: const EdgeInsets.all(50),
        color: Colors.amber[600],
        child: const Text("hello World"),
        width: 200,	// 컨테이너의 너비
        height: 200	// 컨테이너의 높이
      ),
    );
  }

 

Container라는 위젯을 만듬으로써 하나의 박스를 만들었어요. 박스안에는 child인 Text 위젯을 선언하였습니다.

Container 위젯에서 제공해주는 기능인 박스의 크기를 조절하고, 색을 입힐 수 있어요.

박스를 옮기기 위해서는 EdgeInsets 을 사용하겠습니다 :)

 

직접 타이핑을 하면서 실습을 해보시면 좋겠습니다.

감사합니다.

 

[0]

https://docs.flutter.dev/development/ui/widgets/layout