(Flutter) UI - 2.1. Layouts

UI 목차

  • Introduction to widgets
  • Building layouts
    • Layouts in Flutter
    • Tutorial
    • Creating responsive apps
    • Box constraints
  • Adding interactivity
  • Asserts & Images
  • Navigation & routing
  • Animations
    • Introduction
    • Overviews
    • Tutorial

Layouts

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

들어가기 전에

  • 위젯은 UI를 만들때 사용하는 클래스다
  • 위젯은 layout 과 UI 구성요소 모두에 사용된다
  • Flutter layout 메카니즘의 핵심은 widget 이다
  • Flutter에서 거의 모든 것은 widget 이다
  • 심지어 layout modes 도 widgets 이다
  • 보이는 것(images, icons, text …) 뿐 아니라 보이지 않는 것(rows, columns, grids …)도 widget이다

(예)

  • 위 예에서 Container는 그 아래 child widget을 customize할 수 있게 하는 widget class이다
    • padding, margins, borders, background color 등을 추가하길 원할 때 container를 사용한다
    • 위 예에서는 각각의 Text widet이 margins을 추가하기 위해 Container가 감싸고 있다
    • 또한 전체 Row(행)은 row 주위에 padding을 추가하기 위해 Container가 감싸고 있다 ….

Lay out a widget

1. Select a layout widget

2. Create a visible widget

3. Add the visible widget to the layout widget

4. Add the layout widget to the page

  • Flutter app 자체로 하나의 widget 이다
  • 대부분의 widget은 build() 메소드를 가지며, 인스턴스화하여 widget을 display 한다

Material apps

  • Material app 을 위해 Scaffold widget을 사용할 수 있다
Scaffold(발판, 골격, 비계) widget
  • default banner, background color, API for adding drawers, snack bars, bottom sheets 를 제공한다
  • body 속성에 직접 Center widget을 추가할 수 있다
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter layout demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter layout demo'),
        ),
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

Non-Material apps

  • Non-Material app의 경우 Center widget을 app의 build () 메소드에 추가 할 수 있다
    class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return Container(
        decoration: BoxDecoration(color: Colors.white),
        child: Center(
          child: Text(
            'Hello World',
            textDirection: TextDirection.ltr,
            style: TextStyle(
              fontSize: 32,
              color: Colors.black87,
            ),
          ),
        ),
      );
    }
    }
    

Lay out multiple widgets vertically and horizontally

댓글남기기