[flutter] 레이아웃 - ROW, COLUMN

in #flutter6 years ago (edited)

서론

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

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

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

참조링크

소스코드

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),
          ],
        ),
      ),
    );
  }
}

ROW

  • 일부 중복된 레이아웃은 삭제하였음을 양해 바랍니다. ( 이미지 첨부가 너무 많아져서 ... )

COLUMN

  • 공간을 조절해 주는 spaceXXX 같은 경우 미묘하게 차이가 있네요 :)

기타 설정

crossAxisAlignment (상하좌우 양축 정렬)

  • CrossAxisAlignment.baseline : 폰트크기가 다르거나 할때 기본 라인 축에 맞춰 정렬할때 유용
  • CrossAxisAlignment.start : 시작지점으로 맞춤, 이후 좌우(Column인 경우) 또는 상하(Row인 경우) 간격을 맞춤
  • CrossAxisAlignment.stretch : 늘림(최대화)
  • CrossAxisAlignment.center : 중앙정렬

mainAxisSize 메인 축의 크기(컨테이너 영역)

  • MainAxisSize.min : 최소화
  • MainAxisSize.max : 최대화

관련 글 링크

@flutters : 제가 작성한 글 중 fluter 관련 글만 모아서 리스팀 처리

DART

FLUTTER

금주의 위젯

설치/설정

Sort:  

짱짱맨 호출에 응답하여 보팅하였습니다.

플러터는 레이아웃이 다양하네요.
저는 앱 레이아웃 잡는게 제일 어렵습니다.

Hi @wonsama!

Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
Your UA account score is currently 3.802 which ranks you at #4673 across all Steem accounts.
Your rank has improved 1 places in the last three days (old rank 4674).

In our last Algorithmic Curation Round, consisting of 237 contributions, your post is ranked at #65.

Evaluation of your UA score:
  • You're on the right track, try to gather more followers.
  • The readers like your work!
  • Good user engagement!

Feel free to join our @steem-ua Discord server