Table of Contents
はじめに
FundastA Inc.の鈴木です。
Flutterを用いて、アプリ開発をした際にページ遷移をおしゃれにスライドさせたいと思いましたが、少し手間取ったので、備忘録として書いていければと思います。
また少しでも見ていただいた方の参考になればと思います。
開発環境
- フレームワーク：Flutter
- 言語：Dart
やったこと
全体コード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
class Main extends StatefulWidget { @override State<Main> createState() => _main(); } class _main extends State<ChildMain> { late PageController _pageController; int _selectedIndex =1; //遷移したいページをまとめる var _pages = [ Page1(), Page2(), Page3(), ]; //ウィジェットが作成されたタイミングで処理 @override void initState(){ super.initState(); _pageController = PageController(initialPage: _selectedIndex); } // ウィジェットが完全に破棄された状態 @override void dispose() { super.dispose(); _pageController.dispose(); } // 更新を伝えるメソッド void _onPageChanged(int index) { setState(() { _selectedIndex = index; }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('タイトル'), ), //ページごとに機能するスクロール可能なリスト body:PageView( controller: _pageController, onPageChanged: _onPageChanged, children: _pages, ) ); } } |
ページをまとめる
|
1 2 3 4 5 |
var _pages = [ Page1(), Page2(), Page3(), ]; |
PageControllerで制御する
|
1 2 3 4 5 6 |
//ウィジェットが作成されたタイミングで処理 @override void initState(){ super.initState(); _pageController = PageController(initialPage: _selectedIndex); } |
PageController は、ビューに表示されるページを制御しています。
initialPage で最初に表示されるページを指定してあげます。
今回はPage2を中心に左右にスライドさせたいので、_selectedIndexは１に設定しています。
更新した時の動作
|
1 2 3 4 5 6 |
// 更新を伝えるメソッド void _onPageChanged(int index) { setState(() { _selectedIndex = index; }); } |
PageView
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('タイトル'), ), //ページごとに機能するスクロール可能なリスト body:PageView( controller: _pageController, onPageChanged: _onPageChanged, children: _pages, ) ); } |
・controller：ビューに表示されるページを制御してます。
・onPageChanged：ページが変更されたときに動作します。
・children：表示するビューを管理しています。
この３つを指定することで動作します。
感想
スマホではよく見る動作なので、そこまで難しくないかなと思っていましたが、調べると結構時間が掛かりました。
またsetState やinitState などライフサイクルについて知らないとわからないと理解が深まらないかなといった印象です。
このブログが少しでも皆さんのお役に立てればと思います。
ご覧いただき、ありがとうございました。