Flutter - Putting TabBarView in Scroll

Question

Currently, I have my code like this.

   return SingleChildScrollView(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          if (_isLandscape)
            Row(
              children: [
                imageFrame,
                Column(
                  children: [
                    myBuyFunctionality,
                    myTabBarView,
                  ],
                ),
              ],
            )
          else
            Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                imageFrame,
                SizedBox(
                  height: 20,
                ),
                myBuyFunctionality,
                myTabBarView,
              ],
            ),
          Align(
            alignment: Alignment.bottomCenter,
            child: _isBuyNow ? buyNowButton : placeBidButton,
          ),
        ],
      ),
    ),

My code is working completely fine until I put myTabBarView in the tree. It consists of 2 children widgets like this.

var myTabBarView = TabBarView(
  controller: _tabController,
  children: [
    placeBidBody(),
    placeBidBody(),
  ],
);

In the placeBidBody I only have a textfield, some text, and spacing, just the normal stuff all wrapped up in a column.

Whenever I place the myTabBarView in my SingleChildScrollView it gives me the error:

Horizontal viewport was given unbounded height.

Can you please let me know what I am doing wrong or if there is a better way to structure all of this.

I am still relatively new to flutter so your help would be much appreciated.

Answer 1

Wrap the parent widget(Column) with a limited height widget like SizedBox or 
AspectRatio. Then use the Expanded widget like this:

child: SizedBox(
height: 300.0,
child: Column(
children: <Widget>[
   .
   .
   .
 Expanded(
 child: TabBarView(
 children: <Widget>[
]))]))

2nd solution is

 SizedBox.expand(
    child: TabBarView(),
  )