Flutter 開発覚え書き

Kenta Watashima

状態管理は Riverpod というライブラリを使うのがよさそう

0.14 以降で API に変更が生じているので、古い記事に注意する

Kenta Watashima

ディレクトリ構造の参考

Kenta Watashima

AppBar の back ボタンを無効にする

Kenta Watashima

Column を画面中央に配置する

Kenta Watashima

TextFormField 使用時、FutureBuilder が snapshot の変更を検知しない → UniqueKey を指定する

Kenta Watashima

ElevatedButton の theme を設定する

return MaterialApp(
  theme: ThemeData.dark().copyWith(
    elevatedButtonTheme: ElevatedButtonThemeData(
      style: ElevatedButton.styleFrom(
        onPrimary: Colors.white,
        primary: Colors.grey[900],
      ),
    ),
  ),
);

Kenta Watashima

WillPopScene で back ボタンの処理を上書きして、back ボタン押下時にアラートを出す
OK タップで前の画面に遷移する。Cancel タップ時は何もしない

@override
Widget build(BuildContext context) {
  final scaffold = Scaffold(
    ...
  );

  return WillPopScope(
    onWillPop: () async {
      final result = await showDialog<int>(
        context: context,
        barrierDismissible: false,
        builder: (BuildContext context) {
          return AlertDialog(
            content: const Text('Are you sure you want to go back?'),
            actions: <Widget>[
              FlatButton(
                onPressed: () => Navigator.of(context).pop(0),
                child: const Text('Cancel'),
              ),
              FlatButton(
                onPressed: () => Navigator.of(context).pop(1),
                child: const Text('OK'),
              ),
            ],
          );
        },
      );
      return result == 1;
    },
    child: scaffold,
  );
}