Layout 1

Flutter 레이아웃 메커니즘의 핵심은 위젯입니다. 

 

 

두 번째 스크린샷은 각 열에 아이콘과 레이블이 포함된 3열 행을 보여주는 시각적 레이아웃을 표시합니다

 

다음은 이 UI의 위젯 트리 다이어그램입니다.

 

 

보이는 위젯 생성하기

Layout widget 인 Center 를 이용하여 Text 위젯을 중앙에 위치하도록 하기

lib/layout/add_visible_widget_with_layout.dart

import 'package:flutter/material.dart';

class VisibleWidgetWithLayout extends StatelessWidget
{
  const VisibleWidgetWithLayout({Key? key, this.contents}) : super(key: key);

  final String? contents;
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return  Center(
      child: Text(contents ?? ''),
    );
  }

}

lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter3/layout/add_visible_widget_with_layout.dart';

void main() {
  runApp(
    const MaterialApp(
      title: 'My app', // used by the OS task switcher
      home: Scaffold(
        body: Center(
          child: VisibleWidgetWithLayout( contents: "Hello World"),
        ),
      ),
    ),
  );
}

 

 

페이지에 레이아웃 위젯 추가

 

 

Material design apps

lib/layout/material_layout.dart

import 'package:flutter/material.dart';

class MaterialLayout extends StatelessWidget {
  const MaterialLayout({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Add layout widget to page',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('It is a layout demo'),
        ),
        body: const Center(
          child: Text('Hello world'),
        ),
      ),
    );
  }
}

MaterialApp design 의 Scaffold 를 이용해 appBar 와 body 를 정의 했다.

appbar 의 Title 은 "It is a Layout demo' 이다.

body 는 Text widget 으로 되어 있으며 "Hello world" 이다.

 

Non Material design apps

lib/layout/non_material_layout.dart

import 'package:flutter/material.dart';

class NonMaterialLayout extends StatelessWidget {
  const NonMaterialLayout({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: const BoxDecoration(color: Colors.white),
      child: const Center(
        child: Text(
          'Hello World',
          textDirection: TextDirection.ltr,
          style: TextStyle(
            fontSize: 32,
            color: Colors.black87,
          ),
        ),
      ),
    );
  }
}

 

 

Aliging widgets

mainAxisAlignment및 crossAxisAlignment속성 을 사용하여 Row 와 Column 의 자식 위젯들을 정렬한다.

 

1. Row
lib/align_row.dart

import 'package:flutter/material.dart';

class AlignRow extends StatelessWidget {
  const AlignRow({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Align row',
      home: Scaffold(
          appBar: AppBar(
            title: const Text('Align row'),
          ),
          body: SafeArea(
            child: Container(
              color: Colors.green,
              height: double.infinity,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Container(
                      height: 100,
                      width: 100,
                      color: Colors.red,
                      child: const Center(child: Text('Hello First'))
                  ),
                  Container(
                      height: 100,
                      width: 100,
                      color: Colors.blue,
                      child: const Center(child: Text('Hello Second'))
                  ),
                  Container(
                    height: 100,
                    width: 100,
                    color: Colors.yellow,
                    child: const Center(child: Text('Hello Third')),
                  ),

                ],
              ),
            ),
          )
      ),
    );
  }
}

Row widget 일 경우

MainAxisAlignment 는 가로를 기준으로 정렬하고

CrossAxisAlignment 는 세로를 기준으로 정렬된다.


2. Column
lib/align_column.dart

import 'package:flutter/material.dart';

class AlignColumn extends StatelessWidget {
  const AlignColumn({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Align column',
      home: Scaffold(
          appBar: AppBar(
            title: const Text('Align column'),
          ),
          body: SafeArea(
            child: Container(
              color: Colors.green,
              width: double.infinity,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Container(
                      height: 100,
                      width: 100,
                      color: Colors.red,
                      child: const Center(child: Text('Hello First'))
                  ),
                  Container(
                      height: 100,
                      width: 100,
                      color: Colors.blue,
                      child: const Center(child: Text('Hello Second'))
                  ),
                  Container(
                    height: 100,
                    width: 100,
                    color: Colors.yellow,
                    child: const Center(child: Text('Hello Third')),
                  ),

                ],
              ),
            ),
          )
      ),
    );
  }
}

Column widget 일 경우

MainAxisAlignment 는 세로를 기준으로 정렬하고

CrossAxisAlignment 는 가로를 기준으로 정렬된다.

 

Sizing widgets

위 align_row.dart 중 Hello frist 부분의 width : 100 을 width : 1000 으로 변경해 보자

그리고 다시 실행해 보자 (빠른 실행을 해보자)

아래와 같이 범위를 벗어나면 빗금이 나타나며 경고를 표시한다.

이럴경우 사용하는게 Expanded 라는 widget 이다.

이걸 사용하게 되면 행이나 열에 맞게 위젯의 크기를 조정할 수 있다. 

 

width: 1000 인 Container 를 Expanded 로 감싸보자

 

flex 를 이용하여 상대적인 공간을 설정할 수 있다. 

 

 

Packing widgets

기본적으로 행이나 열은  주축(가로 또는 세로)을 따라 가능한 많은 공간을 차지 한다. 

만약 자식을 밀접하게 묶고 싶다면 mainAxissize 를 사용하자

layout/packing_widget

import 'package:flutter/material.dart';

class PackingWidget extends StatelessWidget {
  const PackingWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Packing widget',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Packing widget'),
        ),
        body: SafeArea(
            child: Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                Icon(Icons.star, color: Colors.green[500]),
                Icon(Icons.star, color: Colors.green[500]),
                Icon(Icons.star, color: Colors.green[500]),
                const Icon(Icons.star, color: Colors.black),
                const Icon(Icons.star, color: Colors.black),
              ],
            )        ),
      ),
    );
  }
}

 

관련영상

https://youtu.be/ZqR0DPX25As