前回の記事の続きです。
今回は、画面遷移等の制御周りの知識を深めていきましょう。
※ 用例で比較説明したほうがわかりよいため、SwiftUIの用例で比較したいため、SwiftUIで開発したことがあることが前提の記事です
環境
・MacOS Ventura 13.6.3
・Xcode 15.1
・VSCode 1.85.1
・Flutter 3.16.5
・Dart 3.2.3
Flutterを使ってみよう その５（画面遷移等の制御）
1. ページ間移動での画面遷移
Flutterで画面遷移をする際、Navigation利用するのが一般的な画面遷移があり、デフォルトだと右へ右へのページ間移動しているような画面遷移になります。
画面に一覧があって、それを選択したら詳細表示するサンプルを作り、そのコード例に従い、説明していきます。
以降、コード例です。
MyApp では、Navigation のルートとなる画面として、HomePage を設定しています。
routes に 「/details」というキーワードを設定しておりに、画面制御でキーワード検知したら、 DetailsPage へ画面遷移することを表しています。
画面に一覧があって、それを選択したら詳細表示するサンプルを作り、そのコード例に従い、説明していきます。
全体の表示例(Flutter)
以降、コード例です。
// Flutterのコード
// インポートとか省略
// MyAppは、mainで生成されています。
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return CupertinoApp(
// debugShowCheckedModeBanner: false, // false:デバッグバナーをつけない
home: const HomePage(),
routes: {
'/details' : (context) => const DetailsPage(),
},
);
}
}MyApp では、Navigation のルートとなる画面として、HomePage を設定しています。
routes に 「/details」というキーワードを設定しておりに、画面制御でキーワード検知したら、 DetailsPage へ画面遷移することを表しています。
// Flutterのコード
// インポートとか省略
// Personクラス、 mockPersonsデータは、前回と同じ内容です。
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return CupertinoPageScaffold(
navigationBar: const CupertinoNavigationBar(
middle: Text(
'Pick a person', // タイトル
),
),
child: Material(
child: ListView.builder(
itemCount: mockPersons.length,
itemBuilder: (context, index) {
&nbs2. モーダルでの画面遷移
Flutterでは、Navigationを利用して、モーダルでの画面遷移があります。
画面の下から上に画面が被さる感じの遷移です。
前段と同じく、画面に一覧があって、それを選択したら詳細表示するサンプルを作ります。
その画面遷移をモーダルに変更します。
コード例に従い、説明していきます。
以降、コード例です。
画面の下から上に画面が被さる感じの遷移です。
前段と同じく、画面に一覧があって、それを選択したら詳細表示するサンプルを作ります。
その画面遷移をモーダルに変更します。
コード例に従い、説明していきます。
全体の表示例(Flutter)
以降、コード例です。
// Flutterのコード
// インポートとか省略
// MyAppは、前回と同じ。
// また、変更箇所辺りの抜粋
class HomePage extends StatelessWidget {
...
@override
Widget build(BuildContext context) {
return CupertinoPageScaffold(
...
child: Material(
child: ListView.builder(
...
return ListTile(
...
onTap: () {
// ここ修正
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => DetailsDialogPage(
person: person,
),
&nbs3. 画面での状態監視
Flutterは、 StatefulWidget ウィジェット、 State クラス を使うことで、値の状態監視ができるようになり、画面と値がリアクティブ連動し、画面更新されます。
SwiftUIも同様に画面と値がリアクティブ連動し、画面更新されます。
説明のため、カウントアップする簡単なサンプルを用意します。
FlutterとSwiftUIのコード例を下記に記載します。
SwiftUIも同様に画面と値がリアクティブ連動し、画面更新されます。
説明のため、カウントアップする簡単なサンプルを用意します。
FlutterとSwiftUIのコード例を下記に記載します。
Flutterのコード例
// Flutterのコード
// インポートとか省略
class HomePage extends StatefulWidget {
const HomePage({super.key});
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
int _counter = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('$_counter'),
CupertinoButton(
onPressed: () {
setState(() {
_counter++;
});
},
child: const Text('+'),
),
],
),
),
);
}
}SwiftUIのコード例
4. まとめ
今回は、画面遷移等の制御周りを中心に、SwiftUIのコード例と見比べて理解を深めるのを目的に記事を書きました。
次回も、同様にFlutter開発観点の詳細に触れてみたいと思います。