How to make page Scrollable when contents of tab increases

Question

I have following build method

  @override
  Widget build(BuildContext context) {
    return Scaffold(
          body: NestedScrollView(
              headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
                return <Widget>[
                  SliverAppBar(
                    expandedHeight: size.getSizePx(277),
                    floating: false,
                    title: const Text("Details"),
                    pinned: true,
                    flexibleSpace: Container(
                      decoration: BoxDecoration(
                        gradient: LinearGradient(
                            begin: Alignment.topLeft,
                            end: Alignment.bottomRight,
                            colors: [
                              Constants.gradientStart,
                              Constants.gradientEnd
                            ]),
                      ),
                      child: FlexibleSpaceBar(
                        centerTitle: true,
                        background: Image.asset(
                            "path/to/image",
                            fit: BoxFit.fill,
                          ),
                      ),
                    ),
                  ),
                ];
              },
              body: DefaultTabController(
                length: 4,
                child: SingleChildScrollView(
                  padding: EdgeInsets.only(
                      left: 7, right: 7),
                  child: ConstrainedBox(
                    constraints: BoxConstraints(
                        maxHeight: MediaQuery.of(context).size.height),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.stretch,
                      mainAxisSize: MainAxisSize.min,
                      children: <Widget>[
                        Container(
                          height: 180,
                          child: someTextWidgets(), //some widgets here
                        ),
                        Expanded(
                          child: Container(
                            margin: EdgeInsets.only(top: 20),
                            child: _tabBarView(), // this will render tab bar and its contents
                          ),
                        ),
                        Container(
                          height: 10,
                          child: otherWidgets(), //other widgets here
                        ),
                      ],
                    ),
                  ),
                ),
              )),
        );
  }

And _tabBarView() widget

Widget _tabBarView() {
    return Column(
      children: <Widget>[
        Container(
          constraints: BoxConstraints.expand(height: 60),
          child: TabBar(
              labelStyle: TextStyle(fontSize: size.getSizePx(12)),
              labelColor: Constants.primaryColor,
              unselectedLabelColor: Colors.black45,
              indicatorColor: Constants.primaryColor,
              tabs: [
                Tab(
                  text: "Contact Info",
                  icon: Icon(Constants.iconAccount),
                ),
                Tab(
                  text: "Details",
                  icon: Icon(Constants.iconDetails),
                ),
                Tab(
                  text: "Map",
                  icon: Icon(Constants.iconMap),
                ),
              ]),
        ),
        Expanded(
          child: Container(
            child: TabBarView(children: [
              Container(
                margin: EdgeInsets.only(top: size.getSizePx(15)),
                child: Column(
                  children: <Widget>[
                    //some text widgets here
                  ],
                ),
              ),
              Container(
                margin: EdgeInsets.only(top: size.getSizePx(15)),
                child: Column(
                  children: <Widget>[
                    //SOME TEXT WIDGETS,
                    //EPANSION TILES (ACCORDIONS)
                  ],
                ),
              ),
              Container(
                margin: EdgeInsets.only(top: size.getSizePx(15)),
                child: Text("Some long text here"),
              ),
            ]),
          ),
        )
      ],
    );
  }

Problem

As shown in the snippet code above, SingleChildScrollView is child of DefaultController and SingleChildScrollView contains all the other widgets.

Second Tab has few expansion tiles, which can be expanded and collapsed to show/hide contents , when it is expanded the bottom overflow by message is shown. I need whole page scrollable if content size increases in the tab.

I am fairly new in flutter, can anybody help me on this??

Thanks

Answer 1

try this,

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
            return <Widget>[
              SliverAppBar(
                expandedHeight: 277,
                floating: false,
                title: const Text("Details"),
                pinned: true,
                flexibleSpace: Container(
                  decoration: BoxDecoration(
                    gradient: LinearGradient(
                        begin: Alignment.topLeft,
                        end: Alignment.bottomRight,
                        colors: [
                          Colors.redAccent,
                          Colors.blueAccent
                        ]),
                  ),
                  child: FlexibleSpaceBar(
                    centerTitle: true,
                    background: Image.asset(
                      "path/to/image",
                      fit: BoxFit.fill,
                    ),
                  ),
                ),
              ),
            ];
          },
          body: DefaultTabController(
            length: 3,
            child: SingleChildScrollView(
              padding: EdgeInsets.only(
                  left: 7, right: 7),
              child: ConstrainedBox(
                constraints: BoxConstraints(
                    maxHeight: MediaQuery.of(context).size.height),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    Container(
                      height: 180,
                      child: Text("textttdd"), //some widgets here
                    ),
                    TabBar(
                        labelStyle: TextStyle(fontSize: 12),
                        labelColor: Colors.blue,
                        unselectedLabelColor: Colors.black45,
                        indicatorColor: Colors.blue,
                        tabs: [
                          Tab(
                            text: "Contact Info",
                            icon: Icon(Icons.info),
                          ),
                          Tab(
                            text: "Details",
                            icon: Icon(Icons.details),
                          ),
                          Tab(
                            text: "Map",
                            icon: Icon(Icons.map),
                          ),
                        ]),
                    Expanded(
                      child: Container(
                        margin: EdgeInsets.only(top: 20),
                        child: TabBarView(children: [
                          Container(
                            margin: EdgeInsets.only(top: 15),
                            child: Column(
                              children: <Widget>[
                                //some text widgets here
                              ],
                            ),
                          ),
                          Container(
                            margin: EdgeInsets.only(top: 15),
                            child: ListView(
                              children: <Widget>[
                                Text("hello"),
                                Column(children: ["demo","demo1","demo","demo1","demo","demo1","demo","demo1","2222","123333"].map((f)=> ExpansionTile(title: Text(f),)).toList(),)
                              ],
                            ),
                          ),
                          Container(
                            margin: EdgeInsets.only(top: 15),
                            child: Text("Some long text here"),
                          ),
                        ]), // this will render tab bar and its contents
                      ),
                    ),
                    Container(
                      height: 10,
                      color: Colors.redAccent, //other widgets here
                    ),
                  ],
                ),
              ),
            ),
          )),
    );
  }