Flutter Question posted in
The official Flutter documentation can be found here.

How do I fit a ListView in a Card without overflowing the screen in Flutter?

I am building a personal use mobile application. In this page I want to have a few Cards, and one of these cards holds an AppBar and a ListView.builder(). Ideally, once the list gets too big, the ListView is scrollable. Here’s two screenshots.

I have tried wrapping my different components in Centers, Flexibles and whatevers but I’m out of my depth with this.

Here’s the code of this page:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:timetablepp/objectbox.g.dart';

class DashboardPage extends StatefulWidget {
  const DashboardPage({super.key});

  @override
  State<DashboardPage> createState() => _DashboardPageState();
}

class _DashboardPageState extends State<DashboardPage> {
  @override
  Widget build(BuildContext context) {
    AppBar dashboardAppBar = AppBar(
      title: Text('Main Page'),
      backgroundColor: Colors.blue[100],

      /*actions: <Widget>[
    PopupMenuButton(itemBuilder: itemBuilder)
  ],*/
    );

    Card upcomingCard = Card(
      margin: const EdgeInsets.all(20.0),
      color: Colors.white,
      elevation: 2.0,
      child: ListTile(
        isThreeLine: true,
        title: Text("Upcoming"),
        subtitle: Text(
            "TODO overdue tasks, TODO due today, TODO due tomorrownTODO upcoming TasksnTODO upcoming exams"),
      ),
    );

    Card subjectsCard = Card(
      margin: const EdgeInsets.all(20.0),
      color: Colors.white,
      elevation: 2.0,
      child: Column(
        children: [
          AppBar(
            title: Text("Subjects"),
          ),
          SingleChildScrollView(
            child: Column(
              children: [
                ListView.builder(
                    shrinkWrap: true,
                    itemCount: 8, 
                    itemBuilder: (context, index) {
                      return ListTile(
                        title: Text("TODO $index"),
                      );
                    })
              ],
            ),
          )
        ],
      ),
    );

    return Scaffold(
      backgroundColor: Colors.grey[100],
      appBar: dashboardAppBar,
      body: Column(
        children: [
          Center(
            child: upcomingCard,
          ),
          Center(
            child: subjectsCard,
          )
        ],
      ),
    );
  }
}
Tags:

2

Answers


  1. 0

    Use a SingleChildScrollView for the main body and ensure the ListView.builder() inside the card scrolls independently.

    Scaffold(
  backgroundColor: Colors.grey[100],
  appBar: dashboardAppBar,
  body: SingleChildScrollView(
    child: Column(
      children: [
        Center(
          child: upcomingCard,
        ),
        Center(
          child: subjectsCard,
        ),
      ],
    ),
  ),
);
    Login or Signup to reply.
  2. 0

    Try below code

    return Scaffold(
      backgroundColor: Colors.grey[100],
      appBar: dashboardAppBar,
      body: Column(
            children: [
              Center(
                child: upcomingCard,
              ),
              Expanded(
                child: Center(
                  child: subjectsCard,
                ),
              )
            ],
          ),
    );

    And your ListView like below

    ListView.builder(
      physics: NeverScrollableScrollPhysics(),
        shrinkWrap: true,
        itemCount: 8,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text("TODO $index"),
          );
        }),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search