Flutter tabbarview refresh

Flutter TabBarView Refresh

The TabBarView widget in Flutter doesn’t provide an out-of-the-box way to refresh its content. However, you can achieve the refreshing behavior by using various techniques such as a GlobalKey, StatefulWidget, or external state management libraries like Provider or bloc.

Let’s illustrate an example using a GlobalKey to refresh the TabBarView content. In this example, we assume you have a TabBar with multiple tabs, and each tab displays different content that needs to be refreshed.

      
import 'package:flutter/material.dart';

class RefreshableTab extends StatefulWidget {
  const RefreshableTab({Key? key}) : super(key: key);

  @override
  _RefreshableTabState createState() => _RefreshableTabState();
}

class _RefreshableTabState extends State with AutomaticKeepAliveClientMixin {
  // Create a GlobalKey to access the state of the TabBarView
  final GlobalKey<RefreshIndicatorState> _refreshIndicatorKey = GlobalKey<RefreshIndicatorState>();

  // Simulated content for demonstration purposes
  List<String> _items = [];

  @override
  void initState() {
    super.initState();
    _items = List<String>.generate(10, (index) => 'Item \${index + 1}');
  }

  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    super.build(context);

    return RefreshIndicator(
      key: _refreshIndicatorKey,
      onRefresh: () async {
        // Simulate data refresh by adding new items
        await Future.delayed(Duration(seconds: 1));
        setState(() {
          _items.addAll(List<String>.generate(5, (index) => 'New Item \${_items.length + index + 1}'));
        });
      },
      child: ListView.builder(
        itemCount: _items.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(_items[index]),
          );
        },
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          bottom: TabBar(
            tabs: [
              Tab(text: 'Tab 1'),
              Tab(text: 'Tab 2'),
              Tab(text: 'Tab 3'),
            ],
          ),
        ),
        body: TabBarView(
          children: [
            RefreshableTab(),
            RefreshableTab(),
            RefreshableTab(),
          ],
        ),
      ),
    ),
  ));
}
      
   

In this example, the RefreshableTab class is a StatefulWidget that contains a RefreshIndicator as its root widget. The RefreshIndicator wraps a ListView.builder, displaying the content items. When the user triggers a refresh, the onRefresh callback is called, simulating the addition of new items to the _items list and triggering a rebuild of the widget tree using setState. The AutomaticKeepAliveClientMixin is used to preserve the state of each tab’s content when switching between tabs.

To apply this to a TabBarView, create an instance of RefreshableTab for each tab and wrap the TabBarView children with the RefreshableTab widgets. This way, each tab will have its own instance and state.

Please note that this is just one approach to achieve tab content refreshing. You can explore other state management solutions like Provider or bloc depending on your project requirements.