소개

Flutter의 기본적인 것을 정리해 갑니다.

Flutter란?

Flutter는 Google에서 제공하는 UI 툴킷입니다.
iOS와 Android 플랫폼 모두 하나의 코드로 만들 수 있기 때문에
매우 생산성이 높습니다.

다른 특징은 다음을 포함합니다.

・Dart言語を使用している。
・アプリを一瞬でリロードできる。(ホットリロード)
・公式ライブラリのUIコンポーネントが豊富で、柔軟なデザインに対応できる。

환경 구축에 대해

공식 사이트를 알기 쉽습니다.

$ flutter doctor

위의 명령이 여러 가지 가르쳐 주기 때문에
말했듯이 하면 환경을 구축할 수 있습니다.

공식 사이트(Mac용)

위젯 정보

Flutter의 UI는 모두 위젯으로 구성됩니다.

・アプリに表示される部品(ラベル、スクロールバーやボタン)
・レイアウトに関するもの(パディング、マージン)

위와 같은 화면 디자인에 관련된 모든 것이 위젯입니다.
이 위젯을 결합하여 트리 모양으로 상속하여 화면을 구성합니다.
(이를 위젯 트리라고합니다.)

위젯의 종류는 크게 나누어 2개 있습니다.

Stateless Widget

상태가 없는 위젯.
일단 인스턴스를 만들면 변하지 않습니다.
build() 메서드를 구현해야 합니다.

Stateful Widget

상태를 가진 위젯.
build() 메서드가 필요하지 않습니다.
createState() 메소드를 구현하고
상태를 변경할 수 있습니다.

기본적으로, 어느 쪽인가를 상속해 위젯을 작성해 가게 됩니다.

Hello World

Hello world를 출력해 봅시다.
다음 코드로 Hello World를 출력할 수 있습니다.

main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to Flutter'),
        ),
        body: new Center(
          child: new Text('Hello World'),
        ),
      ),
    );
  }
}

결과

로직 설명

먼저 main()이 호출되고 runApp()에 위젯을 전달하여 화면을 구축합니다.

MyApp()은 StatelessWidget을 상속하고 전체를 빌드합니다.

MaterialApp은 머티리얼 디자인으로 구현하기 쉽고 편리한 위젯입니다.
머티리얼 디자인을 하려면 Scaffold와 함께 사용해야 합니다.

Scaffold는 머티리얼 디자인용 Widget으로
AppBar, title 및 홈 화면 위젯 트리를 보유하는 body 속성을 전달합니다.

조금 사용자 정의

일부를 변경하고 텍스트에서 버튼으로 변경해 봅니다.

main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to Flutter'),
        ),
        body: new Center(
          /// 以下を変更
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              RaisedButton(
              child: Text("Button"),
              color: Colors.orange,
              textColor: Colors.white,
              onPressed: () {},
              ),
            ],
          ),
        ),
      ),
    );
  }
}

결과

이런 식으로 위젯을 배치하면 쉽게 UI를 만들 수 있습니다.

DartPad 정보

Dart의 코드를 시도 할 수있는 DartPad라는 사이트가 있습니다.
Flutter의 코드도 쉽게 테스트할 수 있습니다.
(위의 코드도 실행할 수 있습니다)

DartPad

사이고에게

Flutter는 유용한 라이브러리와 위젯이 많기 때문에
그들을 잘 다룰 수 있도록 더 이해를 깊게 해 나가고 싶습니다.