Flutter コンポーネント切り出し方法

株式会社LandLandで主にswiftでアプリ開発している海紫です! よろしくお願いします

はじめにFlutterにはホットリロード機能があります。これにより、レイアウトを組んでいる時や機能を作成してる時に瞬時に動作確認を行えます。

コンポーネントを切り出し、利用する上でホットリロードが効くかどうかも重要になります。切り出し方によってはホットリロードが効きません。

※ホットリロード・・・UI の構築、機能の追加、バグの修正を行なった際に、Flutter フレームワークが自動的にウィジェットツリーを再構築することで、変更を素早く確認することが出来る機能 

1 プロパティとして切り出す

コンパクトにコンポーネントを切り出し使用しています。しかし、Flutterのホットリロードはグローバル変数とstaticは再初期化されることがないと書かれているため、プロパティとして切り出したコンポーネントを変更した際に変更点を確認するにはいちいちbuildしなければなりません。これではFlutterの良さが出ません。

Flutter アプリを初めて実行して静的フィールドを読み込んだときに、そのイニシャライザが評価された値に設定されることを意味します。グローバル変数とスタティックフィールドはステートとして扱われるため、ホットリロード中に再初期化されることはありません。

class Testy extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
            child: _greetingText,
        ),
      ),
    );
  }

  Widget _greetingText = Text(
      'Hello',
      style: TextStyle(fontSize: 12),
  );
}

2 クラスとして切り出す

これはwidgetを右クリック→Refactor→Extract→Extract Flutter Widget....で切り出すことが出来る。

コンポーネントをクラスに切り出し使用する。もし、Text()を変更してもホットリロードが効くため瞬時に確認することが出来る。しかし、コード量がとても多くコンポーネントが増えれば増えるだけ可読性が下がる。

class Testy extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          child: _GreetingText(),
        ),
      ),
    );
  }
}

class _GreetingText extends StatelessWidget {
  const _GreetingText({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text(
      'Hello',
      style: TextStyle(fontSize: 12),
    );
  }
}

3 メソッドとして切り出す

今回一番進めたい方法です。コードもすっきりしていて、ホットリロードも効く。

この方法でコンポーネントを切り出して開発を進めて行きたいと思います!

class Testy extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          child: _greetingText(),
        ),
      ),
    );
  }

  Widget _greetingText() {
    return Text(
      'Hello',
      style: TextStyle(fontSize: 12),
    );
  }
}

今回は3パターン紹介しましたが、もっとオープンソースを読んで綺麗なコードを目指せるようにしますー