dart – How to edit a tab bar view container’s height in flutter

So on my page. I’ve created a tab bar view that shows data. I’ve got two containers below each tab. You can see the containers in figure 1 and figure 2 below the first tab. I’m having a slight issue, I don’t how to write the code for the height of the container in the tab bar view. If I give the container a height of double.maxFinite, it just scrolls endlessly (figure 3), if I give the container a constant height, only a portion of the screen will display the data (figure 4). How should I write my code so the two sub-containers containing the data will scroll and stop once we can view the bottom of the second container (as seen in image 5). Note – I want the containers to scroll under historical and projected data

    return SingleChildScrollView(
  child: SafeArea(
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        SizedBox(
          height: 10,
        ),
        Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Column(
              children: [
                SizedBox(height: 10),
                Container(
                  child: TabBar(
                    controller: _tabController,
                    isScrollable: true,
                    labelColor: Theme.of(context).iconTheme.color,
                    labelStyle: TextStyle(
                        color: Theme.of(context).iconTheme.color,
                        letterSpacing: -1,
                        fontSize: 16,
                        fontWeight: FontWeight.bold),
                    unselectedLabelColor: Theme.of(context).iconTheme.color,
                    indicatorColor: Theme.of(context).iconTheme.color,
                    tabs: [
                      Tab(text: 'historical data'),
                      Tab(text: 'projected data'),
                    ],
                  ),
                ),
                Container(
                  width: double.infinity,
                  height: 200, //////////////// HEIGHT ISSUE HERE
                  child: TabBarView(
                    controller: _tabController,
                    children: [
                      //first tab
                      SingleChildScrollView(
                        // column and containers
                      ),
                      //second tab
                      SingleChildScrollView(
                        // column and containers
                      ),
                    ],
                  ),
                ),
              ],
            )
          ],
        ),
      ],
    ),
  ),
);

} }

images

NEW CODE EDITED BELOW

    return SafeArea(
  child: Container(
    width: MediaQuery.of(context).size.width,
    height: MediaQuery.of(context).size.height,
    child: Column(
      children: [
        TabBar(
          controller: _tabController,
          isScrollable: true,
          labelColor: Theme.of(context).iconTheme.color,
          labelStyle: TextStyle(
              color: Theme.of(context).iconTheme.color,
              letterSpacing: -1,
              fontSize: 16,
              fontWeight: FontWeight.bold),
          unselectedLabelColor: Theme.of(context).iconTheme.color,
          indicatorColor: Theme.of(context).iconTheme.color,
          tabs: [
            Tab(text: 'historical data'),
            Tab(text: 'projected data'),
          ],
        ),
        Expanded(
          child: TabBarView(
            controller: _tabController,
            children: [
              //first tab
              SingleChildScrollView(
                child: Column(
                  children: [
                    SizedBox(height: 10),
                    BarChartBox(
                      title: 'historical total population data chart',
                      height: 270,
                      barchart: charts.BarChart(
                        historicaldata,
                        animationDuration: Duration(seconds: 3),
                        vertical: false,
                        domainAxis: charts.OrdinalAxisSpec(
                          renderSpec: charts.SmallTickRendererSpec(
                            labelStyle: charts.TextStyleSpec(
                              fontSize: 12,
                              color: charts.ColorUtil.fromDartColor(
                                  Theme.of(context).iconTheme.color),
                            ),
                          ),
                        ),
                        primaryMeasureAxis: charts.NumericAxisSpec(
                          renderSpec: charts.SmallTickRendererSpec(
                            labelStyle: charts.TextStyleSpec(
                              color: charts.ColorUtil.fromDartColor(
                                  Theme.of(context).iconTheme.color),
                            ),
                          ),
                        ),
                      ),
                    ),
                    SizedBox(height: 20),
                    DataTableBox(
                      children: [
                        Center(
                          child: Text(
                              'historical total population data table',
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                  fontFamily: 'Cairo',
                                  height: 1.2,
                                  letterSpacing: -1,
                                  fontSize: 16,
                                  fontWeight: FontWeight.bold)),
                        ),
                        SizedBox(height: 10),
                        DemographicsCard(
                          year: '2020',
                          icon: Icon(Icons.arrow_drop_up,
                              color: Color(0xFF469C33)),
                          figure: '206,139,589',
                        ),
                        DemographicsCard(
                          year: '2015',
                          icon: Icon(Icons.arrow_drop_up,
                              color: Color(0xFF469C33)),
                          figure: '181,137,448',
                        ),
                        DemographicsCard(
                          year: '2010',
                          icon: Icon(Icons.arrow_drop_up,
                              color: Color(0xFF469C33)),
                          figure: '158,503,197',
                        ),
                        DemographicsCard(
                          year: '2005',
                          icon: Icon(Icons.arrow_drop_up,
                              color: Color(0xFF469C33)),
                          figure: '138,865,016',
                        ),
                        DemographicsCard(
                          year: '2000',
                          icon: Icon(Icons.arrow_drop_up,
                              color: Color(0xFF469C33)),
                          figure: '122,283,850',
                        ),
                        DemographicsCard(
                          year: '1995',
                          icon: Icon(Icons.arrow_drop_up,
                              color: Color(0xFF469C33)),
                          figure: '107,948,335',
                        ),
                        DemographicsCard(
                          year: '1990',
                          icon: Icon(Icons.arrow_drop_up,
                              color: Color(0xFF469C33)),
                          figure: '95,212,450',
                        ),
                        DemographicsCard(
                          year: '1985',
                          icon: Icon(Icons.arrow_drop_up,
                              color: Color(0xFF469C33)),
                          figure: '83,562,785',
                        ),
                        DemographicsCard(
                          year: '1980',
                          icon: Icon(Icons.arrow_drop_up,
                              color: Color(0xFF469C33)),
                          figure: '73,423,633',
                        ),
                        DemographicsCard(
                          year: '1975',
                          icon: Icon(Icons.arrow_drop_up,
                              color: Color(0xFF469C33)),
                          figure: '63,374,298',
                        ),
                        DemographicsCard(
                          year: '1970',
                          icon: Icon(Icons.arrow_drop_up,
                              color: Color(0xFF469C33)),
                          figure: '55,982,144',
                        ),
                        DemographicsCard(
                          year: '1965',
                          icon: Icon(Icons.arrow_drop_up,
                              color: Color(0xFF469C33)),
                          figure: '50,127,921',
                        ),
                        DemographicsCard(
                          year: '1960',
                          icon: Icon(Icons.arrow_drop_up,
                              color: Color(0xFF469C33)),
                          figure: '45,138,458',
                        ),
                      ],
                    ),
                    SizedBox(height: 20)
                  ],
                ),
              ),
              //second tab
              SingleChildScrollView(
                child: Column(
                  children: [
                    SizedBox(height: 10),
                    BarChartBox(
                      title: 'projected total population data chart',
                      height: 270,
                      barchart: charts.BarChart(
                        projecteddata,
                        animationDuration: Duration(seconds: 3),
                        vertical: false,
                        domainAxis: charts.OrdinalAxisSpec(
                          renderSpec: charts.SmallTickRendererSpec(
                            labelStyle: charts.TextStyleSpec(
                              fontSize: 12,
                              color: charts.ColorUtil.fromDartColor(
                                  Theme.of(context).iconTheme.color),
                            ),
                          ),
                        ),
                        primaryMeasureAxis: charts.NumericAxisSpec(
                          renderSpec: charts.SmallTickRendererSpec(
                            labelStyle: charts.TextStyleSpec(
                              color: charts.ColorUtil.fromDartColor(
                                  Theme.of(context).iconTheme.color),
                            ),
                          ),
                        ),
                      ),
                    ),
                    SizedBox(height: 20),
                    DataTableBox(
                      children: [
                        Center(
                          child: Text(
                              'projected total population data table',
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                  fontFamily: 'Cairo',
                                  height: 1.2,
                                  letterSpacing: -1,
                                  fontSize: 16,
                                  fontWeight: FontWeight.bold)),
                        ),
                        SizedBox(height: 10),
                        DemographicsCard(
                          year: '2080',
                          icon: Icon(Icons.arrow_drop_up,
                              color: Color(0xFF469C33)),
                          figure: '620,456,675',
                        ),
                        DemographicsCard(
                          year: '2075',
                          icon: Icon(Icons.arrow_drop_up,
                              color: Color(0xFF469C33)),
                          figure: '586,202,598',
                        ),
                        DemographicsCard(
                          year: '2070',
                          icon: Icon(Icons.arrow_drop_up,
                              color: Color(0xFF469C33)),
                          figure: '550,374,955',
                        ),
                        DemographicsCard(
                          year: '2065',
                          icon: Icon(Icons.arrow_drop_up,
                              color: Color(0xFF469C33)),
                          figure: '513,527,738',
                        ),
                        DemographicsCard(
                          year: '2060',
                          icon: Icon(Icons.arrow_drop_up,
                              color: Color(0xFF469C33)),
                          figure: '476,130,398',
                        ),
                        DemographicsCard(
                          year: '2055',
                          icon: Icon(Icons.arrow_drop_up,
                              color: Color(0xFF469C33)),
                          figure: '438,639,114',
                        ),
                        DemographicsCard(
                          year: '2050',
                          icon: Icon(Icons.arrow_drop_up,
                              color: Color(0xFF469C33)),
                          figure: '401,315,000',
                        ),
                        DemographicsCard(
                          year: '2045',
                          icon: Icon(Icons.arrow_drop_up,
                              color: Color(0xFF469C33)),
                          figure: '364,711,807',
                        ),
                        DemographicsCard(
                          year: '2040',
                          icon: Icon(Icons.arrow_drop_up,
                              color: Color(0xFF469C33)),
                          figure: '329,066,615',
                        ),
                        DemographicsCard(
                          year: '2035',
                          icon: Icon(Icons.arrow_drop_up,
                              color: Color(0xFF469C33)),
                          figure: '294,986,051',
                        ),
                        DemographicsCard(
                          year: '2030',
                          icon: Icon(Icons.arrow_drop_up,
                              color: Color(0xFF469C33)),
                          figure: '262,977,337',
                        ),
                        DemographicsCard(
                          year: '2025',
                          icon: Icon(Icons.arrow_drop_up,
                              color: Color(0xFF469C33)),
                          figure: '233,343,112',
                        ),
                      ],
                    ),
                    SizedBox(height: 20)
                  ],
                ),
              ),
            ],
          ),
        )
      ],
    ),
  ),
);

} }

Leave a Comment