flutterdrawerlisttile

Problem with adding line in drawer on the bottom


I've tried to add one of the lines at the bottom of my drawer but it doesn't work. Here's my drawer code:

drawer: Drawer(
          child: ListView(
            padding: EdgeInsets.zero,
            children: [
              SizedBox(
                height: 127,
                child: DrawerHeader(
                  decoration: BoxDecoration(color: Colors.amber[400]),
                  child: const Text(
                    'Train Me',
                    style: TextStyle(fontSize: 28),
                  ),
                ),
              ),
              const ListTile(
                title: Text(
                  'Witaj, Kuba',
                  style: TextStyle(fontSize: 20),
                ),
              ),
              Divider(
                color: Colors.grey,
                thickness: 1,
              ),
              ListTile(
                title: const Text.rich(TextSpan(children: [
                  WidgetSpan(
                    child: Icon(Icons.settings, size: 22),
                  ),
                  TextSpan(text: ' Ustawienia', style: TextStyle(fontSize: 20))
                ])),
                onTap: () {},
              ),
              Divider(
                color: Colors.grey,
                thickness: 1,
              ),
              Expanded(
                child: Align(
                  alignment: FractionalOffset.bottomLeft,
                  child: ListTile(
                    title: const Text.rich(TextSpan(children: [
                      WidgetSpan(
                        child: Icon(Icons.info_outline, size: 22),
                      ),
                      TextSpan(text: ' About', style: TextStyle(fontSize: 20))
                    ])),
                    onTap: () {},
                  ),
                ),
              ),
            ],
          ),
        )

I've tried to solve it with Align and Expanded widgets


Solution

  • It seems like you're trying to add a "About" ListTile at the bottom of the drawer using an Align and Expanded widget. However, the problem is that the ListView in your Drawer has a fixed height and is not scrollable, which means that the Expanded widget won't work as expected.

    To fix this issue, you can replace the Expanded widget with a SizedBox and set its height to a fixed value that will accommodate your "About" ListTile. Here's the modified code that should work for you:

    drawer: Drawer(
      child: ListView(
        padding: EdgeInsets.zero,
        children: [
          SizedBox(
            height: 127,
            child: DrawerHeader(
              decoration: BoxDecoration(color: Colors.amber[400]),
              child: const Text(
                'Train Me',
                style: TextStyle(fontSize: 28),
              ),
            ),
          ),
          const ListTile(
            title: Text(
              'Witaj, Kuba',
              style: TextStyle(fontSize: 20),
            ),
          ),
          Divider(
            color: Colors.grey,
            thickness: 1,
          ),
          ListTile(
            title: const Text.rich(TextSpan(children: [
              WidgetSpan(
                child: Icon(Icons.settings, size: 22),
              ),
              TextSpan(text: ' Ustawienia', style: TextStyle(fontSize: 20))
            ])),
            onTap: () {},
          ),
          Divider(
            color: Colors.grey,
            thickness: 1,
          ),
          SizedBox(
            height: 60, // set the height to a fixed value
            child: Align(
              alignment: FractionalOffset.bottomLeft,
              child: ListTile(
                title: const Text.rich(TextSpan(children: [
                  WidgetSpan(
                    child: Icon(Icons.info_outline, size: 22),
                  ),
                  TextSpan(text: ' About', style: TextStyle(fontSize: 20))
                ])),
                onTap: () {},
              ),
            ),
          ),
        ],
      ),
    ),
    

    In the modified code, I replaced the Expanded widget with a SizedBox that has a fixed height of 60. This should give you enough space to accommodate your "About" ListTile at the bottom of the drawer. I also removed the child from the Expanded widget and replaced it with the ListTile wrapped in an Align widget.