facebook twitter hatena line email

「Flutter/UI/PageView」の版間の差分

提供: 初心者エンジニアの簡易メモ
移動: 案内検索
(ページの作成:「==PageView基本== <pre> PageView( children: <Widget>[ Container( color: Colors.pink, ), Container( color: Colors.cyan, ), Container(...」)
 
(無限)
 
行25: 行25:
 
)
 
)
 
</pre>
 
</pre>
 +
 +
==色々制御==
 +
    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
 
https://medium.com/flutter-community/a-deep-dive-into-pageview-in-flutter-with-custom-transitions-581d9ea6dded

2020年1月21日 (火) 00:16時点における最新版

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