Drawer with ListViewBuilder and Header in Flutter-CodePudding

I'm trying to make a drawer widget that uses a ListViewBuilder to populate itself based on a list injected into the ViewModel.

However, I'm having issues getting it to play ball.

I've wrapped the LVB in a SizedBox to provide it with vertical bounds (since it was throwing a bunch of errors, as suggeested by another answer, and that's stopped those, but now I'm getting an overflow.

The header also doesn't fill out the width anymore either.

class MainDrawer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Consumer<MainDrawerViewModel>(builder: (context, model, child) {
      return Drawer(
        child: Column(
          children: [
            DrawerHeader(
              decoration: const BoxDecoration(color: ThemeColors.primaryDark),
              child: Text(S.current.drawerTitle, style: const TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 30)),
            ),
            SizedBox(
              height: double.maxFinite,
              child: ListView.builder(
                    padding: EdgeInsets.zero,
                    itemCount: model.mainDrawerItems.length,
                    itemBuilder: (_, index) {
                      final drawerItem = model.mainDrawerItems[index];
                      return ListTile(
                        leading: drawerItem.icon,
                        title: Text(drawerItem.title, style: Theme.of(context).textTheme.headline6),
                        selected: model.currentScreen == drawerItem.screen,
                        selectedTileColor: ThemeColors.selectedDrawerItem,
                        onTap: () {
                          model.selectScreen(drawerItem.screen);
                          Navigator.pop(context);
                        },
                      );
                    }),
            ),
          ],
        ));
    });
  }
}

This feels like something that should be pretty easy... What am I missing here?

CodePudding user response：

Use Expanded widget on listView instead of height: double.maxFinite,

Expanded(
  child: ListView.builder(
      padding: EdgeInsets.zero,

double.maxFinite = 1.7976931348623157e 308; and it is equal to 1.7976931348623157 × 10^308 which is too big. and the overflow happens.

For header, you can wrap With SizedBox and provide width: double.maxFinite,. Also you can just use a container with decoration like

class MainDrawer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Drawer(
        child: Column(
      children: [
        Container(
          width: double.maxFinite,
          height: 200, // based on your need
          decoration: const BoxDecoration(color: Colors.amber),
          padding: EdgeInsets.only(left: 16, top: 16),
          child: Text(
            "S.cu ",
            style: TextStyle(
                color: ui.Color.fromARGB(255, 203, 19, 19),
                fontWeight: FontWeight.bold,
                fontSize: 30),
          ),
        ),
        Expanded(
          child: ListView.builder(
              padding: EdgeInsets.zero,
              itemCount: 3,
              itemBuilder: (_, index) {
                return ListTile(
                  leading: Icon(Icons.abc_outlined),
                  title: Text("drawerItem.title",
                      style: Theme.of(context).textTheme.headline6),
                  selected: true,
                  onTap: () {},
                );
              }),
        ),
      ],
    ));
  }
}