SingleChildScrollView not working with multiple components in a Column - flutter

Question

I am having a problem in flutter. My screen is not scrolling. I have a few components using the Column feature to them it out one below each other but the simple scrolling feature is not working.

here is my code

 Widget buildContent() {
    int count = 0;

    if (incomeList == null) {
      incomeList = List<Income>();
    }
      return Column(
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            mainAxisSize: MainAxisSize.max,
            children: [
              Expanded(
                flex: 1,
                child: Column(
                  children: <Widget>[
                    Text(
                      "${widget.outstanding}",
                      textAlign: TextAlign.center,
                    ),
                    Padding(
                      padding: EdgeInsets.all(3.0),
                      child: Text(zeroAmount,
                          textAlign: TextAlign.center,
                          style: TextStyle(
                            color: Colors.green,
                          )),
                    ),
                  ],
                ),
              ),
              Container(width: 0.4, height: 40, color: Colors.black54),
              Expanded(
                flex: 1,
                child: Column(
                  children: [
                    Text(
                      "${widget.received_or_paid}",
                      textAlign: TextAlign.center,
                    ),
                    Padding(
                      padding: EdgeInsets.all(3.0),
                      child: Text(zeroAmount, textAlign: TextAlign.center,
                          style: TextStyle(color: Colors.green)),
                    ),
                  ],
                ),
              ),
              //Divider(color: Colors.black54),
            ],
          ),
          // SizedBox(height: 12), //padding
          Padding(
            padding: EdgeInsets.only(top: 12.0, left: 15.0, right: 15.0),
            child: Divider(
              height: 1,
              color: Colors.black54,
            ),
          ),
          IncomeTransaction(),
        ],
      );
}

 @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: TextSwitchAppBar(

          bottom: PreferredSize(
            child: _buildLayoutAttributesPage(),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          backgroundColor: colorPrimary,
          onPressed: () {
            Navigator.push(context,
                MaterialPageRoute(builder: (context) => getTransactionType()));
          },
          child: Icon(
            Icons.add,
          ),
        ),
        body: Container(
            //height: 1000,
            padding: EdgeInsets.symmetric(vertical: 16.0),
            child: buildContent()
        ),
      );
    }

below is the IncomeTransaction code

import 'package:flutter/material.dart';
import 'package:finsec/utils/colors.dart';
import 'package:finsec/utils/strings.dart';
import 'package:finsec/screens/transaction/text_switch_app_bar.dart';
import 'package:finsec/screens/transaction/row_column_layout_attributes.dart';
import 'package:finsec/widget/transaction_list_view.dart';
import 'package:finsec/screens/income/second_fragment.dart';
import 'package:finsec/screens/income/add_edit_income.dart';
import 'package:finsec/data/blocs/bloc_provider.dart';
import 'package:finsec/data/blocs/transaction_bloc.dart';
import 'package:finsec/screens/transaction/transaction_list.dart';
import 'package:finsec/data/db_provider.dart';
import 'package:sqflite/sqflite.dart';
import 'package:finsec/model/income/income.dart';
import 'package:finsec/widget/total_amount.dart';


class IncomeTransaction extends StatefulWidget {

  @override
  State<StatefulWidget> createState() {

    return IncomeTransactionState();
  }
}

class IncomeTransactionState extends State<IncomeTransaction> {

  DBProvider db = new DBProvider();
  List<Income> incomeList;
  int count = 0;

  @override
  Widget build(BuildContext context) {
    if (incomeList == null) {
      incomeList = List<Income>();
      updateListView();
      for(int i=0; i<incomeList.length; i++) {
        print('CATEGORY');
        print(this.incomeList[i].category);
      }
    }
    TextStyle titleStyle = Theme.of(context).textTheme.subhead;
    return 
            ListView.builder(
              shrinkWrap: true,
              itemCount: count,
              itemBuilder: (BuildContext context, int position) {
                return Column(
                    children: [
                      ListTile(
                        leading: CircleAvatar(
                          backgroundColor: Colors.yellow,
                          child: Icon(Icons.play_arrow),
                        ),

                        title: Text(this.incomeList[position].category,
                          style: titleStyle,),

                        // subtitle: Text(this.incomeList[position].payoutDate),

                        trailing: GestureDetector(
                          child: Icon(Icons.delete, color: Colors.grey,),
                          onTap: () {
                            _delete(context, incomeList[position]);
                          },
                        ),


                        onTap: () {
                          debugPrint("ListTile Tapped");
                          navigateToDetail(
                              this.incomeList[position], 'Edit Note');
                        },
                      )
                    ]
                );
              }
            );


  }

  // Returns the priority color
  Color getPriorityColor(int priority) {
    switch (priority) {
      case 1:
        return Colors.red;
        break;
      case 2:
        return Colors.yellow;
        break;

      default:
        return Colors.yellow;
    }
  }

  // Returns the priority icon
  Icon getPriorityIcon(int priority) {
    switch (priority) {
      case 1:
        return Icon(Icons.play_arrow);
        break;
      case 2:
        return Icon(Icons.keyboard_arrow_right);
        break;

      default:
        return Icon(Icons.keyboard_arrow_right);
    }
  }

  void _delete(BuildContext context, Income note) async {

    int result = await db.deleteTransaction(note.id);
    if (result != 0) {
      _showSnackBar(context, 'Note Deleted Successfully');
      updateListView();
    }
  }

  void _showSnackBar(BuildContext context, String message) {

    final snackBar = SnackBar(content: Text(message));
    Scaffold.of(context).showSnackBar(snackBar);
  }

  void navigateToDetail(Income note, String title) async {
    bool result = await Navigator.push(context, MaterialPageRoute(builder: (context) {
     // return NoteDetail(Income, title);
    }));

    if (result == true) {
      updateListView();
    }
  }

  void updateListView() {

    final Future<Database> dbFuture = db.initializeDatabase();
    dbFuture.then((database) {

      Future<List<Income>> incomeListFuture = db.getIncomeList('income');
      incomeListFuture.then((incomeList) {
        setState(() {
          this.incomeList = incomeList;
          this.count = incomeList.length;
        });
      });
    });
  }
}

the Listview is not scrolling. i try to use SingleChildScrollView but still the list view is not scrolling. I read online that SingleChildScrollView doesnt work with Column attribute but not sure if this is true. also i read that i should include the widget on top of the listview(total outstanding, total received) as part of list view but dont know how to do that. that header should not be clickable.

can someone help me modify this code so that my screen can scroll up an down. also, not sure why i am getting bottom overflow error if i am using shrinkWrap: true, in the listview builder.

see image attach for the output im getting. listview is not scrolling

Answer 1

In the buildContent wrap your IncomeTransaction() into Expanded:

like Expanded(child: IncomeTransaction()).

That should fix.

And you don't need SingleChildScrollView if you already have a ListView. ListView is scrollable by itself.

I would recommend reading this article https://flutter.dev/docs/development/ui/layout/box-constraints which helps to understand such cases.