[flutter] 레이아웃 - ROW, COLUMN

wonsama (79)in #flutter • 6 years ago (edited)

서론

오늘은 flutter에서 가장 기본이 되는 레이아웃(배치)에 대해 알아보려 합니다.

ROW : 행 - 수평 형태로 (왼쪽에서 오른쪽) 위젯을 순차적으로 배치 합니다.
COLUMN : 열 - 수직 형태로 (위에서 아래) 위젯을 순차적으로 배치 합니다.

_{플러터란 ? 구글에서 개발한 크로스 플랫폼 앱 개발 프레임워크이다. 언어는 구글이 개발한 Dart 를 사용한다. 안드로이드, iOS, Web, Desktop 을 지원하며 구글의 차기 OS Fuchsia의 메인개발환경이 된다고 한다.}

참조링크

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

소스코드

body: Row ( Row, Column )
mainAxisAlignment: MainAxisAlignment.start ( start, center, end )

위와 같이 변형하여 테스트 한 결과 입니다.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'demo01',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Row - MainAxisAlignment.start'),
        ),
        body: Row (
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Icon(Icons.star, size: 50, color: Colors.red),
            Icon(Icons.star, size: 50, color: Colors.red),
            Icon(Icons.star, size: 50, color: Colors.red),
            Icon(Icons.star, size: 50, color: Colors.red),
            Icon(Icons.star, size: 50, color: Colors.black),
          ],
        ),
      ),
    );
  }
}