【Flutter】Beamerでネストした画面を作る

Beamerとは
使い方

Beamerとは

Beamerは、Flutterアプリケーションで複雑なナビゲーションを簡単に実装するためのパッケージです。
Routerの力を利用し、ネストされたナビゲーションやボトムナビゲーションなど、複雑なナビゲーションシナリオを簡単に扱うことができます。

beamer | Flutter package

A routing package built on top of Router and Navigator's pages API, supporting arbitrary nested navigation, guards and m...

使い方

1. パッケージのインストール

dependencies:
  beamer: ^1.6.1

2. 基本設定

Beamerを使うためには、MaterialApp.routerを使用し、BeamerDelegateとBeamerParserを設定します。

class MyApp extends StatelessWidget {
  final routerDelegate = BeamerDelegate(
    locationBuilder: RoutesLocationBuilder(
      routes: {
        '/': (context, state, data) => HomeScreen(),
        '/books': (context, state, data) => BooksScreen(),
        '/books/:bookId': (context, state, data) {
          final bookId = state.pathParameters['bookId']!;
          return BeamPage(
            key: ValueKey('book-$bookId'),
            title: 'A Book #$bookId',
            child: BookDetailsScreen(bookId),
          );
        },
      },
    ),
  );

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routeInformationParser: BeamerParser(),
      routerDelegate: routerDelegate,
    );
  }
}

3. ルートの定義

Beamerでは、RoutesLocationBuilderを使用してルートを定義します。各ルートには、対応するウィジェットを指定します。

final routerDelegate = BeamerDelegate(
  locationBuilder: RoutesLocationBuilder(
    routes: {
      '/': (context, state, data) => HomeScreen(),
      '/books': (context, state, data) => BooksScreen(),
      '/books/:bookId': (context, state, data) => BookDetailsScreen(
        bookId: state.pathParameters['bookId'],
      ),
    },
  ),
);

4. ナビゲーション

ナビゲーションは「ビーム」によって行います。以下のように、context.beamToNamedメソッドを使用します。

// 基本的なナビゲーション
Beamer.of(context).beamToNamed('/books/2');

// 追加データを持つナビゲーション
context.beamToNamed('/books/2', data: MyObject());

5. 逆ナビゲーション

Beamerでは、二種類の逆ナビゲーションがあります。「ポップ」と「ビームバック」です。

ポップ（スタックからページを削除）

Navigator.of(context).maybePop();

ビームバック（前の状態に戻る）

Beamer.of(context).beamBack();

6. Androidのバックボタン

Androidのバックボタンをカスタマイズするには、BeamerBackButtonDispatcherを設定します。

MaterialApp.router(
  routerDelegate: beamerDelegate,
  backButtonDispatcher: BeamerBackButtonDispatcher(delegate: beamerDelegate),
)

7. カスタムステート

Beamerでは、カスタムステートを使用することもできます。BeamLocationを拡張し、pathPatternsとbuildPagesメソッドを実装します。

class BooksLocation extends BeamLocation<BeamState> {
  @override
  List<Pattern> get pathPatterns => ['/books/:bookId'];

  @override
  List<BeamPage> buildPages(BuildContext context, BeamState state) {
    final pages = [
      const BeamPage(
        key: ValueKey('home'),
        child: HomeScreen(),
      ),
      if (state.uri.pathSegments.contains('books'))
        const BeamPage(
          key: ValueKey('books'),
          child: BooksScreen(),
        ),
    ];
    final String? bookIdParameter = state.pathParameters['bookId'];
    if (bookIdParameter != null) {
      pages.add(
        BeamPage(
          key: ValueKey('book-$bookIdParameter'),
          title: 'Book #$bookIdParameter',
          child: BookDetailsScreen(bookId: int.tryParse(bookIdParameter)),
        ),
      );
    }
    return pages;
  }
}