facebook twitter hatena line email

Flutter/UI/PageView

提供: 初心者エンジニアの簡易メモ
移動: 案内検索

PageView基本

PageView(
  children: <Widget>[
    Container(
      color: Colors.pink,
    ),
    Container(
      color: Colors.cyan,
    ),
    Container(
      color: Colors.deepPurple,
    ),
  ],
)

無限

PageView.builder(
  itemBuilder: (context, position) {
    return Container(
      color: position % 2 == 0 ? Colors.pink : Colors.cyan,
    );
  },
)

色々制御

   PageView pageView = PageView(
     controller: _pageController,
     children: <Widget>[
       pageWidget,
       pageThreadWidget
     ],
     onPageChanged: _onPageViewChange,
   );
// ページ移動イベント
 _onPageViewChange(int page) {
   print("Current Page: " + page.toString());
 }
// 削除
 @override
 void dispose() {
   _pageController.dispose();
   super.dispose();
 }
// ページ移動アニメーション
     if (_pageController.hasClients) {
       _pageController.animateToPage(
         1,
         duration: const Duration(milliseconds: 400),
         curve: Curves.easeInOut,
       );
     }
// ページ移動アニメーションなし
     if (_pageController.hasClients) {
       _pageController.jumpToPage(0);
     }

参考

https://medium.com/flutter-community/a-deep-dive-into-pageview-in-flutter-with-custom-transitions-581d9ea6dded