How to make scrollable a card content?

Question

I'm creating a "simple" layout for my Flutter demo app, but I'm facing a problem with the layout.

The layout is compose of a Column with 2 children. These children are using the Card widget.

The first Card is shown without any problem, but the second is getting an overflowing error The overflowing RenderFlex has an orientation of Axis.vertical. and showing a black and yellow warn at the bottom of the second Card. How to make the second card scrollable ? Especially the content under Task title ?

I already tried to use a ListView Widget, also the SingleChildScrollView Widget without success, there is always an error. Also checked the Widget Srolling doc page on flutter.dev but without any idea about what to use...

Here is the code without a ListView or SingleChildScrollView, simple widget : (it use grouped_buttons: ^1.0.4 in pubspec.yml )

import 'package:flutter/material.dart';
import 'package:grouped_buttons/grouped_buttons.dart';

class HomePage extends StatefulWidget {
  String username = "Paris";

  HomePage({Key key, @required this.username}) : super(key: key);

  @override
  _HomePageState createState() => new _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
        title: new Text('Demo'),
      ),
      body: new Container(
        child: homeLayout(widget.username),
      ),
    );
  }
}

class _WeatherCard extends StatefulWidget {
  final String username;

  _WeatherCard({Key key, @required this.username}) : super(key: key);

  @override
  _WeatherCardState createState() {
    return new _WeatherCardState();
  }
}

class _WeatherCardState extends State<_WeatherCard> {
  @override
  Widget build(BuildContext context) {
    return new Card(
      child: new Container(
        margin: const EdgeInsets.only(top: 10.0, bottom: 10.0),
        child: new Column(
          children: <Widget>[
            new Text(
              widget.username,
              style: new TextStyle(
                fontSize: 40.0,
                fontWeight: FontWeight.w300,
              ),
            ),
            new Text(
              'July 29th 2019',
              style: new TextStyle(
                fontSize: 16.0,
                fontWeight: FontWeight.w300,
              ),
            ),
            new Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                new Text(
                  'Sunny',
                  style: new TextStyle(
                    fontSize: 22.0,
                    fontWeight: FontWeight.w300,
                  ),
                ),
                new Text(
                  ' 24°C',
                  style: new TextStyle(
                    fontSize: 22.0,
                    fontWeight: FontWeight.w300,
                  ),
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}

class _TasksCard extends StatefulWidget {
  @override
  _TasksCardState createState() {
    return new _TasksCardState();
  }
}

class _TasksCardState extends State<_TasksCard> {
  @override
  Widget build(BuildContext context) {
    return new Card(
      child: new Container(
        margin: const EdgeInsets.only(top: 10.0, bottom: 10.0),
        child: new Column(
          children: <Widget>[
            new Text(
              'Tasks',
              style: new TextStyle(
                fontSize: 26.0,
              ),
            ),
            new Row(
              children: <Widget>[
                new Expanded(child: new Divider()),
              ],
            ),
            new CheckboxGroup(
              labels: <String>[
                "Task 1",
                "Task 2",
                "Task 3",
                "Task 4",
                "Task 5",
                "Task 6",
                "Task 7",
                "Task 8",
                "Task 9",
                "Task 10",
                "Task 11",
                "Task 12",
                "Task 13",
                "Task 14",
                "Task 15",
                "Task 16",
                "Task 17",
                "Task 18",
                "Task 19",
                "Task 20",
                "Task 21",
              ],
              onChange: (bool isChecked, String label, int index) =>
                  print("isChecked: $isChecked   label: $label  index: $index"),
              onSelected: (List<String> checked) =>
                  print("checked: ${checked.toString()}"),
            ),
          ],
        ),
      ),
    );
  }
}

@override
Widget homeLayout(username) {
  return new Container(
    padding: const EdgeInsets.symmetric(
      vertical: 5.0,
      horizontal: 5.0,
    ),
    child: new Column(
      children: <Widget>[
        new _WeatherCard(username: username),
        new Expanded(
          child: new _TasksCard(),
        ),
      ],
    ),
  );
}

The tasks list should be scrollable. Maybe I think with the wrong layout type ?

Answer 1

It is Simple - in Your code - in class _TasksCard .

edit code as follow :

......
Expanded(
              child: SingleChildScrollView(
                child: new CheckboxGroup(
                  labels: <String>[
                    "Task 1",
                    "Task 2",
                    .....