1

I'm having a screen wrapped inside SingleChildScrollView and there are lots of widgets inside of it. I created detailBuilder function that return a TabBarView inside my singleChildScrollView.

I manage to achieve the layout like the image below but the problem is I can't make my tabBar to have a fully dynamic height. I tried applying nestedScrollView, but it didn't work

Here's the image:

Structure that I want to achieve

How can I change my code so that the tabBar will have dynamic height value but the at the same time I can scroll of the content simultaneously ?

Here's the current code for the tab bar:

return Column(
        children: [
          Container(
            height: 40,
            decoration: BoxDecoration(
                color: formBackgroundColor,
                borderRadius: BorderRadius.all(Radius.circular(15))
            ),
            child: TabBar(
              controller: collabTabController,
              indicator: ShapeDecoration(
                shape: RoundedRectangleBorder(
                    borderRadius: 
                    const BorderRadius.only(
                        bottomRight: Radius.circular(15),
                        topRight: Radius.circular(15),
                      )
                ),
                color: Colors.orange,
              ),
              tabs: [
                Tab(text:'main'.tr()),
                Tab(text:'solver'.tr()),
              ],
            ),
          ),
          const SizedBox(height: 10),
          SizedBox(
            height: 700, -- Here's the problem I want it to be dynamic depending on my Container 1 
            and Container 2 size (both of them aren't fixed size)
            child: TabBarView(
              controller: collabTabController,
              children: [
                /// Container 1
                /// Container 2
              ]
            ),
          ),
        ],
      );

Main body code:

SingleChildScrollView(
   child: Column(
     children: [
        // Content 1 
        // Content 2 -- detailBuilder() #Which contain my TabBar
        // Content 3
        // Content 4 
     ]
  ),
),
Ken White
  • 123,280
  • 14
  • 225
  • 444
Kim San
  • 575
  • 7
  • 22

0 Answers0