Search code examples
flutterdartflutter-listviewflutter-column

How to simulate Listview scrollability and pixel overflow control using the column widget?


I'm trying to use Spacer() within the children of Listview, but it's not working the way it should. So I changed to column, as the Spacer() works fine in it. However I can't come to a implementation that simulates the responsivity and pixel overflow control as the Listview using column. Is there a better way to do this?

Code with list view:

return Drawer(
  backgroundColor: CustomColours.vertraIce,
  child: ListView(
    padding: EdgeInsets.zero,
    children: [
      DrawerHeader(
        decoration: BoxDecoration(
          color: CustomColours.vertraBlue,
        ),
        child: const Image(
          image: AssetImage('assets/images/logo.webp'),
        ),
      ),
      ListTile(
        leading: const Icon(Icons.person),
        title: Text(
          'Perfil ',
          style: TextStyle(
            color: CustomColours.vertraBlack,
            fontSize: 20,
          ),
        ),
        onTap: () async {
          await Navigator.popAndPushNamed(context, '/');
        },
      ),
      ListTile(
        leading: const Icon(Icons.receipt_long),
        title: Text(
          'Notas',
          style: TextStyle(
            color: CustomColours.vertraBlack,
            fontSize: 20,
          ),
        ),
        onTap: () async {
          await Navigator.popAndPushNamed(context, '/receipt');
        },
      ),
      const Spacer(),
      const Divider(),
      ListTile(
        leading: const Icon(Icons.info_outlined),
        title: Text(
          'Sobre nós',
          style: TextStyle(
            color: CustomColours.vertraBlack,
            fontSize: 20,
          ),
        ),
        onTap: () async {
          _launchURL();
        },
      ),
      ListTile(
        leading: const Icon(Icons.logout),
        title: Text(
          'Sair',
          style: TextStyle(
            color: CustomColours.vertraBlack,
            fontSize: 20,
          ),
        ),
        onTap: () async {
          authFirebase.signOut();
        },
      ),
    ],
  ),
);

code with Column:

return Drawer(
  backgroundColor: CustomColours.vertraIce,
  child: Column(
    children: [
      DrawerHeader(
        decoration: BoxDecoration(
          color: CustomColours.vertraBlue,
        ),
        child: const Image(
          image: AssetImage('assets/images/logo.webp'),
        ),
      ),
      ListTile(
        leading: const Icon(Icons.person),
        title: Text(
          'Perfil ',
          style: TextStyle(
            color: CustomColours.vertraBlack,
            fontSize: 20,
          ),
        ),
        onTap: () async {
          await Navigator.popAndPushNamed(context, '/');
        },
      ),
      ListTile(
        leading: const Icon(Icons.receipt_long),
        title: Text(
          'Notas',
          style: TextStyle(
            color: CustomColours.vertraBlack,
            fontSize: 20,
          ),
        ),
        onTap: () async {
          await Navigator.popAndPushNamed(context, '/receipt');
        },
      ),
      const Spacer(),
      const Divider(),
      ListTile(
        leading: const Icon(Icons.info_outlined),
        title: Text(
          'Sobre nós',
          style: TextStyle(
            color: CustomColours.vertraBlack,
            fontSize: 20,
          ),
        ),
        onTap: () async {
          _launchURL();
        },
      ),
      ListTile(
        leading: const Icon(Icons.logout),
        title: Text(
          'Sair',
          style: TextStyle(
            color: CustomColours.vertraBlack,
            fontSize: 20,
          ),
        ),
        onTap: () async {
          authFirebase.signOut();
        },
      ),
    ],
  ),
);

Solution

  • If anyone still looking for the answer to my question, I solved it and here it is:

    You simply wrap the ListView with Expanded and put it as a child of a Column. Then the ListTile you want to be at the bottom has to be put was a child of Column. As seen in the code below:

    class MyListView extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
      return Column(
        children: <Widget>[
          Expanded(
            child: ListView.builder(
              itemCount: 20,
              itemBuilder: (BuildContext context, int index) {
                return ListTile(
                  title: Text('Item $index'),
                  onTap: () {
                    // Do something when the ListTile is tapped
                  },
                );
              },
            ),
          ),
          ListTile(
            title: Text('Bottom ListTile'),
            // Add your logic or functionality here
          ),
        ],
      );
     }
    }