Balbas Code

Dartでのスワイプによる画面遷移

公開日: 2024-07-13 10:12:40

Dartで画面を左右にスワイプさせることで、画面遷移をするコードをまとめました。
一番右のページに到達した時も、さらに右にスワイプさせると最初のページに戻る仕様です。

main.dart


import 'package:flutter/material.dart';

void main() {
runApp(MyApp());
}

// MyAppウィジェットの定義
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}

// MyHomePageウィジェットの定義
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}

// _MyHomePageStateの定義
class _MyHomePageState extends State<MyHomePage> {
// ページコントローラの初期化
final PageController _controller = PageController(initialPage: 0);

@override
Widget build(BuildContext context) {
return Scaffold(
body: PageView.builder(
// PageControllerを設定
controller: _controller,
// ページビルダー関数の定義
itemBuilder: (context, index) {
// インデックスをラップアラウンドすることで無限スクロールを実現
final pageIndex = index % 3;
return _buildPage(pageIndex);
},
),
);
}

// ページのビルド関数
Widget _buildPage(int pageIndex) {
switch (pageIndex) {
case 0:
return FirstView();
case 1:
return SecondView();
case 2:
return ThirdView();
default:
return Container();
}
}
}

// FirstViewウィジェットの定義
class FirstView extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Text('First View', style: TextStyle(fontSize: 24)),
);
}
}

// SecondViewウィジェットの定義
class SecondView extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Text('Second View', style: TextStyle(fontSize: 24)),
);
}
}

// ThirdViewウィジェットの定義
class ThirdView extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Text('Third View', style: TextStyle(fontSize: 24)),
);
}
}


実行結果(左右にスワイプで画面が切り替わります)
firstViewsecondViewthirdView

実装してみて不明なところを質問しました。
「SwiftUIだとSwipeAction{}のようなコードがあったと思うのですが、Dartでは書かないのですね。
ぱっと見どこでSwipe Actionの定義を行っているのかわからないですね」

→Flutterでは、スワイプアクションを明示的に定義することなく、PageView ウィジェットとそのコントローラを使用してスワイプによるページ切り替えを実現しています。PageView ウィジェットはデフォルトでスワイプジェスチャーをサポートしており、スワイプアクションの明示的な定義が不要です。


これは、FlutterのPageView ウィジェットが内部的にスワイプジェスチャーを処理しているためです。以下のように説明できます:


PageView ウィジェットの使用
 PageView はデフォルトでスワイプによるページ切り替えをサポートしています。
 PageView.builder を使用すると、動的にページを生成することができます。


PageController の使用
 PageController はページのスクロールを制御します。初期ページの設定や現在のページインデックスの取得が可能です。