Flutter :How make container fixed at top contains custom tab

Question

I have a page with no appbar in flutter app ,I created custom tabs by containers ,when I click on tabs the future builder data changes by provider,I want to make this tabs fixed on top.

the main page :

Widget build(BuildContext context) {
    var size = MediaQuery.of(context).size;
    var width = size.width;
    return Consumer<GeneralProvider>(
      builder: (context, generalProvider, child) {
        var tabIndex = generalProvider.gamesIndex;
        return Container(
            color: Colors.black,
            child: ListView(
              children: [
                Container(
                  margin: EdgeInsets.only(top: 10),
                  child: Column(
                    children: [
                      Center(
                          child: Text(
                        'Select Week',
                        style: TextStyle(
                            color: Colors.orange,
                            fontSize: 18,
                            fontWeight: FontWeight.bold),
                      )),
                      topBarTabsMethod(generalProvider, size, tabIndex),
                    ],
                  ),
                ),
                subPageMethod(generalProvider, width)
              ],
            ));
      },
    );
  }

the topBarTabsMethod :

//-------------Tabs Method ------------------------------------
  Container topBarTabsMethod(
      GeneralProvider generalProvider, Size size, tabIndex) {
    return Container(
      margin: EdgeInsets.only(top: 10),
      padding: EdgeInsets.only(top: 5, bottom: 5),
      color: Colors.black,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          topSingleTabMethod(
              generalProvider, tabIndex, size, 1, 'Previous Week'),
          topSingleTabMethod(generalProvider, tabIndex, size, 2, 'This Week'),
          topSingleTabMethod(generalProvider, tabIndex, size, 3, 'Next Week'),
        ],
      ),
    );
  }

//--------------Singel Tab Metho
  InkWell topSingleTabMethod(
      GeneralProvider generalProvider, tabIndex, Size size, x, title) {
    return InkWell(
      onTap: () {
        generalProvider.changeGameIndex(x);
      },
      child: Container(
          color: Colors.black,
          margin: EdgeInsets.only(top: 7, bottom: 7),
          width: size.width / 3.3,
          child: Center(
            child: Text(
              '$title',
              style: TextStyle(
                  fontSize: 18,
                  color: tabIndex == x ? Colors.yellow : Colors.white),
            ),
          )),
    );
  }

subPageMethod which contain future builder:

//------------------- Sub Page Method ----------------------
  FutureBuilder<dynamic> subPageMethod(
      GeneralProvider generalProvider, double width) {
    return FutureBuilder(
        future: GamesApi().getWeekGames(generalProvider.type),  // type changes by provider
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            var list = snapshot.data;
            return ListView.builder(
                physics: ScrollPhysics(),

the provider :

int gamesIndex = 2;
String type = "this";
void changeGameIndex(newIndex) {
    switch (newIndex) {
      case 1:
        type = "result";
        break;
      case 2:
        type = "this";
        break;
      case 3:
        type = "next";
        break;
    }
    gamesIndex = newIndex;
    notifyListeners();
  }

now how can i make the column contain title and tabs fixed without using appbar?

Answer 1

You have Container -> ListView -> Container -> Column -> topBarTabsMethod

You should change it to Container -> Column -> topBarTabsMethod -> SingleChildScrollView -> Column -> rest of the body.

In other words, put your topBarTabsMethod at top followed by SingleChildScrollView which will take Column as child where you put rest of the page widgets.