how to refresh on pull in Flutter for tab bar?

Question

I have a tab bar that has 5 tabs and each tab contains some data. When the user pulls down to refresh, I want to show a refresh indicator and the data inside tabs should get updated by API calls. Below is the code I have tried so far.

Help me on how to show refresh indicator on pull and a callback function to do something.

import 'dart:async';

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    ));

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => new _HomePageState();
}

class _HomePageState extends State<HomePage> {


  var refreshKey = GlobalKey<RefreshIndicatorState>();

  // @override
  // void initState() {
  //   super.initState();
  //   random = Random();
  //   refreshList();
  // }

  Future<Null> refreshList() async {
    refreshKey.currentState?.show(atTop: false);
    await Future.delayed(Duration(seconds: 2));

    setState(() {
     new HomePage();
    });

    return null;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Pull to refresh"),
      ),
      body: RefreshIndicator(
        key: refreshKey,
        child: new DefaultTabController(
        length: 5,
        child: new Column(
          children: <Widget>[
            new Container(
              width: 1200.0,
              child: new Material(
                color: Colors.lightBlue,
                child: new TabBar(
                  isScrollable: true,
                  labelColor: Colors.white,
                  tabs: [
                    Tab(
                      child: new Text("All",
                      style: new TextStyle(fontSize: 20.0)
                      ),
                    ),
                    Tab(
                      child: new Text("Moving",
                      style: new TextStyle(fontSize: 20.0)), 
                    ),
                    Tab(
                      child: new Text("Idle",
                      style: new TextStyle(fontSize: 20.0)),
                    ),
                    Tab(
                      child: new Text("Parked",
                      style: new TextStyle(fontSize: 20.0)),
                    ),
                    Tab(
                      child: new Text("Inactive",
                      style: new TextStyle(fontSize: 20.0)),
                    ),
                  ],
                ),
              ),
            ),
            new Expanded(
              child: new TabBarView(
                children: [
                  Tab(
                      child: new Text("Demo",
                      style: new TextStyle(fontSize: 20.0)),
                    ),
                  Tab(
                      child: new Text("Demo",
                      style: new TextStyle(fontSize: 20.0)),
                    ),
                  Tab(
                      child: new Text("Demo",
                      style: new TextStyle(fontSize: 20.0)),
                    ),
                  Tab(
                      child: new Text("Demo",
                      style: new TextStyle(fontSize: 20.0)),
                    ),
                  Tab(
                      child: new Text("Demo",
                      style: new TextStyle(fontSize: 20.0)),
                    ),        
                ],
              ),
            ),
          ],
        ),
      ),
      onRefresh: refreshList,
      ),
    );
  }
}

Solution

Child of RefreshIndicator should be Scrollable, in the above example it is DefaultTabController because of which you are not getting the RefreshIndicator

I moved RefreshIndicator into Tab view and added a Scrollable as child (ListView). Please refer the below code

import 'dart:async';
import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    ));

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => new _HomePageState();
}

class _HomePageState extends State<HomePage> {
  var refreshKey = GlobalKey<RefreshIndicatorState>();

  // @override
  // void initState() {
  //   super.initState();
  //   random = Random();
  //   refreshList();
  // }

  Future<Null> refreshList() async {
    refreshKey.currentState?.show(atTop: false);
    await Future.delayed(Duration(seconds: 2));

    setState(() {
      new HomePage();
    });

    return null;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Pull to refresh"),
      ),
      body: new DefaultTabController(
        length: 5,
        child: new Column(
          children: <Widget>[
            new Container(
              width: 1200.0,
              child: new Material(
                color: Colors.lightBlue,
                child: new TabBar(
                  isScrollable: true,
                  labelColor: Colors.white,
                  tabs: [
                    Tab(
                      child: new Text("All",
                          style: new TextStyle(fontSize: 20.0)),
                    ),
                    Tab(
                      child: new Text("Moving",
                          style: new TextStyle(fontSize: 20.0)),
                    ),
                    Tab(
                      child: new Text("Idle",
                          style: new TextStyle(fontSize: 20.0)),
                    ),
                    Tab(
                      child: new Text("Parked",
                          style: new TextStyle(fontSize: 20.0)),
                    ),
                    Tab(
                      child: new Text("Inactive",
                          style: new TextStyle(fontSize: 20.0)),
                    ),
                  ],
                ),
              ),
            ),
            new Expanded(
              child: new TabBarView(
                children: [
                  Tab(
                    child: new RefreshIndicator(
                      child: new ListView(
                        children: <Widget>[
                          new Column(
                            children: <Widget>[
                              new Center(
                                child: new Text("Demo",
                                    style: new TextStyle(fontSize: 20.0)),
                              )
                            ],
                          )
                        ],
                      ),
                      onRefresh: refreshList,
                      key: refreshKey,
                    ),
                  ),
                  Tab(
                    child: new Text("Demo",
                        style: new TextStyle(fontSize: 20.0)),
                  ),
                  Tab(
                    child: new Text("Demo",
                        style: new TextStyle(fontSize: 20.0)),
                  ),
                  Tab(
                    child: new Text("Demo",
                        style: new TextStyle(fontSize: 20.0)),
                  ),
                  Tab(
                    child: new Text("Demo",
                        style: new TextStyle(fontSize: 20.0)),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

I tested the code. It works well. Please lemme know if you're requirement is met.

Above one looks splitted appBar and tabBar, so i tried fixing it. If you want to do the same, please refer the below code

import 'dart:async';

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    ));

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => new _HomePageState();
}

class _HomePageState extends State<HomePage> {
  var refreshKey = GlobalKey<RefreshIndicatorState>();

  // @override
  // void initState() {
  //   super.initState();
  //   random = Random();
  //   refreshList();
  // }

  Future<Null> refreshList() async {
    refreshKey.currentState?.show(atTop: false);
    await Future.delayed(Duration(seconds: 2));

    //network call and setState so that view will render the new values
    print("refresh");
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: new DefaultTabController(
      length: 5,
      child: Scaffold(
        appBar: AppBar(
          title: Text("Pull to refresh"),
          bottom: new TabBar(
            isScrollable: true,
            labelColor: Colors.white,
            tabs: [
              Tab(
                child: new Text("All", style: new TextStyle(fontSize: 20.0)),
              ),
              Tab(
                child: new Text("Moving", style: new TextStyle(fontSize: 20.0)),
              ),
              Tab(
                child: new Text("Idle", style: new TextStyle(fontSize: 20.0)),
              ),
              Tab(
                child: new Text("Parked", style: new TextStyle(fontSize: 20.0)),
              ),
              Tab(
                child:
                    new Text("Inactive", style: new TextStyle(fontSize: 20.0)),
              ),
            ],
          ),
        ),
        body: new Column(
          children: <Widget>[
            new Expanded(
              child: new TabBarView(
                children: [
                  Tab(
                    child: new RefreshIndicator(
                      child: new ListView(
                        children: <Widget>[
                          new Column(
                            children: <Widget>[
                              new Center(
                                child: new Text("Demo",
                                    style: new TextStyle(fontSize: 20.0)),
                              )
                            ],
                          )
                        ],
                      ),
                      onRefresh: refreshList,
                      key: refreshKey,
                    ),
                  ),
                  Tab(
                    child:
                        new Text("Demo", style: new TextStyle(fontSize: 20.0)),
                  ),
                  Tab(
                    child:
                        new Text("Demo", style: new TextStyle(fontSize: 20.0)),
                  ),
                  Tab(
                    child:
                        new Text("Demo", style: new TextStyle(fontSize: 20.0)),
                  ),
                  Tab(
                    child:
                        new Text("Demo", style: new TextStyle(fontSize: 20.0)),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    ));
  }
}

Comments

[moshfiqur]

Child of RefreshIndicator should be Scrollable simple sentence but biggest help :D

[Sumit Kumawat]

@moshfiqur Have you got the solution of this issue.?