2. 레이아웃 기초

Building layouts

위의 레이아웃을 분석해보자.

 

1. 첫번째 행은 Title Section

   

1. 가장 바깥은 Container 위젯
2. 첫번째 자식은 Row 위젯이고 3개의 자식 위젯을 가지고 있다.
3. 자식 위젯 중 첫번째는 컬럼 위젯 with 2 children (2개의 Text 위젯) 특징으로는 대부분의 공간을 차지하고 있고 이 속성은 Expanded
4. 두번째는 아이콘 위젯
5. 마지막은 텍스트 위젯

 

위의 글을 코드로 변환해보면

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Widget titleSection = Container(
      padding: const EdgeInsets.all(32.0),
      child: Row(
        children: [
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                  padding: const EdgeInsets.only(bottom: 8.0),
                  child: Text(
                    'Oeschinen Lake Campground',
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
                Text(
                  'Kandersteg, Switzerland',
                  style: TextStyle(
                    color: Colors.grey[500],
                  ),
                ),
              ],
            ),
          ),
          Icon(
            Icons.star,
            color: Colors.red[500],
          ),
          Text('41'),
        ],
      ),
    );
  //...
}

핵심은 레이아웃 구성에 있어서 먼저 큰 틀로 자른다.

위의 예제에서 가로로 배열시키려면 Row 위젯을 써야하고,

첫번째 텍스트 위젯은 수직으로 2개를 배열해야 하기 때문에 Column 위젯을 써야하는 방식으로 접근하면 레이아웃을 구성하는데 어렵지 않다.

Custom 위젯을 구성해놓고 사용하면 생산성이 굉장히 좋을듯?

Flutter 에서 사용하는 모든건 위젯이다! 레이아웃 마저도 위젯!

 

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