[Flutter/Widget] Column, Row (MainAxisAlignment)

앤써북의 ⌜모두가 할 수 있는 플러터 UI 입문⌟을 참고하여 작성하였습니다.

📌  이번 글은

책의 샘플 앱을 만들면서 공부한 위젯 정리입니다.

 

Column / Row

•  자식을 수직/수평 배열로 표시하는 위젯
• 스크롤되지 않음 (사용 가능한 공간에 맞는 것보다 Column/Row에 더 많은 자식이 있으면, ERROR)
• 공간이 부족할 경우 스크롤 할 수 있도록 ListView 사용
• mainAxisAlignment 속성: Column/Row의 자식을 기본 축을 따라 배치하는 방법 (MainAxisAlignment 사용)

 

MainAxisAlignment

• Flex Layout에서 기본 축을 따라 자식을 배치하는 방법
• .start / .center / .end / ...

 

👩🏻‍💻 사용 예제

• Row

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(               
        appBar: AppBar(             
          title: Text('Row'),
          centerTitle: true,
        ),
        body: Row(    // *** Row 위젯 ***
          mainAxisAlignment: MainAxisAlignment.center,  // Row의 자식을 기본 축을 따라 배치하는 방법
          children: [
            Icon(Icons.food_bank, color: Colors.black, size: 100),
            Icon(Icons.home, color: Colors.black, size: 100),
          ],
        ),
      ),
    );
  }
}

 

🙋🏻‍♀️ 참고

최주호, 정호준, 정동진 공저, ⌜모두가 할 수 있는 플러터 UI 입문⌟, 앤써북(2021), p95~p96