🐈
auto_route実装手引書
こんにちは
現役で美容師をやりつつフルタイムでflutterエンジニアをしている中岡です。
自己発信&備忘録として残していきます！
解決したい問題
auto_routeを実装したい！！
今回は実装の手順を自分もまた見返せるように残します。
このまま、何も考えずに追加していけば基本設定できると思います。
方法
1.まずはこちらのパッケージを追加します。
2.app_routerディレクトリを作成し、app_router.dartを作成します。
app_router.dart
import 'package:auto_route/auto_route.dart';
// ファイル名と同じにします。
part 'app_router.gr.dart';
// replaceInRouteName で画面とルートの変換規則を決めることができる。
(replaceInRouteName: 'Screen,Route')
class AppRouter extends _$AppRouter {
List<AutoRoute> get routes => [
/// routes go here
]
}
3.一度build_runnerを走らせます。
$ flutter pub run build_runner build
続けて行う場合は下記のコマンドを使用します。（基本はこちらを使うことが多いと思います。）
$ flutter packages pub run build_runner watch
4. @RoutePage() を各画面のトップに追加していきます。
()
class BookDetailsPage extends StatelessWidget {
const BookDetailsPage({required this.book});
final Book book;
...
追加していくと、〜.gr.dartにルートが追加されていきます。
※ 追加後インポートの必要あり
5. AutoRoute（）を追加していく
(replaceInRouteName: 'Screen,Route')
class AppRouter extends _$AppRouter {
List<AutoRoute> get routes => [
// こちらに画面の設定を追加していきます。
AutoRoute(
path: '/',
page: MainRoute.page,
),
]
6. AppRouter（）をriverpodで管理する
final appRouterProvider = Provider<AppRouter>(((ref) => AppRouter()));
or
Raw<AppRouter> appRouter(AppRouterRef ref) {
return AppRouter（）;
}
7. main.dartで設定をする。
// ConsumerWidget に変更
class MyApp extends ConsumerWidget {
const MyApp({Key? key}) : super(key: key);
Widget build(BuildContext context, WidgetRef ref) {
// routerを呼びだす
final router = ref.watch(appRouterProvider);
// MaterialApp.router に変更
return MaterialApp.router(
debugShowCheckedModeBanner: false,
title: 'item app ',
theme: ThemeData(
primarySwatch: Colors.blue,
scaffoldBackgroundColor: HexColor('#e8e8e8'),
cardColor: Colors.white,
cardTheme: CardTheme(color: Colors.white),
),
// home:~ → routerConfig: router.config()に変更
routerConfig: router.config(),
);
}
}
これで基本的な設定は完了になります！！
問題なく設定できるかと思います。
memo
flutter web の場合、
usePathUrlStrategy();
を付けないとpathの部分でハマるので注意しましょう。
最後に
今回は見ていけば簡単に実装できることをメインに記事を作成しました。
また、auto_routeの記事は書いていこうと思います。
僕の作っている
オリジナルのカスタマイズシャンプーセットが作れるアプリ
よかったら是非触ってみてください！！
リンクはこちらです。
Discussion