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

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

去年から気になっていた技術のFlutterをとうとう今年から触っていきます。
iOSエンジニア視点で記事を書いているのでiOSアプリ開発との差異に注目しながら記事を書いていきます。
iOSエンジニア向けにFlutterとはどんな技術でどこまでiOSアプリを再現できるかをまとめていきます。

【目次】

• iOSエンジニアがFlutter を触ってみた
• Flutter の基本構成
  • MaterialApp クラス

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です。
これは状態を持たないクラス、つまり静的なクラスとイメージすれば良い。

ビルドするとiPhoneXでこのように表示されます

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

プロジェクト構成

小規模レベルのアプリであれば基本、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 のソースコードを書きまくればなれるだろうと思っています。

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