Flutter Listview can't scroll and not display all list

user_8508219 0
Viewed 1986

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))));
                    })
              ],
            ),
          ),
        ));
  }
}
dart flutter listview android
6 Answers

Try below code:

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:

user_139972100

Add this property to Listivew.Builder

physics : NeverScrollableScrollPhysics()

as it is inside SingleChildScrollView.

user_43736610

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

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

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

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