[Flutter] Row, Column Class

 

---

Row Class

 

예제코드

 

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Row'),
          centerTitle: true,
        ),
        body: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              width: 100,
              height: 100,
              color: Colors.redAccent,
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.cyanAccent,
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.greenAccent,
            ),
          ],
        ),
      ),
    );
  }
}

 

 

위젯들을 가로로 배치할 때 사용하는 위젯입니다.

 

mainAxisAlignment, crossAxisAlignment를 사용하여 위젯의 배치를 지정할 수 있습니다.

 

사진 출처: https://flutter-ko.dev/docs/development/ui/layout

 

mainAxisAlignment: MainAxisAlignment.start
                                    .center
                                    .end
                                    .spaceEvenly
                                    .spaceAround
                                    .spaceBetween

012345

start~spaceBetween 순서

 

---

 

Column Class

 

예제 코드

 

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Column'),
          centerTitle: true,
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              width: 100,
              height: 100,
              color: Colors.redAccent,
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.cyanAccent,
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.greenAccent,
            ),
          ],
        ),
      ),
    );
  }
}

 

위젯들을 세로로 배치할 때 사용하는 위젯입니다.

 

mainAxisAlignment, crossAxisAlignment 속성을 사용하여 위젯의 배치 위치를 지정할 수 있습니다.

 

사진 출처: https://flutter-ko.dev/docs/development/ui/layout

 

mainAxisAlignment: MainAxisAlignment.start
                                    .center
                                    .end
                                    .spaceEvenly
                                    .spaceAround
                                    .spaceBetween

012345

start~spaceBetween 순서

 

 

좀더 깊게 공부해보고싶으시다면?!

 

https://flutter-ko.dev/docs/development/ui/layout

Flutter 레이아웃