Re:birth エンジニアリング

Flultterとテックブログと時々iOS

iOSエンジニアがFlutter を触ってみた

超久しぶりにブログを更新します。

Flutter の基本構成

Flutter アプリの最小限実装

main.dart にこのソースコードを書きます。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Navigation title",
      home: Text("Hello, Flutter World!"),
    );
  }
}

これが最小限のソースコードです。

MyAppクラスはStatelessWidget を継承います。 StatelessWidgetはState(状態)に関するWidgetです。 これは状態を持たないクラス、つまり静的なクラスとイメージすれば良い。

f:id:qed805:20200114224828p:plain
ビルドするとiPhoneXでこのように表示されます

Flutter の基本構成は下の添付画像のようになっています。

f:id:qed805:20200114225117p:plain
プロジェクト構成

小規模レベルのアプリであれば基本、libに存在するmain.dartソースコードを書いていけばいいです。

MaterialApp クラス

new でインスタンスを生成しているMaterialApp は

new MaterialApp(title: "", home: "");

というふうに titile と home の引数を持っています。 homeプロパティに着目します。

home 引数には Text クラスを入れています。

home: Text("Hello, Flutter World!")

というふうに Text クラスが入っています。 このText クラスは簡単に言えば文字情報を扱うクラスと考えればいいらしい。Swift でいうところのUILabel クラスに相当するもの。

一番最初のソースコードを少しいじります。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Navigation title",
      home: Text(
        "Hello, Flutter World!",
        style: TextStyle(fontSize: 32.0),  /// 追加したコード
      ),
    );
  }
}

Textクラスに新たにstyle引数を追加しました。 テキストのFont を操作できる引数になります。

      home: Text(
        "Hello, Flutter World!",
        style: TextStyle(fontSize: 32.0),  /// 追加したコード
      ),

私が最初 Flutter のソースコードに慣れなかった一番の原因はインデントの位置でした。

上のコードは

      home: Text("Hello, Flutter World!", style: TextStyle(fontSize: 32.0),  /// 追加したコード),

と同じです。

ここからdart の記法は

      Text(
        引数1: xxx,
        引数2: yyy
      )

というように() と引数で改行させるのが一般的なのでは、と推測しています。 私的にはこの書き方は可読性が悪い気がしているのですがDartソースコードを書きまくればなれるだろうと思っています。

今日はここまでにします。