モバイルアプリの最も基本的な側面の1つは、ユーザーが異なるページ間を移動できるようにすることです。 幸いなことに、Flutterを使用すると、特に多くのフロントエンドソリューションと比較した場合に、ルートの作成や画面間の移動が非常に簡単になります。
プロジェクトファイルの設定
この例では、4つの画面があります。 main.dart
ファイルを作成し、ナビゲーションバーを独自のファイルに分割します。
* screens 📂
* account_screen.dart
* balance_screen.dart
* transfer_screen.dart
* welcome_screen.dart
* main.dart
* navbar.dart
ルートの命名
ほとんどの場合、各ルートを独自のファイルに分割する必要がありますが、それらを main.dart
今のところ。
私たちの中で MaterialApp
設定できます routes
マップ。キーと値のペアのリストです。 このマップの各アイテムは、文字列値を、レンダリングするページを返すコールバック関数にリンクします。 これのポイントは、私たちに次のようなものを投げさせることによって開発をスピードアップすることです 'welcome_screen'
完全ではなく、新しいページが必要なときはいつでも (context) => WelcomeScreen()
.
ホームページを設定するには、次のいずれかを使用できます。 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は効率と使いやすさで非常に優れています。 この短いチュートリアルが、この新しいテクノロジーを理解するのに役立つことを願っています。