플러터에서 위젯은 리액트로부터 영감을 받아 만들었습니다. 위젯으로 UI를 만듭니다. 위젯은 현재 설정 및 상태에 따라 어떻게 view가 보일지를 나타냅니다. 위젯의 상태가 변할 때 플러터는 rebuild 합니다.

Hello World

가장 간단한 플러터 앱은 위젯으로 runApp() 함수를 호출하는 것입니다.

import 'package:flutter/material.dart';

void main() {
  runApp(
    Center(
      child: Text(
        'Hello, world!',
        textDirection: TextDirection.ltr,
      ),
    ),
  );
}

runApp() 함수는 주어진 위젯을 사용해서 위젯트리를 만듭니다. 이 예제에서 위젯트리는 Center 위젯 그리고 이것의 child인 Text위젯으로 구성되어 있습니다. 프레임워크는 루트 위젯이 화면 전체를 차지하도록 강제합니다. 이로써 "Hello, world" 텍스트는 화면 중앙에 위치하게 됩니다. 이 인스턴스에는 텍스트의 방향이 명시되어야 합니다; MaterialApp 위젯을 사용하는 경우, 이 부분은 자동으로 처리됩니다.

앱을 만들 때 당신의 위젯이 상태를 관리하는가에 따라 StatelessWidget 또는 StatefullWidget을 상속한 새로운 위젯들을 흔하게 사용하게 됩니다. 위젯을 주된 역할은 build 함수를 구현하는 것입니다.

Basic widgets

플러터는 많은 강력한 기본 위젯들이 기본으로 내장되어 있습니다. 가장 자주 사용되는 위젯들은 아래와 같습니다.

Text: 텍스트 위젯으로 스타일링 된 텍스트를 만들 수 있습니다.

Row, Column: 이 flex 위젯들을 사용하면 가로 (행) 및 세로 (열) 방향 모두에서 유연한 레이아웃을 만들 수 있습니다. 디자인은 웹의 flexbox 레이아웃 모델을 기반으로 합니다.

Stack: 스택 위젯을 사용하면 직선형 (수평 또는 수직)으로 배치하는 대신 위젯을 페인트 순서대로 서로 쌓을 수 있습니다. 그런 다음 Stack의 하위에 있는 Positioned 위젯을 사용하여 스택의 위쪽, 오른쪽, 아래쪽 또는 왼쪽 가장자리를 기준으로 배치 할 수 있습니다. 스택은 웹의 절대 위치 지정 레이아웃 모델을 기반으로합니다.

Container: 컨테이너 위젯을 사용하면 사각형의 시각적 요소를 만들 수 있습니다. 컨테이너는 BoxDecoration으로 배경, 테두리 또는 그림자와 같은 부분을 꾸밀 수 있습니다. 컨테이너는 여백, 패딩 및 제약 조건을 크기에 적용 할 수도 있습니다. 또한 컨테이너는 행렬을 사용하여 3 차원 공간으로 변형 될 수 있습니다.

다음은 위젯과 다른 위젯을 결합한 간단한 위젯입니다.

import 'package:flutter/material.dart';

class MyAppBar extends StatelessWidget {
  MyAppBar({this.title});

  // Fields in a Widget subclass are always marked "final".

  final Widget title;

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 56.0, // in logical pixels
      padding: const EdgeInsets.symmetric(horizontal: 8.0),
      decoration: BoxDecoration(color: Colors.blue[500]),
      // Row is a horizontal, linear layout.
      child: Row(
        // <Widget> is the type of items in the list.
        children: <Widget>[
          IconButton(
            icon: Icon(Icons.menu),
            tooltip: 'Navigation menu',
            onPressed: null, // null disables the button
          ),
          // Expanded expands its child to fill the available space.
          Expanded(
            child: title,
          ),
          IconButton(
            icon: Icon(Icons.search),
            tooltip: 'Search',
            onPressed: null,
          ),
        ],
      ),
    );
  }
}

class MyScaffold extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Material is a conceptual piece of paper on which the UI appears.
    return Material(
      // Column is a vertical, linear layout.
      child: Column(
        children: <Widget>[
          MyAppBar(
            title: Text(
              'Example title',
              style: Theme.of(context).primaryTextTheme.title,
            ),
          ),
          Expanded(
            child: Center(
              child: Text('Hello, world!'),
            ),
          ),
        ],
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    title: 'My app', // used by the OS task switcher
    home: MyScaffold(),
  ));
}

pubspec.yaml 파일의 flutter 섹션에 uses-material-design : true 항목이 있는지 확인하십시오. 사전 정의 된 머티리얼 아이콘 세트를 사용할 수 있습니다.

name: my_app
flutter:
  uses-material-design: true

많은 위젯이 테마 데이터를 상속 받기 위해 MaterialApp 내부에 있어야 제대로 표시됩니다. 따라서 MaterialApp로 어플리케이션을 실행합니다.

MyAppBar 위젯은 디바이스에 종속되지 않는 56픽셀 크기의 높이를 갖는 컨테이너를 만듭니다. 내부 패딩은 좌우로 8픽셀 입니다. 컨테이너 안에서 MyAppBar는 Row 레이아웃을 사용해서 children을 구성합니다. 중간에 위치한 child, 즉 title 위젯은 Expanded으로 표시되어 있습니다. 이것은 다른 children이 차지하지 않은 여분은 공간 전체를 채우겠다는 뜻입니다. 다수의 Expanded children을 갖을 수 있고 flex argument를 사용해 차지하는 공간의 비율을 정할 수 있습니다.

MyScaffold 위젯은 하위 항목을 세로 열로 구성합니다. 열의 맨 위에 MyAppBar의 인스턴스를 배치하고 응용 프로그램 막대에 제목으로 사용할 텍스트 위젯을 전달합니다. 위젯을 다른 위젯에 인수로 전달하는 것은 다양한 방법으로 재사용 할 수있는 일반 위젯을 만들 수있는 강력한 기술입니다. 마지막으로 MyScaffold는 Expanded를 사용하여 나머지 공간을 본문으로 채 웁니다.이 공간은 가운데에있는 메시지로 구성됩니다.

Using Material Components

Flutter는 Material Design을 따르는 앱을 개발하는 데 유용한 여러 위젯을 제공합니다. 머티리얼 앱은 머티리얼 앱 위젯으로 시작합니다. 네비게이터는 문자열로 식별 된 위젯 스택을 관리하는 네비게이터 ( "경로"라고도 함)를 포함하여 앱의 루트에 유용한 위젯을 만듭니다. 네비게이터를 사용하면 애플리케이션 화면간에 부드럽게 전환 할 수 있습니다. MaterialApp 위젯을 사용하는 것은 전적으로 선택 사항이지만 좋은 습관입니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: 'Flutter Tutorial',
    home: TutorialHome(),
  ));
}

class TutorialHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Scaffold is a layout for the major Material Components.
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          icon: Icon(Icons.menu),
          tooltip: 'Navigation menu',
          onPressed: null,
        ),
        title: Text('Example title'),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.search),
            tooltip: 'Search',
            onPressed: null,
          ),
        ],
      ),
      // body is the majority of the screen.
      body: Center(
        child: Text('Hello, world!'),
      ),
      floatingActionButton: FloatingActionButton(
        tooltip: 'Add', // used by assistive technologies
        child: Icon(Icons.add),
        onPressed: null,
      ),
    );
  }
}

이제 MyAppBar와 MyScaffold를 material.dart의 AppBar 및 Scaffold 위젯으로 전환 했으므로 이 앱은 조금 더 많은 Material스럽게 보이기 시작했습니다. 예를 들어 앱 표시 줄에는 그림자가 있고 제목 텍스트는 올바른 스타일을 자동으로 상속합니다. 또한 효과적인 조치를 위해 플로팅 액션 버튼을 추가했습니다.

위젯을 다른 위젯에 인수로 다시 전달한다는 점에 주목하십시오. Scaffold 위젯은 이름이 지정된 인수로 여러 가지 위젯을 취합니다. 각 위젯은 적절한 위치의 Scaffold 레이아웃에 배치됩니다. 이 패턴은 프레임 워크 전체에서 반복되며 자체 위젯을 디자인 할 때 고려해야 할 사항입니다