Что такое PageStorage?

Что такое PageStorage?

PageStorage - это вспомогательный класс Flutter, который позволяет сохранять состояние (state) виджетов при навигации между страницами. Он предоставляет механизм для восстановления данных формы, позиции скролла и других состояний, когда пользователь возвращается на предыдущую страницу.

Основная функция PageStorage

PageStorage используется для восстановления состояния страницы после навигации:

• Позиция скролла в списке
• Введенный текст в текстовом поле
• Выбранный элемент в выпадающем списке
• Состояние любого другого виджета с key

Как работает PageStorage

class MyScrollableWidget extends StatefulWidget {
  @override
  State<MyScrollableWidget> createState() => _MyScrollableWidgetState();
}

class _MyScrollableWidgetState extends State<MyScrollableWidget> {
  final PageStorageKey _storageKey = PageStorageKey("my_list");
  
  @override
  Widget build(BuildContext context) {
    return ListView(
      key: _storageKey,
      children: List.generate(
        100,
        (index) => ListTile(title: Text("Item $index")),
      ),
    );
  }
}

Пример с сохранением позиции скролла

class ProductListPage extends StatefulWidget {
  @override
  State<ProductListPage> createState() => _ProductListPageState();
}

class _ProductListPageState extends State<ProductListPage> {
  final PageStorageKey _listKey = PageStorageKey("products");
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Products")),
      body: ListView(
        key: _listKey,
        children: List.generate(
          100,
          (index) => ListTile(
            title: Text("Product $index"),
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => ProductDetailPage(id: index),
                ),
              );
            },
          ),
        ),
      ),
    );
  }
}

PageStorage с TabBarView

Особенно полезен PageStorage при работе с TabBarView:

class TabbedPage extends StatefulWidget {
  @override
  State<TabbedPage> createState() => _TabbedPageState();
}

class _TabbedPageState extends State<TabbedPage>
    with SingleTickerProviderStateMixin {
  late TabController _tabController;
  
  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 3, vsync: this);
  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Tabs"),
        bottom: TabBar(
          controller: _tabController,
          tabs: [
            Tab(text: "Home"),
            Tab(text: "Search"),
            Tab(text: "Profile"),
          ],
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: [
          ListView(
            key: PageStorageKey("home_tab"),
            children: _buildList("Home"),
          ),
          ListView(
            key: PageStorageKey("search_tab"),
            children: _buildList("Search"),
          ),
          ListView(
            key: PageStorageKey("profile_tab"),
            children: _buildList("Profile"),
          ),
        ],
      ),
    );
  }
}

Важные моменты

• PageStorageKey должен быть уникален в пределах страницы
• PageStorage работает только с Navigator.pop()
• Если использовать replacement навигацию, состояние теряется
• Состояние сохраняется во время жизни приложения

Когда использовать PageStorage

• Большие списки с позицией скролла
• Формы с несколькими полями ввода
• TabBarView с дорогостоящим контентом
• Фильтры и сортировка в списках

PageStorage - простой и мощный инструмент для улучшения UX в Flutter приложениях.