Flutter Bottom overflowed by xx pixel

Question

I am trying to construct a page with multiple widgets Row, Column, Expanded, ListView, etc...

I am a bit confused. I want a page scrollable with my widgets ThemeList. I have the error :

A RenderFlex overflowed by 28 pixels on the bottom.

class SettingsViewState extends State<SettingsView> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      drawer: const NavDrawer(),
      appBar: AppBar(
        title: Text(AppLocalizations.of(context)!.settingsTitle),
        backgroundColor: Theme.of(context).primaryColor,
      ),
      body: CustomScrollView(slivers: [
        SliverFillRemaining(
          child: Column(
            children: const [
              ThemeList(),
              SizedBox(height: 8),
              ThemeList(),
              SizedBox(height: 8),
              ThemeList(),
            ],
          ),
        ),
      ]),
    );
  }
}

class ThemeList extends StatelessWidget {
  const ThemeList({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: Padding(
        padding: const EdgeInsets.all(10),
        child: Container(
          decoration: BoxDecoration(
            border: Border.all(color: Theme.of(context).primaryColor, width: 2),
            borderRadius: BorderRadius.circular(10),
          ),
          child: Column(
            children: <Widget>[
              Row(
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.only(top: 5, left: 20),
                    child: Text(
                      AppLocalizations.of(context)!.settingsThemeSubTitle,
                      style: const TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 23,
                      ),
                    ),
                  )
                ],
              ),
              ListView.builder(
                shrinkWrap: true,
                padding: const EdgeInsets.all(8),
                itemCount: AppTheme.values.length,
                itemBuilder: (context, index) {
                  final itemAppTheme = AppTheme.values[index];
                  var nameTheme = itemAppTheme.toString()
                  return Card(
                    color: appThemeData[itemAppTheme]?.primaryColor,
                    child: ListTile(
                      title: Text(
                        nameTheme,
                        style: appThemeData[itemAppTheme]?.textTheme.bodyText1,
                      ),
                      onTap: () {
                        BlocProvider.of<ThemeBloc>(context).add(
                          ThemeChanged(theme: itemAppTheme),
                        );
                        Preferences.saveTheme(itemAppTheme);
                      },
                    ),
                  );
                },
              )
            ],
          ),
        ),
      ),
    );
  }
}

Desired result :

Answer 1

Just wrap the ListView.builder() inside ThemeList with an Expanded and the problem would vanish.

---

If you want to have all the items inside each ThemeList displayed with a scroll for the whole screen then the easiest why is to do the following:

1. Change the CustomScrollView in the body of the Scaffold to be SingleChildScrollView with the Column as its child.
2. Remove the Expanded at the start of ThemeList.
3. Remove the ListView.builder() inside the ThemeList and replace it with any looping logic to directly render the cards, for example:

...AppTheme.values.map((itemAppTheme) {
  var nameTheme = itemAppTheme.toString();
  return Card(
    color: appThemeData[itemAppTheme]?.primaryColor,
    child: ListTile(
      title: Text(
        nameTheme,
        style: appThemeData[itemAppTheme]?.textTheme.bodyText1,
      ),
      onTap: () {
        BlocProvider.of<ThemeBloc>(context).add(
          ThemeChanged(theme: itemAppTheme),
        );
        Preferences.saveTheme(itemAppTheme);
      },
    ),
  );
}).toList()