출처 : https://flutter.dev/docs/development/ui/layout

기본적으로 원문 구성를 기반으로 작성되지만, 편의상 일부 내용은 가감 될 수 있습니다.

미리보기

• 위젯은 UI를 만들기 위한 클래스다.
• 위젯은 레이아웃 구성 및 UI 요소를 구성하는데 사용된다.
• 간단한 위젯을 조합하여 복잡한 위젯을 만들 수 있다.

플러터에서 거의 모든 것이 위젯입니다. 화면에 보여지는 이미지, 아이콘, 텍스트는 물론이며, 보이지 않는 행, 열, 그리드, 정렬 등 또한 모두 위젯입니다.

아래와 같이 복잡한 위젯을 만들기 위해 위젯을 조합하여 레이아웃을 구성합니다.

[ 참조 ] : debugPaintSizeEnabled 값을 true 로 설정하여 위와 스크린샷과 같이 box 영역을 표시해 주는데, 자세한 내용은 시각적으로 레이아웃 문제 디버깅 페이지를 참조 바랍니다.

위젯 다이어그램

위 그림을 보면 분홍색으로 표시된 Container(컨테이너, 그릇을 담는 용기) 가 존재하는데 컨테이너 하위에 아래 와 같은 다양한 위젯을 담아 하나의 복잡한 위젯을 구성하는 것입니다. 이렇게 내부적으로 담긴 위젯들은 속성값(색상, 텍스트 스타일 등)을 조절을 통해 손쉽게 화면을 바꿀 수 있습니다.

위젯 배치하기

어찌보면 작은 것을 만들어서 점점 더 큰 그릇에 담아간다 생각하면 됩니다 :)

1. 레이아웃 위젯 선택하기

레이아웃 위젯 페이지에 존재하는 다양한 레이아웃 위젯중 하나를 선택합니다. 여기서는 Center 위젯을 선택하여 작업을 진행해 보겠습니다.

2. 보이는 위젯 만들기

텍스트 위젯

Text('Hello World'),

이미지 위젯

Image.asset(
  'images/lake.jpg',
  fit: BoxFit.cover,
),

아이콘 위젯

Icon(
  Icons.star,
  color: Colors.red[500],
),

3. 보이는 위젯을 레이아웃 위젯에 추가하기

위젯은 일반적으로 child(자식) 또는 children(자식들) 속성중 하나를 가지고 있습니다.

• child : Center, Container 위젯 등과 같이 1개의 자식을 가지는 것
• children : Row, Column, ListView, Stack 등과 같이 목록형 위젯을 자식으로 가지는 것

Center(
  child: Text('Hello World'),
),

4. 레이아웃 위젯을 페이지에 추가하기

플러터 앱 자체가 위젯이며, 위젯을 보여주는 build() 메소드를 가지고 있습니다.

Material App (머트리얼 앱)

MaterialApp은 Scaffold 위젯을 사용할 수 있으며, 이를 통해 기본배너, 배경색, drawer, snackbar, bottom sheet 등을 사용할 수 있습니다. body 속성에 Center 위젯을 아래와 같이 추가하여 사용할 수 있습니다.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter layout demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter layout demo'),
        ),
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

머트리얼 앱 아닌것

머트리얼 앱이 아닌 경우, 앱의 build() 메소드를 통해 아래와 같이 위젯을 구성할 수 있습니다.
Container 로 빈 용기를 만든 후 자식 개체로 Center 를 추가 후 하위 자식으로 텍스트를 넣은 예제

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(color: Colors.white),
      child: Center(
        child: Text(
          'Hello World',
          textDirection: TextDirection.ltr,
          style: TextStyle(
            fontSize: 32,
            color: Colors.black87,
          ),
        ),
      ),
    );
  }
}

to be continued ...

맺음말

스몬 앱을 만들어 보려 했지만, 기본기가 너무 부실한 관계로 일단 공부를 더 하는 샘 치고 관련 문서를 정리해 가면서 리뷰 하는 중 ㅜㅜ