Zenn
Open2

【Flutter】PageViewについて

Flutter
Dart
カワグチミサキカワグチミサキ

作成の流れ

  • PageViewで表示されるWidgetの番号を指定
  • PageViewを操作するためのcontrollerを指定
class _DummyState extends State<Dummy> {
  // PageViewで表示されているWidgetの番号
  late int _currentIndex;
  // PageViewを操作するためのcontroller
  late PageController _controller;

  @override
  void initState() {
    super.initState();
    // PageViewで表示されているWidgetの番号を持っておく
    _currentIndex = 0;
    // PageViewの表示を切り替えるのに使う
    _controller = PageController(initialPage: _currentIndex);
  }
}
  • 表示するWIdgetを並べる
class _DummyState extends State<Dummy> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView(
        controller: _controller,
        children: const [
          Center(
            child: Text('ダミー1'),
          ),
          Center(
            child: Text('ダミー2'),
          ),
        ],
      ),
    );
  }
}
  • Widgetが切り替わったときの処理を指定
class _DummyState extends State<Dummy> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView(
        controller: _controller,
        // 表示が切り替わったとき
        onPageChanged: (int index) => _onPageChanged(index),
        children: const [
          Center(
            child: Text('ダミー1'),
          ),
          Center(
            child: Text('ダミー2'),
          ),
        ],
      ),
    );
  }

  void _onPageChanged(int index) {
    // PageViewで表示されているWidgetの番号を更新
    setState(() {
      _currentIndex = index;
    });
  }
}
カワグチミサキカワグチミサキ

※bottomNavigationBarで切り替える場合

  • bottomNavigationBarを追加
bottomNavigationBar: BottomNavigationBar(
  currentIndex: _currentIndex,
  items: const [
    BottomNavigationBarItem(
      icon: Icon(Icons.image),
      label: 'ダミー1',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.favorite),
      label: 'ダミー2',
    ),
  ],
),
  • 画面を切り替えるメソッドを追加
bottomNavigationBar: BottomNavigationBar(
  onTap: (int index) => _onTapBottomNavigationItem(index),
  currentIndex: _currentIndex,
  items: const [
    BottomNavigationBarItem(
      icon: Icon(Icons.image),
      label: 'ダミー1',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.favorite),
      label: 'ダミー2',
    ),
  ],
),

void _onTapBottomNavigationItem(int index) {
  // PageViewで表示するWidgetを切り替える
  _controller.animateToPage(
    index,
    // 表示を切り替える時にかかる時間（300ミリ秒）
    duration: const Duration(milliseconds: 300),
    curve: Curves.easeIn,
  );
  // PageViewで表示されているWidgetの番号を更新
  setState(() {
    _currentIndex = index;
  });
}