Пример PageView во Flutter: создание прокручиваемого списка страниц

Фраза «пример флаттера просмотра страниц» относится к использованию виджета PageView в платформе Flutter, который позволяет создавать прокручиваемый список страниц или экранов. Вот пример использования виджета PageView во Flutter:

import 'package:flutter/material.dart';
class MyPageView extends StatefulWidget {
  @override
  _MyPageViewState createState() => _MyPageViewState();
}
class _MyPageViewState extends State<MyPageView> {
  PageController _pageController;
  int _currentPage = 0;
  @override
  void initState() {
    super.initState();
    _pageController = PageController();
  }
  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('PageView Example'),
      ),
      body: PageView(
        controller: _pageController,
        onPageChanged: (int page) {
          setState(() {
            _currentPage = page;
          });
        },
        children: <Widget>[
          Container(
            color: Colors.blue,
            child: Center(
              child: Text(
                'Page 1',
                style: TextStyle(fontSize: 24, color: Colors.white),
              ),
            ),
          ),
          Container(
            color: Colors.red,
            child: Center(
              child: Text(
                'Page 2',
                style: TextStyle(fontSize: 24, color: Colors.white),
              ),
            ),
          ),
          Container(
            color: Colors.green,
            child: Center(
              child: Text(
                'Page 3',
                style: TextStyle(fontSize: 24, color: Colors.white),
              ),
            ),
          ),
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentPage,
        onTap: (int page) {
          _pageController.animateToPage(
            page,
            duration: Duration(milliseconds: 500),
            curve: Curves.ease,
          );
        },
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.looks_one),
            label: 'Page 1',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.looks_two),
            label: 'Page 2',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.looks_3),
            label: 'Page 3',
          ),
        ],
      ),
    );
  }
}
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'PageView Flutter Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyPageView(),
    );
  }
}

В этом примере у нас есть виджет PageView, заключенный в виджет Scaffold. Виджет PageView снабжен PageController для управления страницами. Обратный вызов onPageChangedпозволяет отслеживать видимую в данный момент страницу и соответствующим образом обновлять пользовательский интерфейс. Свойство childrenвиджета PageView принимает список виджетов, каждый из которых представляет страницу.

Чтобы улучшить взаимодействие с пользователем, мы добавили виджет BottomNavigationBar, который позволяет пользователю перемещаться между страницами, нажимая на соответствующий значок.