Flutterでのナビゲーションの概要
モバイルアプリの最も基本的な側面の1つは、ユーザーが異なるページ間を移動できるようにすることです。 幸いなことに、Flutterを使用すると、特に多くのフロントエンドソリューションと比較した場合に、ルートの作成や画面間の移動が非常に簡単になります。
プロジェクトファイルの設定
この例では、main.dart
ファイルの4つの画面があり、ナビゲーションバーを独自のファイルに分割します。
* screens 📂
* account_screen.dart
* balance_screen.dart
* transfer_screen.dart
* welcome_screen.dart
* main.dart
* navbar.dart
ルートの命名
ほとんどの場合、各ルートを独自のファイルに分割する必要がありますが、ここではそれらをmain.dart
に配置します。
MaterialApp
では、キーと値のペアのリストであるroutes
マップを設定できます。 このマップの各アイテムは、文字列値を、レンダリングするページを返すコールバック関数にリンクします。 これのポイントは、完全な(context) => WelcomeScreen()
ではなく、新しいページが必要なときはいつでも'welcome_screen'
のようなものを投げることによって開発をスピードアップすることです。
ホームページを設定するには、MaterialApp
のhome
プロパティまたはinitialRoute
プロパティのいずれかを使用できます。 それらは事実上同じことをしますが、home
はWelcomeScreen()
のようにクラス自体を取り、initialRoute
はroutes
マップからキーを取ります。 コンパイラが混乱するため、両方を使用することはできません。
import 'package:flutter/material.dart';
import './screens/welcome_screen.dart';
import './screens/account_screen.dart';
import './screens/balance_screen.dart';
import './screens/transfer_screen.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
Widget build(BuildContext context) {
return MaterialApp(
title: 'Navigation Demo',
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
Widget build(BuildContext context) {
return MaterialApp(
home: WelcomeScreen(),
routes: {
'welcome_screen': (context) => WelcomeScreen(),
'account_screen': (context) => AccountScreen(),
'balance_screen': (context) => BalanceScreen(),
'transfer_screen': (context) => TransferScreen()
});
}
}
これは問題なく機能しますが、これらの各ルートを頻繁に入力することになり、文字列を使用するだけでは、わずかなタイプミスをしたときにデバッグが困難になる可能性があります。 代わりに、各クラスの静的ID変数に各キーを格納し、そのIDにアクセスするだけで、コードの脆弱性が少し低くなります。 これにより、VSCodeのIntelliSenseのメリットも得られ、ページが利用できない理由を理解するのに役立ちます。
この例の各画面は、idとテキストウィジェットを除いて同じです。 また、後で作成するウィジェットに下部のナビゲーションバーを設定しています。
import 'package:flutter/material.dart';
import '../navbar.dart';
class WelcomeScreen extends StatelessWidget {
static const String id = 'welcome_screen';
Widget build(BuildContext context) {
return Scaffold(
body: Center(
bottomNavigationBar: Navbar(),
child: Text('Welcome'),
),
);
}
}
これで、文字列を各画面のIDに置き換えることができます。 クラス自体を実際に呼び出さずにアクセスしていることに注意してください。
class _MyHomePageState extends State<MyHomePage> {
Widget build(BuildContext context) {
return MaterialApp(initialRoute: WelcomeScreen.id, routes: {
WelcomeScreen.id: (context) => WelcomeScreen(),
AccountScreen.id: (context) => AccountScreen(),
BalanceScreen.id: (context) => BalanceScreen(),
TransferScreen.id: (context) => TransferScreen()
});
}
}
プッシュアンドポップ
フロントエンドのWeb開発とは異なり、モバイルルーティングは、画面を「積み重ねる」ことに基づいています。 ウェルカム画面からアカウント画面に移動するとき、実際にはページを変更するのではなく、アカウント画面をスタックに追加して、前のページをカバーします。 ウェルカム画面に戻るには、最上層を破棄するか、pop
オフにして、その下に既にレンダリングされているページを表示する必要があります。
これを行うためのNavigator
にはかなりの数の異なる方法があり、ここで完全に調べることができます。 必要な主な2つは、スタックに追加するpushNamed
と、最新のレイヤーを削除するpop
です。 pop
には、ビルドのcontext
メソッドとpush
メソッドに、context
とルートに設定したページのキーが必要です。
Named
が追加されたメソッドは、MaterialApp
でルートを設定した場合に使用されます。それ以外の場合は、キーの代わりにコールバック自体を渡すことができます。
import 'package:flutter/material.dart';
import './screens/account_screen.dart';
import './screens/balance_screen.dart';
import './screens/transfer_screen.dart';
class Navbar extends StatelessWidget {
Widget build(BuildContext context) {
return Container(
color: Colors.red,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
FlatButton(
onPressed: () => Navigator.pop(context),
child: Icon(Icons.arrow_left, color: Colors.white, size: 40)),
FlatButton(
onPressed: () => Navigator.pushNamed(context, BalanceScreen.id),
child: Icon(Icons.account_balance, color: Colors.white)),
FlatButton(
onPressed: () => Navigator.pushNamed(context, TransferScreen.id),
child: Icon(Icons.sync, color: Colors.white)),
FlatButton(
onPressed: () => Navigator.pushNamed(context, AccountScreen.id),
child: Icon(Icons.account_circle, color: Colors.white)),
],
),
);
}
}
結論
ルーティングとナビゲーションに関しても、Flutterは効率と使いやすさで非常に優れています。 この短いチュートリアルが、この新しいテクノロジーを理解するのに役立つことを願っています。