Bottom overflowed by xxx pixel using TabBarView() in flutter

Question

I have 2 columns on the top is simple container and the the bottom is TabBarView() what I want to achieve is the tabbarview() result is scrollable using singlechildscrollview() and dynamic height , my problem is Bottom overflowed by xxx pixel

I tried the following but doesn't work.

1. height: double.maxFinite
2. height: MediaQuery.of(context).size.height
3. double.infinity

My code below

Widget build(BuildContext context) {
return Column(
  children: [
    const SizedBox(
      height: 20,
    ),
    Container(
      width: MediaQuery.of(context).size.width * 0.8,
      padding: const EdgeInsets.fromLTRB(14.0, 20.0, 14.0, 20.0),
      decoration: BoxDecoration(
        border: Border.all(
          color: const Color(0xffE6E6E6),
          width: 1,
        ),
        color: primaryAppbarColor,
        borderRadius: const BorderRadius.all(
          Radius.circular(15),
        ),
      ),
      child: Column(
        children: [
          const Text(
            "Second Installment",
            style: TextStyle(
              fontSize: 16,
            ),
          ),
          const SizedBox(
            height: 20,
          ),
          const Text(
            "BHD 1,180",
            style: TextStyle(
              fontSize: 28,
              fontWeight: FontWeight.bold,
              color: Color(0xFF000000),
            ),
          ),
          const Text(
            "Current Due Date: August 31, 2022",
            style: TextStyle(
              fontSize: 14,
            ),
          ),
          const SizedBox(
            height: 20,
          ),
          ElevatedButton(
            style: ElevatedButton.styleFrom(
              primary: const Color(0xFF0094FF),
              onPrimary: Colors.white,
              fixedSize: const Size(260, 50),
            ),
            child: const Text('Pay Now'),
            onPressed: () async {},
          ),
          const SizedBox(
            height: 20,
          ),
          SvgPicture.asset(
            'assets/images/creditmax.svg',
            width: 130.0,
          ),
        ],
      ),
    ),
    const SizedBox(
      height: 20,
    ),
    DefaultTabController(
      length: 3, // length of tabs
      initialIndex: 0,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: const <Widget>[
          TabBar(
            labelColor: Colors.green,
            unselectedLabelColor: Colors.black,
            tabs: [
              Tab(text: 'School Fees'),
              Tab(text: 'Other Fees'),
              Tab(text: 'Transactions'),
            ],
          ),
          SizedBox(
            height: 300,
            child: Expanded(
              child: TabBarView(
                children: <Widget>[
                  SchoolFees(),
                  OtherFees(),
                  TransactionFees()
                ],
              ),
            ),
          )
        ],
      ),
    ),
  ],
);}

Answer 1

Wrap your Container with an Expanded Example:

Widget build(BuildContext context) {
return Column(
  children: [
    const SizedBox(
      height: 20,
    ),
    Expanded(
      child:Container(
        ...
    );
}

More information here