SingleChildScrollView doesn't scroll screen with ListView.builder

0

I'm trying to get it so that all of the items in ListView.builder can be displayed on the screen and seen by scrolling. However, I think because the ListView.builder is in a stack, it is not allowing the whole screen to scroll. I don't want the ListView.builder to scroll on its own, I want only the whole page to be scrollable. Thanks in advance.

import 'sign_up_page.dart';
import 'package:intl/intl.dart';
import 'settings_page.dart';
import 'new_event_page.dart';
import 'event_settings_page.dart';

class HomeScreen extends StatefulWidget {
  static const String id = 'home_screen';
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    double width;
    double height;
    int mediumScreenSize = 800;
    int largeScreenSize = 1000;
    width = MediaQuery.of(context).size.width;
    height = MediaQuery.of(context).size.height;
    return Scaffold(
      backgroundColor: Color.fromRGBO(255, 255, 255, 1),
      body: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            Stack(
              children:[
                Container(
                  child: AspectRatio(
                    aspectRatio: mediumScreenSize < height ? 0.76 : 0.87,
                  ),
                    decoration: BoxDecoration(
                      color: Color(0xff212a3d),
                        borderRadius: BorderRadius.only(
                        bottomLeft: Radius.circular(40), bottomRight: Radius.circular(40)
                        ),
                    ),
                ),
                Container(
                  height: height,
                  child: Column(
                    children: [
                      AspectRatio(
                        aspectRatio: 10,
                      ),
                      Stack(
                        children: [
                              Row(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: [
                                  Container(
                                    padding: EdgeInsets.all(width/35),
                                    child: Text('Home',
                                      style: TextStyle(
                                        fontFamily: 'Chivo Bold',
                                        fontSize: mediumScreenSize < height ? 22.0 : 21.0,
                                        color: Colors.white,
                                      ),
                                    ),
                                  ),
                                ],
                              ),
                              Row(
                                mainAxisAlignment: MainAxisAlignment.end,
                                children: <Widget>[
                                  Padding(
                                    padding: EdgeInsets.only(right: width/10),
                                    child: ButtonTheme(
                                      padding: EdgeInsets.all(0),
                                      minWidth: width/10,
                                      child: FlatButton(onPressed: () {
                                        Navigator.pushNamed(context, SettingsPage.id);
                                      },
                                        child: Image.asset('images/gear.png', height: 22),
                                      ),
                                    ),
                                  ),
                                ],
                              ),
                            ],
                          ),
                      Row(
                        crossAxisAlignment: CrossAxisAlignment.end,
                        children: [
                          SizedBox(
                            height: height/5,
                          ),
                          Container(
                            padding: EdgeInsets.only(left: width/7.5),
                            //TO DO: replace fullName variable when user updates user information
                            child: Text('Welcome' + UserInformation.userStatus + ',' + '\n' + UserInformation.fullName,  style: TextStyle(
                              fontFamily: 'Poppins SemiBold',
                              fontWeight: FontWeight.w600,
                              fontSize: mediumScreenSize < height ? 26.0 : 25.0,
                              letterSpacing: 0.5,
                              color: Colors.white,
                              ),
                            ),
                          ),
                        ],
                      ),
                      AspectRatio(
                        aspectRatio: height > mediumScreenSize ? 4: 7,
                      ),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Container(
                            width: width/1.2,
                            child: AspectRatio(
                              aspectRatio: 6.5,
                              child: FlatButton(
                                shape: RoundedRectangleBorder(
                                  borderRadius: new BorderRadius.circular(28.0),
                                ),
                                color: Color.fromRGBO(102, 161, 192, 1),
                                onPressed: () {
                                  EventInformation.eventDate = DateFormat.yMMMMd().format(DateTime.now());
                                  Navigator.pushNamed(context, NewEventPage.id);
                                },
                                child: Row(
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  children: [
                                    Container(
                                      padding: EdgeInsets.only(top: width * 0.015),
                                      child: Image.asset(
                                        'images/+.png',
                                        height: width/16,
                                      ),
                                    ),
                                    Text(
                                      '   Add new event',
                                      style: TextStyle(
                                        color: Colors.white,
                                        fontFamily: 'Chivo Regular',
                                        fontSize: mediumScreenSize < height ? 16.0 : 15.0,
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Padding(
                            padding: EdgeInsets.only(top: width/15, bottom: width/40),
                            child: Container(
                              child: Text('My Events:', style: TextStyle(
                                fontFamily: 'Overpass SemiBold',
                                fontWeight: FontWeight.w600,
                                fontSize: mediumScreenSize < height ? 16.0 : 15.0,
                                letterSpacing: 1.0,
                                color: Colors.white,
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),
                      UserInformation.events.length == 0 ? Container (
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.end,
                          children: <Widget>[
                            AspectRatio(
                              aspectRatio: height > mediumScreenSize ? 2.5: 4,
                            ),
                            Text('No events listed', textAlign: TextAlign.center,
                              style: TextStyle(color: Colors.grey, fontFamily: 'Chivo Bold', fontSize: mediumScreenSize < height ? 20.0 : 19.0),),
                            Text('\nAdd a new event by selecting the "+" button above', textAlign: TextAlign.center,
                              style: TextStyle(color: Colors.grey, fontFamily: 'Chivo Regular'),),
                          ],
                        ),):
                      Expanded(
                        child: ListView.builder(
                            physics: const NeverScrollableScrollPhysics(),
                            shrinkWrap: true,
                            itemCount: UserInformation.events.length,
                            itemBuilder: (context, index) {
                              return Container(
                                margin: EdgeInsets.only(bottom: width/20),
                                child: Row(
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  children: [
                                    InkWell(
                                      onTap: () {
                                        Navigator.pushNamed(context, EventSettingsPage.id);
                                      },
                                      child: Container(width: width/1.2,
                                        height: width/5.5,
                                        decoration: new BoxDecoration(
                                          color: Color(0xffffffff),
                                          borderRadius: BorderRadius.circular(15),
                                          boxShadow: [BoxShadow(
                                              color: Color(0x15525768),
                                              offset: Offset(-12,15),
                                              blurRadius: 22,
                                              spreadRadius: 0
                                          ),BoxShadow(
                                              color: Color(0x0c525768),
                                              offset: Offset(12,-15),
                                              blurRadius: 22,
                                              spreadRadius: 0
                                          ) ],
                                        ),
                                        child: Row(
                                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                          children: <Widget>[
                                            Container(
                                              padding: EdgeInsets.only(left: width/10),
                                              child: Text(UserInformation.events[index],
                                                overflow: TextOverflow.ellipsis,
                                                style: TextStyle(
                                                  color: Color(0xff212a3d),
                                                  fontFamily: 'Overpass Bold',
                                                  fontSize: mediumScreenSize < height ? 16.0 : 15.0,
                                                ),
                                              ),
                                            ),
                                            Container(
                                              padding: EdgeInsets.only(right: width/15),
                                              child: new Image.asset(
                                                'images/mini_arrow.png',
                                                height: 30.0,
                                              ),
                                            ),
                                          ],
                                        ),
                                      ),
                                    ),
                                  ],
                                ),
                              );
                            }
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}




flutter
dart
flutter-layout
asked on Stack Overflow Jul 16, 2020 by Claire Rhoda

2 Answers

0

add this two line in your listview :-ListView.builder( physics: NeverScrollableScrollPhysics(),enter image description here

answered on Stack Overflow Jul 16, 2020 by Parth Pitroda • edited Jul 16, 2020 by Parth Pitroda
0
child: Scaffold(
        backgroundColor: Color.fromRGBO(255, 255, 255, 1),
        body: SingleChildScrollView(
          physics: ClampingScrollPhysics(),
          child: Column(
            children: <Widget>[
              Stack(
                children:[
                  Container(
                    height: mediumScreenSize < height ?  width/0.8 : width/0.8,
                    width: double.infinity,
                    decoration: BoxDecoration(
                      color: Color(0xff212a3d),
                      borderRadius: BorderRadius.only(
                          bottomLeft: Radius.circular(40), bottomRight: Radius.circular(40)
                      ),
                    ),
                  ),
                  Column(
                    children: [
                      Stack(
                        children: <Widget>[
                          Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              Container(
                                margin: EdgeInsets.only(top: width/9),
                                child: Text('Home',
                                  style: TextStyle(
                                    fontFamily: 'Chivo Bold',
                                    fontSize: mediumScreenSize < height ? 22.0 : 21.0,
                                    color: Colors.white,
                                  ),
                                ),
                              ),
                            ],
                          ),
                          Row(
                            mainAxisAlignment: MainAxisAlignment.end,
                            children: <Widget>[
                              Container(
                                margin: EdgeInsets.only(top: width/13),
                                padding: EdgeInsets.only(right: width/10),
                                child: ButtonTheme(
                                  padding: EdgeInsets.all(0),
                                  minWidth: width/10,
                                  child: FlatButton(onPressed: () {
                                    Navigator.pushNamed(context, SettingsPage.id);
                                  },
                                    child: Image.asset('images/gear.png', height: 22),
                                  ),
                                ),
                              ),
                            ],
                          ),
                        ],
                      ),
                      SizedBox(
                        height: width/4,
                      ),
                      Row(
                        crossAxisAlignment: CrossAxisAlignment.end,
                        children: [
                          Container(
                            padding: EdgeInsets.only(left: width/7.5),
                            child: Text('Welcome' + UserInformation.userStatus + ',' + '\n' + UserInformation.fullName,  style: TextStyle(
                              fontFamily: 'Poppins SemiBold',
                              fontWeight: FontWeight.w600,
                              fontSize: mediumScreenSize < height ? 26.0 : 25.0,
                              letterSpacing: 0.5,
                              color: Colors.white,
                            ),
                            ),
                          ),
                        ],
                      ),
                      SizedBox(
                        height: width/4.75,
                      ),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Container(
                            width: width/1.2,
                            child: AspectRatio(
                              aspectRatio: 6.5,
                              child: FlatButton(
                                shape: RoundedRectangleBorder(
                                  borderRadius: new BorderRadius.circular(28.0),
                                ),
                                color: Color.fromRGBO(102, 161, 192, 1),
                                onPressed: () {
                                  EventInformation.displayEventDate = DateFormat.yMMMMd().format(DateTime.now());
                                  Navigator.pushNamed(context, NewEventPage.id);
                                },
                                child: Row(
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  children: [
                                    Container(
                                      padding: EdgeInsets.only(top: width * 0.015),
                                      child: Image.asset(
                                        'images/+.png',
                                        height: width/16,
                                      ),
                                    ),
                                    Text(
                                      '   Add new event',
                                      style: TextStyle(
                                        color: Colors.white,
                                        fontFamily: 'Chivo Regular',
                                        fontSize: mediumScreenSize < height ? 16.0 : 15.0,
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Padding(
                            padding: EdgeInsets.only(top: width/15),
                            child: Container(
                              child: Text('My Events:', style: TextStyle(
                                fontFamily: 'Overpass SemiBold',
                                fontWeight: FontWeight.w600,
                                fontSize: mediumScreenSize < height ? 16.0 : 15.0,
                                letterSpacing: 1.0,
                                color: Colors.white,
                              ),
                              ),
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                  Padding(
                    padding: EdgeInsets.only(top: width/ 0.9),
                    child: UserInformation.events.length == 0 ? Container (
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.end,
                        children: <Widget>[
                          AspectRatio(
                            aspectRatio: height > mediumScreenSize ? 2.5: 4,
                          ),
                          Text('No events listed', textAlign: TextAlign.center,
                            style: TextStyle(color: Colors.grey, fontFamily: 'Chivo Bold', fontSize: mediumScreenSize < height ? 20.0 : 19.0),),
                          Text('\nAdd a new event by selecting the "+" button above', textAlign: TextAlign.center,
                            style: TextStyle(color: Colors.grey, fontFamily: 'Chivo Regular'),),
                        ],
                      ),):
                    ListView.builder(
                        padding: EdgeInsets.only(top: width/20, bottom: width/20),
                        physics: const NeverScrollableScrollPhysics(),
                        shrinkWrap: true,
                        itemCount: UserInformation.events.length,
                        itemBuilder: (context, index) {
                          return Container(
                            margin: EdgeInsets.only(bottom: width/20),
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: [
                                InkWell(
                                  onTap: () {
                                    Navigator.pushNamed(context, EventSettingsPage.id);
                                  },
                                  child: Container(width: width/1.2,
                                    height: width/5.5,
                                    decoration: new BoxDecoration(
                                      color: Color(0xffffffff),
                                      borderRadius: BorderRadius.circular(15),
                                      boxShadow: [BoxShadow(
                                          color: Color(0x15525768),
                                          offset: Offset(-12,15),
                                          blurRadius: 22,
                                          spreadRadius: 0
                                      ),BoxShadow(
                                          color: Color(0x0c525768),
                                          offset: Offset(12,-15),
                                          blurRadius: 22,
                                          spreadRadius: 0
                                      ) ],
                                    ),
                                    child: Row(
                                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                      children: <Widget>[
                                        Container(
                                          padding: EdgeInsets.only(left: width/10),
                                          child: Text(UserInformation.events[index],
                                            overflow: TextOverflow.ellipsis,
                                            style: TextStyle(
                                              color: Color(0xff212a3d),
                                              fontFamily: 'Overpass Bold',
                                              fontSize: mediumScreenSize < height ? 16.0 : 15.0,
                                            ),
                                          ),
                                        ),
                                        Container(
                                          padding: EdgeInsets.only(right: width/15),
                                          child: new Image.asset(
                                            'images/mini_arrow.png',
                                            height: 30.0,
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          );
                        }
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),

This is the way I figured out how to do it without any hardcoded height inputs. The problem was the ListView.builder was in a Container with no specified height.

answered on Stack Overflow Jul 28, 2020 by Claire Rhoda

User contributions licensed under CC BY-SA 3.0