Flutter Listview can't scroll and not display all list

Question

i just started with flutter. in my case, i want to show 10 items listview on my home page. but that listview only shows 9 items. listview cannot be scrolled to show other item. can you see whats wrong with my code?

I have been looking for a solution to this problem by looking for a topic that has the same title, but nothing. i have changed some lines of my code but i get error "bottom overlow by 240px"

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


class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

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

Future<Null> _fetchPartner() async {
  print('Please Wait');
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(
      SystemUiOverlayStyle(statusBarColor: Colors.transparent),
    );
    return Scaffold(
        resizeToAvoidBottomInset: false,
        body: RefreshIndicator(
          onRefresh: _fetchPartner,
          child: SingleChildScrollView(
            scrollDirection: Axis.vertical,
            physics: AlwaysScrollableScrollPhysics(),
            child: Column(
              children: <Widget>[
                Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Padding(
                      padding:
                          const EdgeInsetsDirectional.only(top: 18, bottom: 18),
                      child: Text("Powered By:",
                          style: new TextStyle(fontSize: 18.0)),
                    )
                  ],
                ),
                ListView.builder(
                    padding: EdgeInsets.zero,
                    shrinkWrap: true,
                    itemCount: 10,
                    itemBuilder: (BuildContext context, int index) {
                      return Card(
                          margin: EdgeInsets.zero,
                          elevation: 0.4,
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(0),
                          ),
                          child: Container(
                              child: ListTile(
                                  leading: CircleAvatar(
                                      child: Image.network(
                                          "https://via.placeholder.com/150")),
                                  title: Text(
                                    "Coconut Oil",
                                    style: TextStyle(
                                        color: Colors.black87,
                                        fontWeight: FontWeight.bold),
                                  ),
                                  subtitle: Row(
                                    children: <Widget>[
                                      Icon(Icons.linear_scale,
                                          color: Colors.greenAccent),
                                      Text("Go Green!",
                                          style:
                                              TextStyle(color: Colors.black87))
                                    ],
                                  ),
                                  trailing: Icon(Icons.keyboard_arrow_right,
                                      color: Colors.black87, size: 30.0))));
                    })
              ],
            ),
          ),
        ));
  }
}

Ravindra S. Patil · Accepted Answer · 2023-01-09 04:42:16Z

Try below code Its working properly:

SingleChildScrollView(
  child: Column(
    children: <Widget>[
      Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Padding(
            padding: const EdgeInsetsDirectional.only(top: 18, bottom: 18),
            child: Text(
              "Powered By:",
              style: new TextStyle(fontSize: 18.0),
            ),
          )
        ],
      ),
      ListView.builder(
        padding: EdgeInsets.zero,
        shrinkWrap: true,
        physics: NeverScrollableScrollPhysics(),
        itemCount: 10,
        itemBuilder: (BuildContext context, int index) {
          return Card(
            margin: EdgeInsets.zero,
            elevation: 0.4,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(0),
            ),
            child: Container(
              child: ListTile(
                leading: CircleAvatar(
                    child:
                        Image.network("https://via.placeholder.com/150")),
                title: Text(
                  "Coconut Oil",
                  style: TextStyle(
                      color: Colors.black87, fontWeight: FontWeight.bold),
                ),
                subtitle: Row(
                  children: <Widget>[
                    Icon(Icons.linear_scale, color: Colors.greenAccent),
                    Text(
                      "Go Green!",
                      style: TextStyle(color: Colors.black87),
                    )
                  ],
                ),
                trailing: Icon(
                  Icons.keyboard_arrow_right,
                  color: Colors.black87,
                  size: 30.0,
                ),
              ),
            ),
          );
        },
      )
    ],
  ),
),

Your result screen:

Hardik Mehta · Accepted Answer · 2021-11-29 11:32:58Z

3

Add this property to Listivew.Builder

physics : NeverScrollableScrollPhysics()

as it is inside SingleChildScrollView.

answered Nov 29, 2021 at 11:32

Hardik Mehta

2,4731 gold badge13 silver badges22 bronze badges

1 Comment

Mr. Coolhead Over a year ago

i try but not difference

G H Prakash · Accepted Answer · 2021-11-29 11:35:11Z

Add this line to your code.

  import 'package:flutter/material.dart';
    import 'package:flutter/services.dart';
    
    
    class HomePage extends StatefulWidget {
      const HomePage({Key? key}) : super(key: key);
    
      @override
      _HomePageState createState() => _HomePageState();
    }
    
    Future<Null> _fetchPartner() async {
      print('Please Wait');
    }
    
    class _HomePageState extends State<HomePage> {
      @override
      Widget build(BuildContext context) {
        SystemChrome.setSystemUIOverlayStyle(
          SystemUiOverlayStyle(statusBarColor: Colors.transparent),
        );
        return Scaffold(
            resizeToAvoidBottomInset: false,
            body: RefreshIndicator(
              onRefresh: _fetchPartner,
              child: SingleChildScrollView(
                scrollDirection: Axis.vertical,
                physics: AlwaysScrollableScrollPhysics(),
                child: Column(
                  children: <Widget>[
                    Row(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Padding(
                          padding:
                              const EdgeInsetsDirectional.only(top: 18, bottom: 18),
                          child: Text("Powered By:",
                              style: new TextStyle(fontSize: 18.0)),
                        )
                      ],
                    ),
                    ListView.builder(
                        padding: EdgeInsets.zero,
                         physics : NeverScrollableScrollPhysics() 
                        shrinkWrap: true,
                        itemCount: 10,
                        itemBuilder: (BuildContext context, int index) {
                          return Card(
                              margin: EdgeInsets.zero,
                              elevation: 0.4,
                              shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.circular(0),
                              ),
                              child: Container(
                                  child: ListTile(
                                      leading: CircleAvatar(
                                          child: Image.network(
                                              "https://via.placeholder.com/150")),
                                      title: Text(
                                        "Coconut Oil",
                                        style: TextStyle(
                                            color: Colors.black87,
                                            fontWeight: FontWeight.bold),
                                      ),
                                      subtitle: Row(
                                        children: <Widget>[
                                          Icon(Icons.linear_scale,
                                              color: Colors.greenAccent),
                                          Text("Go Green!",
                                              style:
                                                  TextStyle(color: Colors.black87))
                                        ],
                                      ),
                                      trailing: Icon(Icons.keyboard_arrow_right,
                                          color: Colors.black87, size: 30.0))));
                        })
                  ],
                ),
              ),
            ));
      }
    }

Ashutosh Patole · Accepted Answer · 2021-11-29 11:36:32Z

Remove the singleChildScrollview and add a expanded widget on the listview.builder.

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


class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

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

Future<Null> _fetchPartner() async {
  print('Please Wait');
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(
      SystemUiOverlayStyle(statusBarColor: Colors.transparent),
    );
    return Scaffold(
        resizeToAvoidBottomInset: false,
        body: RefreshIndicator(
          onRefresh: _fetchPartner,
            child: Column(
              children: <Widget>[
                Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Padding(
                      padding:
                          const EdgeInsetsDirectional.only(top: 18, bottom: 18),
                      child: Text("Powered By:",
                          style: new TextStyle(fontSize: 18.0)),
                    )
                  ],
                ),
                    Expanded(
                    
                    child : ListView.builder(
                    padding: EdgeInsets.zero,
                    shrinkWrap: true,
                    itemCount: 10,
                    itemBuilder: (BuildContext context, int index) {
                      return Card(
                          margin: EdgeInsets.zero,
                          elevation: 0.4,
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(0),
                          ),
                          child: Container(
                              child: ListTile(
                                  leading: CircleAvatar(
                                      child: Image.network(
                                          "https://via.placeholder.com/150")),
                                  title: Text(
                                    "Coconut Oil",
                                    style: TextStyle(
                                        color: Colors.black87,
                                        fontWeight: FontWeight.bold),
                                  ),
                                  subtitle: Row(
                                    children: <Widget>[
                                      Icon(Icons.linear_scale,
                                          color: Colors.greenAccent),
                                      Text("Go Green!",
                                          style:
                                              TextStyle(color: Colors.black87))
                                    ],
                                  ),
                                  trailing: Icon(Icons.keyboard_arrow_right,
                                      color: Colors.black87, size: 30.0))));
                    })
              ],
            ),
          ),
        ));
  }
}

Hardik Mehta · Accepted Answer · 2021-11-29 12:07:39Z

Please try with this code replace your body tag with this and let me know

Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          
          
          Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Padding(
                padding: const EdgeInsetsDirectional.only(top: 18, bottom: 18),
                child:
                    Text("Powered By:", style: new TextStyle(fontSize: 18.0)),
              )
            ],
          ) ,
         
         
             Expanded ( child : ListView.builder(
                  padding: EdgeInsets.zero,
                  shrinkWrap: true,
                  itemCount: 13,
                  itemBuilder: (BuildContext context, int index) {
                    return Card(
                        margin: EdgeInsets.zero,
                        elevation: 0.4,
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(0),
                        ),
                        child: Container(
                            child: ListTile(
                                leading: CircleAvatar(
                                    child: Image.network(
                                        "")),
                                title: Text(
                                  "Coconut Oil",
                                  style: TextStyle(
                                      color: Colors.black87,
                                      fontWeight: FontWeight.bold),
                                ),
                                subtitle: Row(
                                  children: <Widget>[
                                    Icon(Icons.linear_scale,
                                        color: Colors.greenAccent),
                                    Text("Go Green!",
                                        style: TextStyle(color: Colors.black87))
                                  ],
                                ),
                                trailing: Icon(Icons.keyboard_arrow_right,
                                    color: Colors.black87, size: 30.0))));
                  }) )
        
      ]
    )

pawelsa · Accepted Answer · 2022-06-08 09:23:00Z

I am not convinced that any of the provided solutions is the right one. All of them use shrinkWrap: true. With only 10 elements this should not impact performance, but when it changes to 10k, well it will be a problem. I would simplify the tree by removing SingleChildScrollView and Column, moving Row from Column to ListView.builder, and displaying it only when the index == 0. We need to remember to add 1 in itemCount and remove shrinkWrap. There is another solution with the use of SliverList, but it would complicate too much without additional benefits. Below is the code for the first solution.

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

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

Future<Null> _fetchPartner() async {
  print('Please Wait');
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        resizeToAvoidBottomInset: false,
        body: RefreshIndicator(
          onRefresh: _fetchPartner,
          child: ListView.builder(
              itemCount: 10 + 1,
              itemBuilder: (BuildContext context, int index) {
                if (index == 0) {
                  return Row(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Padding(
                        padding: const EdgeInsetsDirectional.only(
                            top: 18, bottom: 18),
                        child: Text("Powered By:",
                            style: new TextStyle(fontSize: 18.0)),
                      )
                    ],
                  );
                }

                return Card(
                    margin: EdgeInsets.zero,
                    elevation: 0.4,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(0),
                    ),
                    child: Container(
                        child: ListTile(
                            leading: CircleAvatar(
                                child: Image.network(
                                    "https://via.placeholder.com/150")),
                            title: Text(
                              "Coconut Oil",
                              style: TextStyle(
                                  color: Colors.black87,
                                  fontWeight: FontWeight.bold),
                            ),
                            subtitle: Row(
                              children: <Widget>[
                                Icon(Icons.linear_scale,
                                    color: Colors.greenAccent),
                                Text("Go Green!",
                                    style: TextStyle(color: Colors.black87))
                               ],
                            ),
                            trailing: Icon(Icons.keyboard_arrow_right,
                                color: Colors.black87, size: 30.0))));
              }),
        ));
      }
  }

Samet İyigün · Accepted Answer · 2024-02-09 22:24:25Z

0

"Replacing SingleChildScrollView widget with SizedBox should be sufficient."

answered Feb 9, 2024 at 22:24

Samet İyigün

1

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Flutter Listview can't scroll and not display all list

7 Answers 7

Comments

1 Comment

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

1 Comment

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related