CODEWITHSUNDEEP
flutter
Kagimura
Kagimura

Reputation: 417

Getting Vertical viewport was given unbounded height using ListView inside Column

I want to add a list of Container inside a Column widget. 

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: <Widget>[
    fixedContainer(context),
),

  Widget fixedContainer(BuildContext context) {
    return ListView(
      children: <Widget>[
        FutureBuilder<List<AddCash>>(
          future: future,
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              return Column(
                  children:
                      snapshot.data.map((todo) => nameColumn(todo)).toList());
            } else {
              return SizedBox();
            }
          },
        ),
      ],
    );
  }

  Widget nameColumn(AddCash addCash) {
    return Container(
      alignment: Alignment.center,
      width: 120.0,
      height: 60.0,
      color: Colors.white,
      margin: EdgeInsets.all(4.0),
      child: Text(
        'name: ${addCash.name}',
      ),
    );
  }

It's getting an error saying Vertical viewport was given unbounded height. Do I need to set the height? I didn't set the height because I need to add the Container dynamically.

Entire Code

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

import '../data/repository_service_addcash.dart';
import '../models/addcash.dart';

class CalendarPage extends StatefulWidget {
  @override
  _CalendarPageState createState() => _CalendarPageState();
}

class _CalendarPageState extends State<CalendarPage> {
  Future<List<AddCash>> future;
  int id;
  @override
  initState() {
    super.initState();

    future = RepositoryServiceAddCash.getAllAddCash();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                //THE FIRST COLUMN NEEDS TO BY DYNAMICALLY PRODUCDED
                // nameColumnContainer(context),
                Container(
                  alignment: Alignment.center,
                  width: 120.0,
                  height: 60.0,
                  color: Colors.white,
                  margin: EdgeInsets.all(4.0),
                  child: Text(
                    "ONE",
                  ),
                ),
                Container(
                  alignment: Alignment.center,
                  width: 120.0,
                  height: 60.0,
                  color: Colors.white,
                  margin: EdgeInsets.all(4.0),
                  child: Text(
                    "TWO",
                  ),
                ),
                Container(
                  alignment: Alignment.center,
                  width: 120.0,
                  height: 60.0,
                  color: Colors.white,
                  margin: EdgeInsets.all(4.0),
                  child: Text(
                    "THREE",
                  ),
                ),
              ],
            ),
            Flexible(
              child: SingleChildScrollView(
                scrollDirection: Axis.horizontal,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Container(
                      child: Row(
                        // children: getDaysInWeek(),
                        children: <Widget>[
                          Container(
                            alignment: Alignment.center,
                            width: 120.0,
                            height: 60.0,
                            color: Colors.white,
                            margin: EdgeInsets.all(4.0),
                            child: Text(
                              "A",
                            ),
                          ),
                          Container(
                            alignment: Alignment.center,
                            width: 120.0,
                            height: 60.0,
                            color: Colors.white,
                            margin: EdgeInsets.all(4.0),
                            child: Text(
                              "B",
                            ),
                          ),
                          Container(
                            alignment: Alignment.center,
                            width: 120.0,
                            height: 60.0,
                            color: Colors.white,
                            margin: EdgeInsets.all(4.0),
                            child: Text(
                              "C",
                            ),
                          ),
                          Container(
                            alignment: Alignment.center,
                            width: 120.0,
                            height: 60.0,
                            color: Colors.white,
                            margin: EdgeInsets.all(4.0),
                            child: Text(
                              "D",
                            ),
                          ),
                        ],
                      ),
                    ),
                    Container(
                      child: Row(
                        children: <Widget>[
                          Container(
                            alignment: Alignment.center,
                            width: 120.0,
                            height: 60.0,
                            color: Colors.white,
                            margin: EdgeInsets.all(4.0),
                            child: Text(
                              "H",
                            ),
                          ),
                          Container(
                            alignment: Alignment.center,
                            width: 120.0,
                            height: 60.0,
                            color: Colors.white,
                            margin: EdgeInsets.all(4.0),
                            child: Text(
                              "F",
                            ),
                          ),
                          Container(
                            alignment: Alignment.center,
                            width: 120.0,
                            height: 60.0,
                            color: Colors.white,
                            margin: EdgeInsets.all(4.0),
                            child: Text(
                              "3000",
                            ),
                          ),
                          Container(
                            alignment: Alignment.center,
                            width: 120.0,
                            height: 60.0,
                            color: Colors.white,
                            margin: EdgeInsets.all(4.0),
                            child: Text(
                              "4000",
                            ),
                          ),
                        ],
                      ),
                    ),
                    Container(
                      alignment: Alignment.center,
                      width: 120.0,
                      height: 60.0,
                      color: Colors.white,
                      margin: EdgeInsets.all(4.0),
                      child: Text(
                        "two",
                      ),
                    ),
                  ],
                ),
              ),
            )
          ],
        ),
      ),
    );
  }

  Widget nameColumnContainer(BuildContext context) {
    return ListView(
      shrinkWrap: true,
      children: <Widget>[
        FutureBuilder<List<AddCash>>(
          future: future,
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              return Column(
                  children:
                      snapshot.data.map((todo) => nameColumn(todo)).toList());
            } else {
              return SizedBox();
            }
          },
        ),
      ],
    );
  }

  Widget nameColumn(AddCash addCash) {
    return Container(
      alignment: Alignment.center,
      width: 120.0,
      height: 60.0,
      color: Colors.white,
      margin: EdgeInsets.all(4.0),
      child: Text(
        'name: ${addCash.name}',
      ),
    );
  }
}

Upvotes: 1

Views: 208

Answers (1)

Pablo Barrera
Pablo Barrera

Reputation: 10963

You could set shrinkWrap: true to the ListView.

shrinkWrap property

If the scroll view does not shrink wrap, then the scroll view will expand to the maximum allowed size in the scrollDirection. If the scroll view has unbounded constraints in the scrollDirection, then shrinkWrap must be true.

Upvotes: 1

Related Questions