How to place a Text/ListTile widget (inside Drawer) at the very bottom of the phone screen

Question

So my problem is very simple but I had a bit of trouble with it. I want my Text/ListTile to be at the very bottom of Drawer, it something like a copyright statement but the thing is I can't bring it to the bottom since it always place it below the last widget (if any).

image

my code:

const Expanded(
              child: Align(
                  alignment: FractionalOffset.bottomCenter,
                  child: ListTile(
                    title: Text(
                      'Hak Cipta \u00a9 2022 Jabatan Perikanan Malaysia',
                      style: TextStyle(color: Colors.black45, fontSize: 12),
                      textAlign: TextAlign.center,
                    ),
                  )),
            )

I heard using Spacer() or Divider() will work but those only work for certain phone meaning if I make Spacer/Divider(top: 300), it will show at the very bottom of the Drawer for my phone only but not for different resolution phone than mine.

full code:

drawer: Container(
      width: 230,
      child: Drawer(
        elevation: 0,
        shape: const RoundedRectangleBorder(
          borderRadius: BorderRadius.vertical(
            bottom: Radius.circular(22),
            top: Radius.circular(22),
          ),
        ),
        child: ListView(
          padding: EdgeInsets.zero,
          children: <Widget>[
            DrawerHeader(
              child: Text(''),
              decoration: BoxDecoration(color: Colors.blue[900]),
            ),
            ListTile(
              title: const Text('Profile Pengguna'),
              onTap: () {
                Navigator.of(context).pushReplacement(MaterialPageRoute(
                    builder: (context) =>
                        HomePage(username: widget.username2)));
              },
            ),
            ListTile(
              title: const Text('Senarai Kursus'),
              onTap: () {
                Navigator.of(context).pushReplacement(MaterialPageRoute(
                    builder: (context) =>
                        KursusList(username: widget.username2)));
              },
            ),
            ListTile(
              title: const Text('Transaksi Kursus'),
              onTap: () {
                Navigator.of(context).pushReplacement(MaterialPageRoute(
                    builder: (context) =>
                        TransaksiKursus(username: widget.username2)));
              },
            ),
            ListTile(
              title: const Text('Log Keluar'),
              onTap: () {
                Navigator.of(context).pushAndRemoveUntil(
                    MaterialPageRoute(builder: (context) => LoginDemo()),
                    (Route route) => false);
              },
            ),
            const Spacer(),
            const Expanded(
              child: Align(
                  alignment: FractionalOffset.bottomCenter,
                  child: ListTile(
                    dense: true,
                    visualDensity: VisualDensity(vertical: -4),
                    title: Text(
                      'Hak Cipta \u00a9 2022 Jabatan Perikanan Malaysia',
                      style: TextStyle(color: Colors.black45, fontSize: 12),
                      textAlign: TextAlign.center,
                    ),
                  )),
            )
          ],
        ),
      ),
    ),

I received also Incorrect use of ParentDataWidget. inside Debug Console. I dont know if this has anything to do with the problem I have right now but it worth mentioning

Answer 1

Try below code I think remove Spacer from your code. Add your extra code in my code

drawer: Container(
    width: 250,
    child: Drawer(
      //drawer Code
      child: Column(
        children: <Widget>[
          ListTile(
            hoverColor: Colors.blue,
            dense: true,
            visualDensity: VisualDensity(vertical: -4),
            title: Text('Profile Pengguna'),
            onTap: () {},
          ),
          Divider(
            color: Colors.grey,
          ),
          ListTile(
            dense: true,
            visualDensity: VisualDensity(vertical: -4),
            title: Text('Senarai Kursus'),
            onTap: () {},
          ),
          Divider(
            color: Colors.grey,
          ),
          ListTile(
            dense: true,
            visualDensity: VisualDensity(vertical: -4),
            title: Text('Transaksi Kursus'),
            onTap: () {},
          ),
          Divider(
            color: Colors.grey,
          ),
          ListTile(
            dense: true,
            visualDensity: VisualDensity(vertical: -4),
            title: Text('Log Keluar'),
            onTap: () {},
          ),
          Divider(
            color: Colors.grey,
          ),
          Expanded(
            child: Align(
              alignment: FractionalOffset.bottomCenter,
              child: ListTile(
                dense: true,
                visualDensity: VisualDensity(vertical: -4),
                title: Text(
                  'Hak Cipta \u00a9 2022 Jabatan Perikanan Malaysia',
                  style: TextStyle(color: Colors.black45, fontSize: 12),
                  textAlign: TextAlign.center,
                ),
                onTap: () {},
              ),
            ),
          ),
        ],
      ),
    ),
  ),

Result screen->

Refer this answer also

Answer 2

Try this:-

const Expanded(
          child: SizedBox(),
        ),
ListTile(
    title: Text(
    Hak Cipta \u00a9 2022 Jabatan Perikanan Malaysia',
    style: TextStyle(color: Colors.black45, fontSize: 12),
    textAlign: TextAlign.center,
                    ),

Answer 3

Make Widget in your Drawer that contains child:Column() and in your parameter CrossAxisAlignment crossAxisAlignment: CrossAxisAlignment.center .

Answer 4

Use Expanded

    drawer:  Drawer(
        
        // Add a ListView to the drawer. This ensures the user can scroll
        // through the options in the drawer if there isn't enough vertical
        // space to fit everything.
                  child: Column(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      mainAxisSize: MainAxisSize.max,
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: <Widget>[
                        Expanded(
                            child: ListView(
        
                                padding: EdgeInsets.zero,
                                children: <Widget>[
                                  ListTile(
                                    title: Row(
                                      children: <Widget>[
                                        Padding(
                                          padding: EdgeInsets.only(left: 0.0),
                                          child: Text("text1"),
                                        )
                                      ],
                                    ),
        
                                  )
                                ]
                            )
                        ),
                        Container(
                          color: Colors.red,
        
                          padding: EdgeInsets.all(10.0),
                          child:
        
        
                          Row (
                            mainAxisSize: MainAxisSize.max,
                            crossAxisAlignment: CrossAxisAlignment.center,
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
        
                            children : <Widget> [
        
        
                              Text(" Hak Cipta \u00a9 2022 Jabatan Perikanan Malaysia"
                              )
        
                            ]
        
        
        
                            ,
                          ),
        
        
                        )
                     

 ])),