• https://zenn.dev/riscait/articles/melos-for-multiple-packages-dart-projects
• https://zenn.dev/riscait/articles/flutter-version-management

こちら参考にfvmの設定ファイル追加、 .fvm/flutter_sdk をignoreしました。 stable にするとどうもうまくいかなかった(過去に入れたstableが使われてしまった）ため明示的にバージョン入れています。

テストを書けなかったのが心残りですが、気になる部分やもし間違っている部分あればご指摘頂ければ！

GoRouterを使ったBottomNavigationBar永続化のサンプル

※ こちらはNavigator1.0とNavigator2.0を併用させたアプローチになります

アプローチ

1. GoRouterクラスのnavigationBuilderを活用
2. NavigatorクラスでラップしたBottomNavigationBarをメインのページスタックの上に表示
3. タブでの画面遷移に見える様、ページ遷移時のアニメーションを調整

navigationBuilderパラメータではメインのページスタックの上にWidgetを重ねる事が出来ます。 https://gorouter.dev/navigator-builder

こちらを活用し、BottomNavigationBarを全てのページスタックの上に重ねて表示しています。

BottomNavigationBarはMaterialPage配下に配置されている必要がある為、Navigatorクラスでラップする必要があります。

肝となるのはGoRouterの以下部分です。

  GoRouter(
    ...,
    navigatorBuilder: (context, state, child) {
      return Navigator(
        onPopPage: (route, dynamic __) => false,
        pages: [
          MaterialPage<Widget>(
            child: BottomNav(
              child: child,
            ),
          ),
        ],
      );
    },
  )

またタブでの画面遷移に見える様、トップレベルのページのみ遷移時のアニメーションを調整しています。 https://gorouter.dev/transitions

  GoRoute(
    name: 'simple',
    path: '/simple',
    pageBuilder: (context, state) => CustomTransitionPage(
        key: state.pageKey,
        child: const SimpleNavigationScreen(),
        transitionDuration: Duration.zero, // <= Duration.zeroで遷移する様、調整
        transitionsBuilder:
            (context, animation, secondaryAnimation, child) => child),

ページ別動作のサンプル

BottomNavigationBarの各タブではそれぞれ異なる画面遷移のサンプルを用意しました。

Simple Navigation Screen

サブルートへの画面遷移 https://gorouter.dev/sub-routes

  GoRoute(
    name: 'simple',
    ...,
    routes: [ // routes内に定義する事でsub-routeを繋げる
      GoRoute( 
        name: 'login',
        path: 'login',
        pageBuilder: (context, state) => MaterialPage(
          key: state.pageKey,
          child: const LoginScreen(),
        ),
      ),
      ...,
    ],
  ),

引数を渡した画面遷移 https://gorouter.dev/parameters

  GoRoute(
    name: 'simple',
    ...,
    routes: [
      ...,
      GoRoute(
        name: 'number',
        path: 'number/:id', // 引数を含むパスを定義
        builder: (context, state) {
          final id = state.params['id']!; // stateから引数を取り出す
          return NumberScreen(number: id);
        },
      ),
    ],
  ),

引数を含むパスで遷移

onTap: () => context.go('/simple/number/$id');

Overlay Navigation Screen

DialogやModalBottomSheetの挙動のサンプルです。

DialogやModalBottomSheetはGoRouterで定義されたページスタックではなく、navigatorBuilder内に定義されたNavigatorクラス上に被さります

その為、これらをクローズする場合はGoRouter.of(context).pop()ではなく、Navigator.of(context).pop()を使います

  await showDialog<void>(
    context: context,
    builder: (context) {
      return AlertDialog(
        title: const Text('This is the Dialog'),
        content: const Text('This is the content'),
        actions: [
          TextButton(
            child: const Text('Cancel'),
            onPressed: () => Navigator.of(context).pop(), // Navigatorのpopを使用
          ),
          TextButton(
            child: const Text('OK'),
            onPressed: () => Navigator.of(context).pop(),
          ),
        ],
      );
    },
  );

またshowModalBottomSheetではuseRootNavigatorパラメータを使う事で、Navigatorクラスの上に被せるか、GoRouterクラスの上に被せるかを操作出来ます

  await showModalBottomSheet<bool>(
    context: context,
    // trueでNavigatorの上、デフォルトのfalseでGoRouterの上に表示
    useRootNavigator: true, 
    builder: (context) {
      ...
    },
  );

TabBar Navigation Screen

BottomNavigationBarとTabBarを併用した挙動のサンプルです。

TabBarView内からネストした画面へも問題なく遷移出来ます

問題点

・ブラウザバックに非対応

本アプローチではBottomNavigationBarの選択中インデックスをアイコンをタップする事で変更しています。

その為、Webのブラウザバックに対し、選択中インデックスの更新がされません。

Navigator2.0だけでの対応

本アプローチはNavigator1.0とNavigator2.0を併用したアプローチになります。

Navigator1.0と2.0の併用については公式ドキュメントでも「併用可」とする記述がある為、問題はないと思いますが、可能であれば一本化したい所。 https://stackoverflow.com/a/68579883/18124943

ですが現状、Nabigator2.0のみでTabBarやBottomNavigationBarの永続化は行えません。

ただ以下の通り、対応について度々議論されている為、将来的に対応される可能性は十分ありそうです。

https://github.com/csells/go_router/issues/133 https://github.com/csells/go_router/discussions/222

内容

package/routing_with_riverpod/example にサンプルアプリを作成しました。

Riverpod を用いたルーティングに関するサンプルです。

ProviderScope.overrides と Provider.dependencies を工夫して使用することで、ページ遷移の際に次のページに渡したいパラメータを、その新しいページクラスのコンストラクタに含めることなく、パスパラメータやクエリパラメータを appRouterStateProvider から取得できるようにしています。ウィジェットテストは書いていませんが、これによって各画面の結合が疎になるので、テストしやすかったり、保守しやすかったりするメリットを享受できます。

go_router パッケージを少し真似して作っていて、AppRouterState は GoRouterState クラス、AppRoute クラスは GoRoute クラスに似ています。パスパラメータの解析は go_router と同じ path_to_regexp パッケージを用いています。

具体的には、GitHub のリポジトリ API を題材として、

パターン 1：Repository 一覧画面で取得済みの Repo インスタンスを使用して、Repository 一覧画面では API をコールして再取得することなく画面遷移するパターン

// Repo インスタンスが取得済みである場合
final repo = Repo(...);

// arguments に Repo インスタンスを指定する。
Navigator.pushNamed<void>('/repo/KosukeSaigusa/flutterfire-commons', arguments: repo);

パターン 2：取得済みの Repo インスタンスはなく、パスパラメータから Get a repository API をコールして Repo インスタンスを取得して画面遷移するパターン

// Repo インスタンスが取得できていない場合
// arguments に Repo インスタンスがないので、パスパラメータを指定しておけば
// パスパラメータを解析して、必要な Get a repository API がコールされる。
Navigator.pushNamed<void>('/repo/KosukeSaigusa/flutterfire-commons');

のような両パターンでよしなに画面遷移を行えます。

動作

1. Repository 一覧の取得済み Repo インスタンスを使用して遷移
2. /repo/KosukeSaigusa/flutterfire-commons のロケーションだけを指定して遷移
3. /repo/susatthi/github-search のロケーションだけを指定して遷移
4. /repo/susatthi/random のような存在しないロケーションを指定して遷移

https://user-images.githubusercontent.com/13669049/174464038-d09eb9d6-d2e5-4770-bdc5-dd16345dd510.mp4

その他

HTTP クライアントには Dio を使用しており、個人的によく使うインターセプタを lib/utils/dio/ に記述しているので、参考になれば見てみてください（上記の画面収録でもデバッグコンソールにリクエストの curl 出力や、レスポンスのステータスコードとステータスメッセージが表示されているものもそれです）。

概要

Riverpodのlistenメソッドを使ったサンプルを実装する。 listenを使ってダイアログ表示、SnackBar表示などをしてみる。

詳細

参考 https://github.com/susatthi/flutter-sandbox/blob/main/lib/main_riverpod_launch_snackbar.dart

やったこと

• Flutterで少しでもデザイン調整のコードを簡潔にするために で紹介されているMeasureクラスをstylesパッケージのsrcに作成
• Measureクラスのユニットテストを追加
• Measureクラスを使ったiPhoneの計算機を模したUIサンプルをstylesパッケージのexampleに作成

close #40

Androidでよく使われている（？）sealedをFlutterで実装してみました！ freezedのwhenの内部を書いたような感じです。

https://qiita.com/b4tchkn/items/f12a4894ca1b3ac66d9c

参考にした記事 https://medium.com/@reginfell/flutter-sealed-classes-257d46b3c0e

AppLifecycleState が変更した時に State に応じてメソッドを呼び出すことができる widget を作成しました！

動作

テスト

参考にした widget と test

• flutter/widget_binding_observer.0.dart at master · flutter/flutter
• flutter/widget_binding_observer.0_test.dart at master · flutter/flutter

テスト結果

概要

iPodのWheel UIを再現するようなSample

• https://d1v1b.com/swiftui/ipod_classic_ui
• https://play.google.com/store/apps/details?id=com.jamesob.ipod

Turned my iPhone into an iPod Classic with Click Wheel and Cover Flow with #SwiftUI pic.twitter.com/zVk5YJj0rh

— Elvin (@elvin_not_11) November 27, 2019

詳細

音楽系だとシーク、Volume調整、リストの送り(prev,next)などを行う ギャラリー系などにも機能としては使えると思う タッチによるフィードバックをバイブレーションなどでつけたい リリースで使うのにはそっくりのものを作ってもiOS側でリリースできないので何かしらのデザイン変更が必要