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))));
                    })
              ],
            ),
          ),
        ));
  }
}

Cowpox

Answer 1

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:

Fda

Answer 2

Add this property to Listivew.Builder

physics : NeverScrollableScrollPhysics() 

as it is inside SingleChildScrollView.

Midvictorian

i try but not difference – Cowpox

Answer 3

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))));
                        })
                  ],
                ),
              ),
            ));
      }
    }

Novick

Answer 4

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))));
                    })
              ],
            ),
          ),
        ));
  }
}

Goldshlag

Answer 5

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))));
                  }) )
        
      ]
    )

Midvictorian

Answer 6

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))));
              }),
        ));
      }
  }

Imago

Answer 7

"Replacing SingleChildScrollView widget with SizedBox should be sufficient."

Askins

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. – Exhume