【Flutter】必要最低限の構造からFlutterの基礎を学ぶ

はじめに

今回の記事は必要最低限の構造から基礎を学んでみようという記事になります！

といっても私自身勉強を始めたばかりなので間違っている箇所も多々あると思いますが備忘録の意味合いもかねて残したいと思います。

コード

今回は扱うコードはこちら。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('上のバーのテキスト')
        ),
        body: Center(
          child: Text("真ん中のテキスト")
        ),
      )
    );
  }
}

20行程度のかなり短いコードになります。

これを分解していきましょう。

構造

まず前提としてFlutterのUIはすべてウィジェットで構成されています。

このウィジェット階層構造をウィジェットツリーというらしく、これをしっかりと把握することが重要といえるでしょう。

ということで先程のコードを図におこしてみました。

ひとつひとつみていきます。

MyApp

これは最上部のウィジェットでルートウィジェットというそうです。

runAppメソッドの引数にはルートウィジェットのインスタンスを渡します。

またDartはnewというキーワードをつけなくてもインスタンス化できることに注意してください。(あっても良い)

ウィジェットにはStatelessWidgetとStatefulWidgetの２種類があり以下のような区別があります。

• StatelessWidgetは状態を持たないウィジェット(インスタンス化したら変わることはない)
• StatefulWidgetは状態を持つウィジェット(インスタンス化後に変化することがある)

よく見てみるとMyAppはStatelessWidgetを継承しているので、状態を持たないウィジェットということが分かります。

さらにStatelessWidgetを継承しているクラスはbuildメソッドを実装しなければなりません。

MaterialApp

MaterialAppクラスはマテリアルデザインのためのウィジェットです。
MaterialApp class - material library - Dart API

ちなみにマテリアルデザインとはGoogleが提唱しているデザインの考え方のことで、見た目をカッコよくすることができます。

コンストラクターの引数はめちゃくちゃありますが、用いている引数は以下の二つになります。

• title: アプリを識別するためにデバイスが使用する一行の説明文
• home: デフォルトのルートウィジェット

titleの英語をほぼ直訳してみたのですが、いまいちよく分かっていません。画面的には変更はないので内部で使うものだと思います。

Scaffold

Scaffoldクラスはマテリアルデザイン用のウィジェットです。
Scaffold class - material library - Dart API

プロパティにはappBarやfloatingActionButton，drawer，bottomNavigatonBarのような実際に見た目ようなものがあります。

今回使ったコンストラクターの引数は以下の二つ

• appBar: Scaffoldの上部に表示されるバー
• body: Scaffoldの主要なコンテンツ

AppBar

AppBarクラスはマテリアルデザインのバーです。
AppBar class - material library - Dart API

これも色々とカスタマイズすることができるみたいですが、使ったコンストラクターの引数は一つだけ。

• title: appBarに表示される主要なウィジェット

Center

Centerクラスは子をそれ自体の中央に配置するウィジェットです。
Center class - widgets library - Dart API

これはここに載せられるくらいシンプルなコンストラクターです。

Center({Key key, double widthFactor, double heightFactor, Widget child})

今回使った引数は一番右にあるchildです。

• child: 階層構造でこのウィジェットの下にあるウィジェット

Text

最後にTextクラスはテキストを表示するウィジェットです。

もうこのコンストラクターはシンプルすぎて可愛くみえてくるレベルです。

Text(String data)

これは説明不要でしょう。

さいごに

まず最初にFlutterを触って思ったことはネストがあまりに深くなりがちなところです。

ずっとUnityを触ってきた身からするとめまいがしそうなレベルです。

UnityなんかはGUIによってこういった階層構造を表すことでネストが深いコードをうまく避けているのでしょう。

ただ見た目をコードで作るといったらおそらく避けては通れないのかもしれません。(そういえばHTMLとかもネストが深かったような)

とりあえずは慣れるしかなさそうです。

ではまた。