Flutter入門時に確認したいまとめ集

はじめに

こんにちは，光岡です．最近スマホアプリケーションを作りたくなり，Flutterを触り始めました！ Flutterとは，一つのソースコードでiOS・Androidのアプリを開発することができる「クロスプラットフォーム」（マルチプラットフォーム）に位置づけられるGoogleが開発したフレームワークのことです．Dartという言語を利用して開発します．

以前までは，IOSアプリはSwift，AndroidアプリはKotlinなどのプログラミング言語が主流で，両方のアプリを作りたい場合は，それぞれで開発する必要がありましたが，Flutterはその課題を解消してくれます！

便利なFlutterですが，参考になる書籍や記事が他の言語に比べるとまだまだ少ないかな？という印象があり，日ごろバックエンド開発ばかりしている私にとって，何だかよく分からんとなっていました．

そこで本記事では，Flutter入門する際に，ざっくりでも把握しておくと後々スムーズに開発できるであろう機能などについてご紹介していきたいと思います！

対象読者

Flutterのドキュメント等をざっと見た方（本記事では網羅的に紹介しないため）
チュートリアルなどやってみたものの，何となくしかまだ理解できていない方

Dartの基礎文法

Dartは静的型付け言語です．dynamic型と呼ばれる特徴的な型を利用して動的型付け言語のようにも扱うことも可能です．

変数宣言

var 変数名 = 値;

or

<型> 変数名 = 値;

定数宣言

const <型> 定数名 = 値;

or 

final <型> 定数名 = 値;

or 

late <型> 定数名 = 値;

最初Flutterでの開発を始めた時，finalが見慣れておらず，何だろう？となりましたが，この書き方で定数を宣言することができます！ constとfinalの違いは，constはコンパイル時に評価され、finalは実行段階で評価される点です．

また，lateは下記2つの特徴があります．

nullを許容しない
遅延評価によるパフォーマンス改善

関数

void hello(String name) {
    print('Hello ${name}!');
}

引数に型の指定をします． voidを使う場合は，返り値なしです．

非同期処理

Future<String> hello() async {
    await Future.delayed(Duration(seconds: 3));
    return "Hello!";
}

非同期処理を実装する場合，Future, async, awaitを利用します． JavaScriptを触ったことがある方は，async, awaitは馴染みあるものかと思います．

Widgetとは，UIパーツのことを指します．私は下記コードのように，Classを作成する際，継承するWidgetクラスに何を使えばよいのか迷うことが多かったので，まとめてみました！

class MyHomePage extends XxxxWidget {
  .
  .
}

StatelessWidget

値の変更をしないときに利用します．

StatefulWidget

値の変更が可能ですあまり推奨されておらず，後述のものを使用した方が良いそうです！

ConsumerWidget

RIverpodを利用しているとき，StatelessWidgetではなく，ConsumerWidgetを使います！ほぼ同等のものであり、build メソッドに第2パラメータのrefが存在するかどうかの違いのみです！

class HomeView extends ConsumerWidget {
  const HomeView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    // `ref` を使ってプロバイダーを監視する
    final counter = ref.watch(counterProvider);
    return Text('$counter');
  }
}

Provider, RIverpodとは) プロバイダの利用方法

ConsumerStatefulWidget

Riverpodを利用している際，変数 & provider変数の変更が可能です StatefulWidgetとの違いは，ConsumerWidget同様，refが存在するかどうかの違いです！

class HomeView extends ConsumerStatefulWidget {
  const HomeView({Key? key}) : super(key: key);

  @override
  HomeViewState createState() => HomeViewState();
}

class HomeViewState extends ConsumerState<HomeView> {
  @override
  void initState() {
    super.initState();
    //  `ref` は StatefulWidget のすべてのライフサイクルメソッド内で使用可能です。
    ref.read(counterProvider);
  }

  @override
  Widget build(BuildContext context) {
    //  `ref` は build メソッド内で使用することもできます。
    final counter = ref.watch(counterProvider);
    return Text('$counter');
  }
}

HookWidget

Flutter Hooks（UIの状態管理をサポートするライブラリ）を利用しているときに使用します

RiverpodとFlutterHooksの使い分けは下記を目安にすると良いと思います！ - グローバルにステート情報を管理したい → Riverpod - 1つのwidgetでステート情報が完結する → Flutter Hooks

HookConsumerWidget

HookWidgetと，ConsumerWidgetの役割の両方を持ちます．

おわりに

他の言語を触っているから何となくコード読めば理解できるけど，いざ開発してみるとスムーズに進まない...と感じている方がいたら，ぜひ一読していただけたら嬉しいです！

ネットワークデザインスタジオのブログ

目次