Flutter ListView Builder scroll whole screen

Issue

I need help implementing a whole screen scroll using ListView.Builder

Problem is that currently I'm forced to add a fixed height of 300 to the parent Container. This works fine but it is not really the behavior that I want.

With help from the comunnity I finally got it to work I'm updating my code here so that others can see how I got it work

Is there a way to fix or am I out of options?

expences_page.dart

class ExpensesPage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Row(
        children: <Widget>[
          /* Do not remove! */
          Expanded(child: Column(children: <Widget>[])),
          /* Do not remove! */
          Container(
            width: screenSize(context).width - Constants.minWidth,
            margin: EdgeInsets.symmetric(vertical: Constants.containerMargin),
            padding:
                EdgeInsets.symmetric(horizontal: Constants.containerPadding),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                TransactionsUser(),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

transaction_list.dart

class TransactionList extends StatelessWidget {
  final List<TransactionModel> transactions;

  TransactionList({Key key, this.transactions}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        ListView.builder(
          physics: NeverScrollableScrollPhysics(),
          shrinkWrap: true,
          itemBuilder: (ctx, index) {
            return Card(
              elevation: 5,
              child: Row(
                children: <Widget>[
                  Container(
                    margin: EdgeInsets.symmetric(
                      vertical: Constants.containerMargin,
                      horizontal: Constants.containerMargin,
                    ),
                    padding: EdgeInsets.all(Constants.containerPadding),
                    decoration: BoxDecoration(
                      border: Border.all(
                        color: Theme.of(context).primaryColor,
                        width: 1,
                      ),
                      borderRadius: BorderRadius.only(
                        topLeft: const Radius.circular(8.0),
                        bottomLeft: const Radius.circular(8.0),
                      ),
                    ),
                    // The Amount
                    child: Text(
                      '\$${transactions[index].amount}',
                      style: Theme.of(context)
                          .textTheme
                          .subhead
                          .apply(color: Theme.of(context).primaryColor),
                    ),
                  ),
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      // The Title
                      Text(
                        transactions[index].title,
                        style: Theme.of(context).textTheme.title.apply(
                              color: Theme.of(context).primaryColor,
                              decoration: TextDecoration.underline,
                            ),
                      ),
                      // The Date
                      Text(
                        DateFormat.yMMMd().format(transactions[index].date),
                        style: Theme.of(context).textTheme.caption.apply(
                              color: Theme.of(context).primaryColor,
                            ),
                      ),
                    ],
                  ),
                ],
              ),
            );
          },
          itemCount: transactions.length,
        ),
      ],
    );
  }
}

Solution

I presume you're using SingleChildScrollView with the combination of Column where it contains the ListView inside.

First you need to set ListView to occupy only the space required by setting

shrinkWrap: true

If you wish you disable the scrollview of the list and give control to SingleChildScrollView. You need to set scroll physics in ListView

physics: NeverScrollablePhysics()

Also giving the mainAxisSize to min in column sets the children to take up only required space.

You Widget tree should look like this.

SingleChildScrollView(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          ...
          Flexible(
           //replace your ListView containing widget here
            child: ListView.builder(
              itemCount:5,
              shrinkWrap: true,
              itemBuilder: (context, index) {
                return ListTile(title: Text("Index : $index"));
              },
            ),
          ),
        ],
      ),
    )

Answered By - user3555371