いちの
こんばんは〜
弊社ブログに辿り着いていただきありがとうございます!
株式会社メモリアインクのいちのです
この記事を読んでわかること
- Flutterでのスワイプ操作による画面遷移の基本
- 元の画面に戻る方法
- PageViewウィジェットの基本的な使用方法
開発環境
- Dart 3.0.0
- Flutter 3.10.0
目次
スワイプして画面遷移したり、元の画面戻る実装
概要
Flutterを使用してスワイプによる画面遷移と元の画面に戻る実装をするには、PageView
ウィジェットを用います。PageView
ウィジェットを使用することでスムーズなスワイプ操作による画面遷移を実現し、Navigator
クラスのpush
とpop
メソッドを使用することで画面間のナビゲーションを制御できます。
サンプルコード
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: PageView(
children: <Widget>[
MyPageWidget(Color(0xFF99CCFF), "Page 1"),
MyPageWidget(Color(0xFFCC99FF), "Page 2"),
MyPageWidget(Color(0xFFFF99CC), "Page 3"),
],
),
);
}
}
class MyPageWidget extends StatelessWidget {
final Color color;
final String text;
MyPageWidget(this.color, this.text);
@override
Widget build(BuildContext context) {
return Container(
color: color,
child: Center(
child: Text(text, style: TextStyle(fontSize: 24)),
),
);
}
}
サンプルコードの解説
- 3〜5行目: アプリケーションのメイン関数です。
MyApp
ウィジェットを実行します。 - 7〜20行目:
MyApp
ウィジェットはアプリケーションのルートウィジェットです。MaterialApp
を使用して、ナビゲーションやテーマを設定します。 - 22〜37行目:
MyPageWidget
クラスは、各ページのUIを定義します。コンストラクタで色とテキストを受け取り、それを表示します。 - 11~17行目:
PageView
ウィジェットを使用して、スワイプによるページ遷移を実装します。children
プロパティに各ページのウィジェットをリストとして渡します。 - 32~34行目: 各ページの中央にテキストを表示します。
TextStyle
でフォントサイズを設定しています。
動作確認
それでは、動作を確認してみましょ〜
画面遷移時のpush
とpop
メソッドにご興味のある読者様。以下の記事で分かりやすく丁寧に解説しておりますので、ぜひご一読いただけますと幸いです。
【Flutter】Navigatorを使った簡単な画面遷移(push、pop)
こんばんは〜弊社ブログに辿り着いていただきありがとうございます!株式会社メモリアインクのいちのです今回はFlutterでNavigatorを使った簡単な画面遷移について解説…
まとめ
いかがでしたでしょうか?今回は、スワイプ(PageView)して画面遷移したり元の画面に戻る方法について、サンプルコードを用いて解説してみました。読者様の開発の手助けに少しでもなればいいなと思いこの記事を書かせていただいております。弊社ではAndroid、iOS、Flutterを使ったアプリ開発についてのブログを多数投稿させていただいておりますので、ご興味のある方はぜひ!
自分の成長を加速させるチャンスがどこかにあるかもしれません。
変化を恐れずに新たな環境に飛び込む勇気のある方は、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
コメント
コメント一覧 (1件)
[…] […]