Flutter, Overflow in Drawer's DrawerHeader

Question

The problem may not be just for the Drawer or DrawerHeader widgets, but on how Expanded or Flexible may work inside a DrawerHeader widget combined with Column and Row widgets.

My code with my Drawer is simply like this:

import 'package:flutter/material.dart';

class PlanningDrawer extends StatefulWidget{
  const PlanningDrawer({Key? key}) : super(key: key);

  @override
  State<PlanningDrawer> createState() => _PlanningDrawerState();
}

class _PlanningDrawerState extends State<PlanningDrawer> {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        padding: EdgeInsets.zero,
        children: [
          DrawerHeader(
            decoration: const BoxDecoration(color: Colors.blue),
            child: Padding(
              padding: const EdgeInsets.only(bottom: 28),
              child: Column(
                children: [
                  Row(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Icon(Icons.calendar_month_outlined, size: 48,),
                      ),
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text("mPlanning", style: TextStyle(fontSize: 20),),
                            Text("Application description which may span over many lines")
                          ],
                        ),
                      )
                    ]
                  ),
                  Divider(color: Colors.black),
                  Text("Additional info comes here, which may span over many lines")
                ],
              ),
            )
          )
        ],
      )
    );
  }
}

And it looks like this when compiling to test on Google Chrome:

As you see I have two overflows.

The upper right one is linked to the long text describing my app, which I want to wrap into multiple lines, it may span many lines. I have tried to wrap it into Flexible, Expanded and some other suggested widgets, but found no luck yet.

The lower I am not sure which it is bound to, since it may be secondary (the long text there wraps nicely though, (not so well seen underneath the warning)).

Could someone please give me a working hint how to get both long texts wrapping ?

score 2 · Accepted Answer · answered Jul 29 '22 at 12:58

Use ListTile Widget instead of Row Widget Please check the below example

         class PlanningDrawer extends StatefulWidget {
          const PlanningDrawer({Key? key}) : super(key: key);

        @override
       State<PlanningDrawer> createState() => _PlanningDrawerState();
      }

  class _PlanningDrawerState extends State<PlanningDrawer> {
   @override
   Widget build(BuildContext context) {
   return Drawer(
     child: ListView(
      padding: EdgeInsets.zero,
       children: [
        DrawerHeader(
         decoration: const BoxDecoration(color: Colors.blue),
         child: Column(
          children: const [
            ListTile(
              title: Text(
                "mPlanning",
                style: TextStyle(fontSize: 20),
              ),
              subtitle: Text(
                  "Application description which may span over many 
                    lines"),
                leading: Icon(
                Icons.calendar_month_outlined,
                size: 48,
              ),
            ),
            Divider(color: Colors.black),
            Text(
                "Additional info comes here, which may span over many lines ")
          ],
        ),
      )
    ],
  ),
);

} }

score 1 · Answer 2 · answered Jul 29 '22 at 11:07

If you need more height, you might replace the DrawerHeader with a Column widget.

class PlanningDrawer extends StatefulWidget {
  const PlanningDrawer({Key? key}) : super(key: key);

  @override
  State<PlanningDrawer> createState() => _PlanningDrawerState();
}

class _PlanningDrawerState extends State<PlanningDrawer> {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        children: [
          Expanded(
            child: Container(
              color: Colors.blue,
              padding: EdgeInsets.all(8),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Flexible(
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Icon(
                          Icons.calendar_month_outlined,
                          size: 48,
                        ),
                        SizedBox(width: 10),
                        Expanded(
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Text(
                                "mPlanning",
                                style: TextStyle(fontSize: 20),
                              ),
                              Text(
                                "Application description which may span over many linesApplication description which may span over many linesApplication description which may span over many linesApplication description which may span over many linesApplication description which may span over many lines",
                                softWrap: true,
                              )
                            ],
                          ),
                        ),
                        //
                      ],
                    ),
                  ),
                  Divider(color: Colors.black),
                  Text(
                      "Additional info comes here, which may span ov info comes here, which may span ov info comes here, which may span ov info comes here, which may span ov info comes here, which may span ov info comes here, which may span over many lines")
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Try using SizedBox to have some space.

The default one with DrawerHeader Also, it provides default padding.

If it is ok to have like this max 2line description with title

You can follow this

class _PlanningDrawerState extends State<PlanningDrawer> {
  @override
  Widget build(BuildContext context) {
    return Drawer(
        child: ListView(
      padding: EdgeInsets.zero,
      children: [
        DrawerHeader(
          margin: EdgeInsets.zero,
          decoration: const BoxDecoration(color: Colors.blue),
          child: Column(
            children: [
              Expanded(
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Icon(
                      Icons.calendar_month_outlined,
                      size: 48,
                    ),
                    // sizedBOx if needed
                    SizedBox(
                      width: 10,
                    ),
                    Expanded(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            "mPlanning",
                            style: TextStyle(fontSize: 20),
                          ),
                          Expanded(
                            child: Text(
                              "Application which may span over many lines",
                              softWrap: true,
                              maxLines: 5,
                            ),
                          )
                        ],
                      ),
                    )
                  ],
                ),
              ),
              Divider(color: Colors.black),
              Text(
                  "Additional info comes here, which may span over many lines"),
              SizedBox(
                height: 28,
              )
            ],
          ),
        ),
      ],
    ));
  }
}

score 0 · Answer 3 · answered Jul 31 '22 at 08:20

After some more time, and of course both Muhammad Mohsin and Yeasin Sheikh's answers above I came upon a slight change in my code which solved both overflows.

In my fairly simple mind, I thought that DrawerHeader adjusted its height when more widgets where added, but no, you need to expand it manually or make some tweak to do just that.

For the width overflow, I need to wrap the Column which the "mPlanning" and "Application Description..." is placed, in an Expanded widget. Additional you need to put the DrawerHeader inside a SizedBox and constrain its height to some number (200 in this case). Now the DrawerHeader seems to prepare for constraints both in width and height as expected.

import 'package:flutter/material.dart';

class PlanningDrawer extends StatefulWidget{
  const PlanningDrawer({Key? key}) : super(key: key);

  @override
  State<PlanningDrawer> createState() => _PlanningDrawerState();
}

class _PlanningDrawerState extends State<PlanningDrawer> {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        padding: EdgeInsets.zero,
        children: [
          SizedBox(        //<-- Added 
            height: 200,   //<-- Fixed height
            child: DrawerHeader(
              decoration: const BoxDecoration(color: Colors.blue),
              child: Padding(
                padding: const EdgeInsets.only(bottom: 28),
                child: Column(
                  children: [
                    Row(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Icon(Icons.calendar_month_outlined, size: 48, color: Colors.white,),
                        ),
                        Expanded(    //<-- Added to let texts in here wrap if necessary.
                          child: Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Text("mPlanning", style: TextStyle(fontSize: 20, color: Colors.white)),
                                Text("Application description which may span over many lines", style: TextStyle(color: Colors.white),)
                              ],
                            ),
                          ),
                        )
                      ]
                    ),
                    Divider(color: Colors.white),
                    Text("Additional info comes here, which may span over many lines", style: TextStyle(color: Colors.white),)
                  ],
                ),
              )
            ),
          )
        ],
      )
    );
  }
}

And the result is now:

Flutter, Overflow in Drawer's DrawerHeader

3 Answers3