Alena
Alena

Reputation: 1214

Flutter: How to set Drawer Header width to the max?

I'm adding Drawer in my application, and following official guideline. And I wanted to divide Drawer in three sections:

  1. Drawer Header (at the top)

  2. Some items

  3. Settings (at the bottom)

If I have ListView as a direct child of Drawer then it works fine, but I am unable to add Settings section at the bottom. I found this, It meets my requirement but DrawerHeader does not take maximum width.

Here is my code:

      Drawer(
            elevation: 1.5,
            child: Column(children: <Widget>[
              DrawerHeader(
                  decoration: BoxDecoration(
                color: Colors.redAccent,
              )),
              Expanded(
                  child: ListView(
                padding: EdgeInsets.zero,
                children: <Widget>[
                  //list tiles
                ],
              )),
              Container(
                color: Colors.black,
                width: double.infinity,
                height: 0.1,
              ),
              Container(
                  padding: EdgeInsets.all(10),
                  height: 100,
                  child: Text("V1.0.0",style: TextStyle(fontWeight: FontWeight.bold),)),
            ])),

By default, the Drawer Header width is not maximum. It adjusts according to content size, and if I increase font size or add padding on left and right side, then it takes more width.

Check below image for reference:

enter image description here

Upvotes: 4

Views: 10530

Answers (3)

Lucas Matos
Lucas Matos

Reputation: 576

I made one like this

enter image description here

Drawer(
        child: ListView(
          children: <Widget>[
            UserAccountsDrawerHeader(
              decoration: BoxDecoration(
                color: new Color(0xFF0062ac),
              ),
              accountName: Text("Marcelo Augusto Elias"),
              accountEmail: Text("Matrícula: 5046850"),
              currentAccountPicture: CircleAvatar(
                backgroundColor:
                    Theme.of(context).platform == TargetPlatform.iOS
                        ? new Color(0xFF0062ac)
                        : Colors.white,
                child: Icon(
                  Icons.person,
                  size: 50,
                ),
              ),
            ),
            ListTile(
              dense: true,
              title: Text("Alternar Matrícula"),
              leading: new Image.asset(
                "assets/images/icon_alterna_matricula.png",
                width: 20.0,
              ),
            ),
            ListTile(onTap: (){
              Navigator.pop(context);
              Navigator.push(
                context,
                MaterialPageRoute(
                    builder: (context) => Contracheques()),
              );
            },
              dense: true,
              title: Text("Contracheque"),
              leading: new Image.asset(
                "assets/images/icon_contracheque.png",
                width: 20.0,
              ),
            ),
            ListTile(onTap: (){
              Navigator.pop(context);
              Navigator.push(
                context,
                MaterialPageRoute(
                    builder: (context) => AutorizacaoEmprestimos()),
              );
            },
              dense: true,
              title: Text("Autorização"),
              leading: new Image.asset(
                "assets/images/icon_autorizacao.png",
                width: 20.0,
              ),
            ),
            ListTile(onTap: (){

            },
              dense: true,
              title: Text("Gráficos/Relatórios"),
              leading: new Image.asset(
                "assets/images/icon_grafico.png",
                width: 20.0,
              ),
            ),
            ListTile(onTap: (){
              Navigator.pop(context);
              Navigator.push(
                context,
                MaterialPageRoute(
                    builder: (context) => HistoricoConsignacoes()),
              );
            },
              dense: true,
              title: Text("Consignações"),
              leading: new Image.asset(
                "assets/images/icon_consignacao.png",
                width: 20.0,
              ),
            ),
            ListTile(onTap: (){
              Navigator.pop(context);
              Navigator.push(
                context,
                MaterialPageRoute(
                    builder: (context) => ConsultaMargem()),
              );
            },
              dense: true,
              title: Text("Consulta de Margem"),
              leading: new Image.asset(
                "assets/images/icon_consulta_margem.png",
                width: 20.0,
              ),
            ),
            /* ListTile(
              dense: true,
              title: Text("Informe de Rendimentos"),
              leading: new Image.asset(
                "assets/images/icon_rendimento.png",
                width: 20.0,
              ),
            ), */
            ListTile(onTap: (){
              Navigator.pop(context);
              Navigator.push(
                context,
                MaterialPageRoute(
                    builder: (context) => SimularEmprestimos()),
              );
            },
              dense: true,
              title: Text("Simular Empréstimo"),
              leading: new Image.asset(
                "assets/images/Icon_cal.png",
                width: 20.0,
              ),
            ),
            Divider(),
            ListTile(
              dense: true,
              title: Text("Compartilhar"),
              leading: new Image.asset(
                "assets/images/icon_compartilhar.png",
                width: 20.0,
              ),
            ),
            ListTile(
              dense: true,
              title: Text("Avaliar"),
              leading: new Image.asset(
                "assets/images/icon_estrela.png",
                width: 20.0,
              ),
            ),
            Divider(),
            ListTile(onTap: (){
              Navigator.pop(context);

            },
              dense: true,
              title: Text("Sair"),
              trailing: Text(
                "Versão 2.0",
                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 12),
              ),
              leading: new Image.asset(
                "assets/images/icon_porta_sair.png",
                width: 20.0,
              ),
            ),
          ],
        ),
      )

I did an update on the code and the drawer was like this:

Drawer(
              child: Column(
                mainAxisAlignment: MainAxisAlignment
                    .spaceBetween, // place the logout at the end of the drawer
                children: <Widget>[
                  Flexible(
                    child: ListView(
                      shrinkWrap: true,
                      children: <Widget>[
                        UserAccountsDrawerHeader(
                          decoration: BoxDecoration(
                            color: myColour,
                          ),
                          accountName: Padding(
                            child: Row(
                              children: <Widget>[
                                Text("Marcelo Augusto Elias"),
                                IconButton(
                                  icon: Icon(
                                    Icons.edit,
                                    color: whiteColour,
                                  ),
                                  onPressed: () {},
                                ),
                              ],
                            ),
                            padding: EdgeInsets.only(top: 10),
                          ),
                          accountEmail: Text("N° Cartão: XXXX XXXX XXXX 5154"),
                          currentAccountPicture: CircleAvatar(
                            backgroundColor:
                                Theme.of(context).platform == TargetPlatform.iOS
                                    ? myColour
                                    : Colors.white,
                            child: Icon(
                              Icons.person,
                              size: 50,
                            ),
                          ),
                        ),
                        ListTile(
                          dense: true,
                          title: Text("Fatura"),
                          leading: new Image.asset(
                            "assets/images/icon_fatura_barra_menu.png",
                            width: 20.0,
                          ),
                          onTap: () {
                            Navigator.pop(context);
                            Navigator.push(
                              context,
                              MaterialPageRoute(builder: (context) => Fatura()),
                            );
                          },
                        ),
                        ListTile(
                          onTap: () {
                            Navigator.pop(context);
                            Navigator.push(
                              context,
                              MaterialPageRoute(
                                  builder: (context) => ConsultaMargem()),
                            );
                          },
                          dense: true,
                          title: Text("Extrato"),
                          leading: new Image.asset(
                            "assets/images/icon_barra_menu_extrato.png",
                            width: 20.0,
                          ),
                        ),
                        ListTile(
                          onTap: () {
                            Navigator.pop(context);
                            Navigator.push(
                              context,
                              MaterialPageRoute(
                                  builder: (context) =>
                                      DesbloquearPrimeiraVia()),
                            );
                          },
                          dense: true,
                          title: Text("Desbloquear Cartão"),
                          leading: new Image.asset(
                            "assets/images/icon_barra_menu_desbloquearcartao.png",
                            width: 24.0,
                          ),
                        ),
                        ListTile(
                          dense: true,
                          title: Text("Meu Cartão"),
                          leading: new Image.asset(
                            "assets/images/icon_barra_menu_meucartao.png",
                            width: 20.0,
                          ),
                          onTap: () {
                            Navigator.pop(context);
                            Navigator.push(
                              context,
                              MaterialPageRoute(
                                  builder: (context) => Contracheques()),
                            );
                          },
                        ),
                        ListTile(
                          onTap: () {
                            Navigator.pop(context);
                            Navigator.push(
                              context,
                              MaterialPageRoute(
                                  builder: (context) =>
                                      HistoricoConsignacoes()),
                            );
                          },
                          dense: true,
                          title: Text("Adiantamento Salarial"),
                          leading: new Image.asset(
                            "assets/images/icon_barra_menu_adiantamentosalarial.png",
                            width: 20.0,
                          ),
                        ),
                        /* ListTile(
                    onTap: () {
                      Navigator.pop(context);
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                            builder: (context) => ConsultaMargem()),
                      );
                    },
                    dense: true,
                    title: Text("Consulta de Margem"),
                    leading: new Image.asset(
                      "assets/images/icon_consulta_margem.png",
                      width: 20.0,
                    ),
                  ), */
                        /* ListTile(
              dense: true,
              title: Text("Informe de Rendimentos"),
              leading: new Image.asset(
                "assets/images/icon_rendimento.png",
                width: 20.0,
              ),
            ), */
                        /* ListTile(
                    onTap: () {
                      Navigator.pop(context);
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                            builder: (context) => SimularEmprestimos()),
                      );
                    },
                    dense: true,
                    title: Text("Simular Empréstimo"),
                    leading: new Image.asset(
                      "assets/images/Icon_cal.png",
                      width: 20.0,
                    ),
                  ), */
                        Divider(),
                        ListTile(
                          dense: true,
                          title: Text("Compartilhar"),
                          leading: new Image.asset(
                            "assets/images/icon_compartilhar.png",
                            width: 20.0,
                          ),
                        ),
                        ListTile(
                          dense: true,
                          title: Text("Avaliar"),
                          leading: new Image.asset(
                            "assets/images/icon_estrela.png",
                            width: 20.0,
                          ),
                        ),
                        Divider(),
                      ],
                    ),
                  ),
                  ListTile(
                    onTap: () {
                      Navigator.pop(context);
                    },
                    dense: true,
                    title: Text("Sair"),
                    trailing: Text(
                      "Versão 2.0",
                      style:
                          TextStyle(fontWeight: FontWeight.bold, fontSize: 12),
                    ),
                    leading: new Image.asset(
                      "assets/images/icon_porta_sair.png",
                      width: 20.0,
                    ),
                  ),
                ],
              ),
            )

enter image description here

You have to put a ListTile below ListView and ListView inside Flexible

Upvotes: 6

Yahya Abunada
Yahya Abunada

Reputation: 175

[enter image description here]

 InkWell(
              onTap: () => debugPrint("home Page"),
              child: ListTile(
                title: Text("Home Page"),
                leading: Icon(Icons.home,color: Colors.red,),
              ),
            ),
            InkWell(
              onTap: () => debugPrint("My Account"),
              child: ListTile(
                title: Text("My Account"),
                leading: Icon(Icons.person,color: Colors.red,),
              ),
            ),
            InkWell(
              onTap: () => debugPrint("My Orders"),
              child: ListTile(
                title: Text("My Orders"),
                leading: Icon(Icons.shopping_basket,color: Colors.red,),
              ),
            ),
            InkWell(
              onTap: () {
//                Navigator.push(context, MaterialPageRoute(builder: (context)=> new ))
              },
              child: ListTile(
                title: Text("Shopping cart"),
                leading: Icon(Icons.shopping_cart,color: Colors.red,),
              ),
            ),
            InkWell(
              onTap: () => debugPrint("Favorite"),
              child: ListTile(
                title: Text("Favorite"),
                leading: Icon(Icons.favorite,color: Colors.red,),
              ),
            ),
            Divider(color: Colors.black,indent: 10.0,endIndent: 58.0,),
            InkWell(
              onTap: () => debugPrint("Setting"),
              child: ListTile(
                title: Text("Favorite"),
                leading: Icon(Icons.settings,color: Colors.green,),
              ),
            ),
            InkWell(
              onTap: () => debugPrint("Help"),
              child: ListTile(
                title: Text("Help"),
                leading: Icon(
                  Icons.help,
                  color: Colors.blue,
                ),
              ),
            ),
          ],
        ),
      ),

Upvotes: 0

Kailash Chouhan
Kailash Chouhan

Reputation: 2386

Try changing your DrawerHeader to given below

 DrawerHeader(
          padding: EdgeInsets.all(0),
          child: Container(
            color: Colors.redAccent,
          ),
        ),

enter image description here

Upvotes: -1

Related Questions