how to set the position of TabBar inside a Stack without error in Flutter?

Question

I have tried to read some solutions in here Flutter: "RenderFlex children have non-zero flex but incoming height constraints are unbounded" but I still have the error

I am trying to move my TabBar from top to the bottom of the green container. like this

as you can see, I have a stack. that blue green gradient background will be as a base, on top of that I have TabBar. the code for the TabBar of the image above is like this

        Positioned(
          child: TabBar( 
            unselectedLabelColor: Colors.white,
            labelColor: Colors.white,
            tabs: [
              Tab(text: 'Tab 1'),
              Tab(text: 'Tab 2'),
            ],
            controller: _tabController,
            indicatorSize: TabBarIndicatorSize.tab,
          ),
        ),

because I want to move that tab bar to the bottom of green base container, then I set the bottom of the Positioned to be zero, like this

        Positioned(
          bottom: 0, // <--- like this
          child: TabBar( 
            unselectedLabelColor: Colors.white,
            labelColor: Colors.white,
            tabs: [
              Tab(text: 'Tab 1'),
              Tab(text: 'Tab 2'),
            ],
            controller: _tabController,
            indicatorSize: TabBarIndicatorSize.tab,
          ),
        ),

but I have error

RenderFlex children have non-zero flex but incoming width constraints are unbounded.

When a row is in a parent that does not provide a finite width constraint, for example if it is in a horizontal scrollable, it will try to shrink-wrap its children along the horizontal axis. Setting a flex on a child (e.g. using Expanded) indicates that the child is to expand to fill the remaining space in the horizontal direction. These two directives are mutually exclusive. If a parent is to shrink-wrap its child, the child cannot simultaneously expand to fit its parent.

I have tried to wrap that TabBar using Expanded, but I still have the error. I don't have a row but the error said 'when a row .... ' . I am confused. please help

here is my full code from DartPad.

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> with SingleTickerProviderStateMixin {
  
  
  late TabController _tabController;

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

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }
  
  
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        Stack(
          children: [
            BaseWithGradientColor(),
            Positioned(
              child: TabBar( // <---- My Problem is in here
                unselectedLabelColor: Colors.white,
                labelColor: Colors.white,
                tabs: [
                  Tab(text: 'Tab 1'),
                  Tab(text: 'Tab 2'),
                ],
                controller: _tabController,
                indicatorSize: TabBarIndicatorSize.tab,
              ),
            ),
          ],
        ),
      ],
    );
  }
}

class BaseWithGradientColor extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final themeData = Theme.of(context);
    return Container(
      width: double.infinity,
      height: MediaQuery.of(context).size.width * 0.75,
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: [Colors.blue, Colors.green],
        ),
      ),
    );
  }
}

Maybe `Stack` should be wrapped with `Expanded` or `Flexible` — CrimsonFoot, May 30 '21 at 09:42

score 1 · Answer 1 · answered May 30 '21 at 10:00

i think you can also achieve it by only using column

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> with SingleTickerProviderStateMixin {
  
  
  late TabController _tabController;

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

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }
  
  
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
    
// First child (also minus the  size of tabbar)
            BaseWithGradientColor(), 

// Second Child
             TabBar( // <---- My Problem is in here
                unselectedLabelColor: Colors.white,
                labelColor: Colors.white,
                tabs: [
                  Tab(text: 'Tab 1'),
                  Tab(text: 'Tab 2'),
                ],
                controller: _tabController,
                indicatorSize: TabBarIndicatorSize.tab,
            ),
/// Thir child and so on .. 
          ],
      
    );
  }
}

class BaseWithGradientColor extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final themeData = Theme.of(context);
    return Container(
      width: double.infinity,
      height: MediaQuery.of(context).size.width * 0.75,
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: [Colors.blue, Colors.green],
        ),
      ),
    );
  }
}

how to set the position of TabBar inside a Stack without error in Flutter?

1 Answers1