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: [
      IconButton(
        icon: Icon(Icons.more_vert),
        onPressed: () {},
      )
    ],
  ),
  resizeToAvoidBottomInset: false,
  body: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      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: [
                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: [
      // buildAppBar(context),
      Padding(
        padding: const EdgeInsets.only(left: 16),
        child: Align(
          alignment: Alignment.topCenter,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              RichText(
                text: TextSpan(
                  children: [
                    TextSpan(
                      text: "Are you feeling sick?
",
                      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: [
          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: [
                  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.

user_7666442 · Answer

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: [
          IconButton(
            icon: Icon(Icons.more_vert),
            onPressed: () {},
          )
        ],
      ),
      resizeToAvoidBottomInset: false,
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          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: [
                // buildAppBar(context),
                Padding(
                  padding: const EdgeInsets.only(left: 16),
                  child: Align(
                    alignment: Alignment.topCenter,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: [
                        RichText(
                          text: TextSpan(
                            children: [
                              TextSpan(
                                text: "Are you feeling sick?
",
                                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: [
                    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: [
                            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: [
                    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

user_6618622 · Answer

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: [
    BuildHeaderPage(bgroundHeaderColor: bgroundHeaderColor),
    Padding( // wrong
      padding: new EdgeInsets.symmetric(vertical: 8, horizontal: 8),
      child: Expanded(...),
    ),
  ],
)

with

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

Flutter - Bottom Overflowed by number of pixels

2 Answers