'Using FutureBuilder with TabBarView in Flutter

In this application, I'm using TabBar to divide content into categories. Information of each content is coming from a local database. For listing items from that local database to screen, I'm using FutureBuilder and calling some database helpers to fetch data in the future.

Screenshot

As you can see in the screenshot, I have 6 different tabs on top, and in each tab have fetched data with FutureBuilder. (This was what should normally happen.) I did not encounter with any debug error but only the first FutureBuilder lists the data to the screen. The second tab is not showing anything. (And also the other tabs have the same issue but I just put a placeholder to make code shorter).

Here is the code:

import 'package:cascade_travel_guide/data/database_helper.dart';
import 'package:cascade_travel_guide/model/Categories.dart';
import 'package:cascade_travel_guide/model/HistoricalPlaces.dart';
import 'package:cascade_travel_guide/model/Parks.dart';
import 'package:flutter/material.dart';

class CategoryScreen extends StatefulWidget {
  final townid;
  CategoryScreen({Key key, this.townid}) : super(key: key);

  @override
  _CategoryScreenState createState() => _CategoryScreenState(townid: this.townid);
}

class _CategoryScreenState extends State<CategoryScreen> with TickerProviderStateMixin {

  var townid;
  _CategoryScreenState({this.townid});

  var dbHelper = DbHelper();
  ScrollController _scrollController;
  TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 6, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Theme.of(context).canvasColor,
      body: CustomScrollView(
        physics: NeverScrollableScrollPhysics(),
        controller: _scrollController,
        slivers: <Widget>[
          SliverAppBar(
            bottom: PreferredSize(
              child: Container(),
              preferredSize: Size(0, 110),
            ),
            pinned: true,
            automaticallyImplyLeading: false,
            primary: false,
            flexibleSpace: Stack(
              children: <Widget>[
                Container(
                  width: MediaQuery.of(context).size.width,
                  height: MediaQuery.of(context).size.height,
                  child: Image.network(
                    "https://i.pinimg.com/originals/6b/47/b9/6b47b97543abed38a12d8c2b4643e870.jpg",
                    fit: BoxFit.cover,
                  ),
                ),
                Positioned(
                  child: Column(
                    children: [
                      TabBar(
                          controller: _tabController,
                          isScrollable: true,
                          labelColor: Colors.white,
                          labelPadding: EdgeInsets.symmetric(horizontal: 15),
                          tabs: [
                            Tab(text: "Historical Places"),
                            Tab(text: "Parks"),
                            Tab(text: "Shopping Malls"),
                            Tab(text: "Restaurants"),
                            Tab(text: "Hospitals"),
                            Tab(text: "Police Stations"),
                          ]),
                      Container(
                        decoration: BoxDecoration(
                          color: Theme.of(context).canvasColor,
                          borderRadius: BorderRadius.only(
                            topLeft: Radius.circular(40),
                            topRight: Radius.circular(40),
                          ),
                        ),
                      ),
                    ],
                  ),
                  bottom: -1,
                  left: 0,
                  right: 0,
                ),
              ],
            ),
          ),
          SliverFillRemaining(
              child: Container(
                  child: TabBarView(
            controller: _tabController,
            children: [
              FutureBuilder<List<Categories>>(
                  future: dbHelper.getCategories(townid),
                  builder: (context, snapshot) {
                    if (snapshot.hasData) {
                      List catid = [];
                      for (int i = 0; i < snapshot.data.length; i++) {
                        if (catid.length < snapshot.data.length)
                          catid.add(snapshot.data[i].categoriesId);
                      }
                      print(catid);
                      return Container(
                        child: FutureBuilder<List<HistoricalPlaces>>(
                            future: dbHelper.getHist(catid[0]),
                            builder: (context, snapshot) {
                              if (snapshot.hasData)
                                return ListView.builder(
                                    itemCount: snapshot.data.length,
                                    itemBuilder: (context, index) {
                                      return ListTile(
                                        title: Text(
                                            "${snapshot.data[index].histName}"),
                                        leading: CircleAvatar(),
                                      );
                                    });
                              else
                                return Center(
                                    child: CircularProgressIndicator());
                            }),
                      );
                    } else
                      return Center(
                        child: CircularProgressIndicator(),
                      );
                  }),
              FutureBuilder<List<Categories>>(
                  future: dbHelper.getCategories(townid),
                  builder: (context, snapshot) {
                    if (snapshot.hasData) {
                      List catid = [];
                      for (int i = 0; i < snapshot.data.length; i++) {
                        if (catid.length < snapshot.data.length)
                          catid.add(snapshot.data[i].categoriesId);
                      }
                      print(catid);
                      return Container(
                        child: FutureBuilder<List<Parks>>(
                            future: dbHelper.getPark(catid[0]),
                            builder: (context, snapshot) {
                              if (snapshot.hasData)
                                return ListView.builder(
                                    padding: EdgeInsets.zero,
                                    itemCount: snapshot.data.length,
                                    itemBuilder: (context, index) {
                                      return ListTile(
                                        title: Text(
                                            "${snapshot.data[index].parkName}"),
                                      );
                                    });
                              else
                                return Center(
                                    child: CircularProgressIndicator());
                            }),
                      );
                    } else
                      return Center(
                        child: CircularProgressIndicator(),
                      );
                  }),
              Center(
                child: Text("Test"),
              ),
              Center(
                child: Text("Test"),
              ),
              Center(
                child: Text("Test"),
              ),
              Center(
                child: Text("Test"),
              ),
            ],
          ))),
        ],
      ),
    );
  }
}

P.S.: I also tried to add IndexedStack to fetch all lists together but nothing changed :(



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source