Flutter - Bottom Overflowed by number of pixels

Question

I am using Expanded widget with its child Container and I provided width with double.infinity. I am trying to add ListView as a child of Container and I wanted the height of ListView from the top of screen to the bottom of the screen. While my top of screen already had a widget called BuildHeaderPage. So, I wanted the height of the Container widget to start from the bottom of BuildHeaderPage widget to the bottom of the screen.

Below is my code:

return Scaffold(
  appBar: AppBar(
    elevation: 0,
    title: Text("Dry Cough"),
    backgroundColor: bgroundHeaderColor,
    actions: <Widget>[
      IconButton(
        icon: Icon(Icons.more_vert),
        onPressed: () {},
      )
    ],
  ),
  resizeToAvoidBottomInset: false,
  body: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      BuildHeaderPage(bgroundHeaderColor: bgroundHeaderColor),
      Padding(
        padding: new EdgeInsets.symmetric(vertical: 8, horizontal: 8),
        child: Expanded(
          child: Container(
            width: double.infinity,
            decoration: BoxDecoration(
              color: kPrimaryColor.withOpacity(0.3),
            ),
            child: ListView(
              children: <Widget>[
                ListTile(
                  onTap: () {},
                  title: Text("Data"),
                ),
                ListTile(
                  onTap: () {},
                  title: Text("Data"),
                ),
                ListTile(
                  onTap: () {},
                  title: Text("Data"),
                ),
                ListTile(
                  onTap: () {},
                  title: Text("Data"),
                ),
                ListTile(
                  onTap: () {},
                  title: Text("Data"),
                ),
                ListTile(
                  onTap: () {},
                  title: Text("Data"),
                ),
                ListTile(
                  onTap: () {},
                  title: Text("Data"),
                ),
                ListTile(
                  onTap: () {},
                  title: Text("Data"),
                ),
              ],
            ),
          ),
        ),
      )
    ],
  ),
);

And here is BuildHeaderPage widget:

return Container(
  decoration: BoxDecoration(
    color: bgroundHeaderColor,
    borderRadius: BorderRadius.only(
      bottomLeft: Radius.circular(32),
      bottomRight: Radius.circular(32),
    ),
  ),
  padding: new EdgeInsets.all(8),
  width: double.infinity,
  height: MediaQuery.of(context).size.height / 4,
  child: Stack(
    children: <Widget>[
      // buildAppBar(context),
      Padding(
        padding: const EdgeInsets.only(left: 16),
        child: Align(
          alignment: Alignment.topCenter,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
              RichText(
                text: TextSpan(
                  children: [
                    TextSpan(
                      text: "Are you feeling sick?\n",
                      style: TextStyle(
                          height: 1.5,
                          color: Colors.white,
                          fontWeight: FontWeight.bold,
                          fontSize: 22),
                    ),
                    TextSpan(text: "Please contact your local hospitalize.")
                  ],
                ),
              ),
              Image.asset(
                "assets/images/cough.png",
                height: 80,
                width: 80,
                fit: BoxFit.cover,
              ),
            ],
          ),
        ),
      ),
      Stack(
        alignment: Alignment.center,
        children: <Widget>[
          Positioned(
            bottom: 0,
            child: FlatButton(
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(12),
              ),
              padding: EdgeInsets.symmetric(
                  vertical: 12,
                  horizontal: MediaQuery.of(context).size.width / 4),
              textTheme: ButtonTextTheme.primary,
              color: Colors.redAccent,
              onPressed: () {},
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text(
                    "Call Now",
                    style: TextStyle(
                      fontSize: 18,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  SizedBox(
                    width: 8,
                  ),
                  Icon(Icons.call),
                ],
              ),
            ),
          ),
        ],
      ),
    ],
  ),
);

As you can see my code. So, I want the height Expanded widget with its child Container widget should start from BuildHeaderPage to the bottom of the screen.

Solution 1

Made below changes in your code

First wrap your Padding widget inside Expanded widget

Remove Expanded widget from the Padding widget because Expanded widget required column or row as a parent widget

SAMPLE CODE

import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 0,
        title: Text("Dry Cough"),
        backgroundColor: Colors.red,
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.more_vert),
            onPressed: () {},
          )
        ],
      ),
      resizeToAvoidBottomInset: false,
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Container(
            decoration: BoxDecoration(
              color: Colors.green,
              borderRadius: BorderRadius.only(
                bottomLeft: Radius.circular(32),
                bottomRight: Radius.circular(32),
              ),
            ),
            padding: new EdgeInsets.all(8),
            width: double.infinity,
            height: MediaQuery.of(context).size.height / 4,
            child: Stack(
              children: <Widget>[
                // buildAppBar(context),
                Padding(
                  padding: const EdgeInsets.only(left: 16),
                  child: Align(
                    alignment: Alignment.topCenter,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: <Widget>[
                        RichText(
                          text: TextSpan(
                            children: [
                              TextSpan(
                                text: "Are you feeling sick?\n",
                                style: TextStyle(
                                    height: 1.5,
                                    color: Colors.white,
                                    fontWeight: FontWeight.bold,
                                    fontSize: 22),
                              ),
                              TextSpan(text: "Please contact your local hospitalize.")
                            ],
                          ),
                        ),
                        Image.asset(
                          "assets/images/cough.png",
                          height: 80,
                          width: 80,
                          fit: BoxFit.cover,
                        ),
                      ],
                    ),
                  ),
                ),
                Stack(
                  alignment: Alignment.center,
                  children: <Widget>[
                    Positioned(
                      bottom: 0,
                      child: FlatButton(
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(12),
                        ),
                        padding: EdgeInsets.symmetric(
                            vertical: 12,
                            horizontal: MediaQuery.of(context).size.width / 4),
                        textTheme: ButtonTextTheme.primary,
                        color: Colors.redAccent,
                        onPressed: () {},
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: <Widget>[
                            Text(
                              "Call Now",
                              style: TextStyle(
                                fontSize: 18,
                                fontWeight: FontWeight.bold,
                              ),
                            ),
                            SizedBox(
                              width: 8,
                            ),
                            Icon(Icons.call),
                          ],
                        ),
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
          Expanded(
            child: Padding(
              padding:  EdgeInsets.symmetric(vertical: 8, horizontal: 8),
              child: Container(
                width: double.infinity,
                decoration: BoxDecoration(
                  color: Colors.blueGrey.withOpacity(0.3),
                ),
                child: ListView(
                  shrinkWrap: true,
                  children: <Widget>[
                    ListTile(
                      onTap: () {},
                      title: Text("Data"),
                    ),
                    ListTile(
                      onTap: () {},
                      title: Text("Data"),
                    ),
                    ListTile(
                      onTap: () {},
                      title: Text("Data"),
                    ),
                    ListTile(
                      onTap: () {},
                      title: Text("Data"),
                    ),
                    ListTile(
                      onTap: () {},
                      title: Text("Data"),
                    ),
                    ListTile(
                      onTap: () {},
                      title: Text("Data"),
                    ),
                    ListTile(
                      onTap: () {},
                      title: Text("Data"),
                    ),
                    ListTile(
                      onTap: () {},
                      title: Text("Data"),
                    ),
                  ],
                ),
              ),
            ),
          )
        ],
      ),
    );
  }
}

OUTPUT

Solution 2

Unfortunately I can't test it on right now because I am typing on phone, but this should work, you need to make Expanded direct child of Column, and you can give padding inside ListView.

Replace:

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: <Widget>[
    BuildHeaderPage(bgroundHeaderColor: bgroundHeaderColor),
    Padding( // wrong
      padding: new EdgeInsets.symmetric(vertical: 8, horizontal: 8),
      child: Expanded(...),
    ),
  ],
)

with

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: <Widget>[
    BuildHeaderPage(bgroundHeaderColor: bgroundHeaderColor),
    Expanded(child: ListView(...)) // right
  ],
)

Comments

[CopsOnRoad]

Make Expanded direct child of Column, don't add Padding first, add it later on

[Visal Sambo]

I tried ur code and it worked. But I wonder when I wrapped Expanded widget with Padding widget it does not show any content in ListView.

[CopsOnRoad]

Yes, you can't set padding above ListView, it will again destroy the purpose, why don't you simply add padding in ListView itself, this way you will prevent yourself from adding one widget Padding, do this ListView(padding: EdgeInsets.all(8))

[Visal Sambo]

Thanks for an explanation. Will try that one.