Flutter - ListView scroll not working (bottom overflows by some pexels)-CodePudding

Flutter - While importing listview widget from one file then it just throws an error on the app's screen "Bottom overflowed by 500 pixels" but when if listview is directly used inside the home file it works fine. only throws error while importing listview widget from another file.

Here is the home file and the file which has listview widget

import 'package:flutter/material.dart';
import 'package:flutter_application_1/Pages/widgets/exercise_list.dart';

class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Column(
          children: const [
            ExerciseList()
          ],
        ),
      ),
    );
  }
}

Second file

import 'package:flutter/material.dart';

class ExerciseList extends StatelessWidget {
  const ExerciseList({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView(
      shrinkWrap: true,
      physics: const AlwaysScrollableScrollPhysics(),
      children: [
        Row(
          children: [
            Padding(
              padding: const EdgeInsets.only(top: 10.0),
              child: Container(
                decoration: BoxDecoration(
                    color: Colors.grey[300],
                    borderRadius: BorderRadius.circular(10)),
                padding: const EdgeInsets.all(5),
                width: 150,
                height: 135,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    ClipRRect(
                      borderRadius: BorderRadius.circular(5),
                      child: const Image(
                          image: NetworkImage(
                              "https://media.istockphoto.com/photos/man-lifting-weights-on-a-bench-press-picture-id180200014?b=1&k=20&m=180200014&s=170667a&w=0&h=VE9cTw0Pyus1IIENTjWxSkM9wyQhPFFIxikCpHDbwm8=")),
                    ),
                    const SizedBox(
                      height: 8,
                    ),
                    const Text(
                      "Chest Workout",
                      style:
                          TextStyle(fontWeight: FontWeight.bold, fontSize: 14),
                    )
                  ],
                ),
              ),
            ),
          ],
        ),
        Row(
          children: [
            Padding(
              padding: const EdgeInsets.only(top: 10.0),
              child: Container(
                decoration: BoxDecoration(
                    color: Colors.grey[300],
                    borderRadius: BorderRadius.circular(10)),
                padding: const EdgeInsets.all(5),
                width: 150,
                height: 135,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    ClipRRect(
                      borderRadius: BorderRadius.circular(5),
                      child: const Image(
                          image: NetworkImage(
                              "https://media.istockphoto.com/photos/man-lifting-weights-on-a-bench-press-picture-id180200014?b=1&k=20&m=180200014&s=170667a&w=0&h=VE9cTw0Pyus1IIENTjWxSkM9wyQhPFFIxikCpHDbwm8=")),
                    ),
                    const SizedBox(
                      height: 8,
                    ),
                    const Text(
                      "Chest Workout",
                      style:
                          TextStyle(fontWeight: FontWeight.bold, fontSize: 14),
                    )
                  ],
                ),
              ),
            ),
          ],
        ),
        Row(
          children: [
            Padding(
              padding: const EdgeInsets.only(top: 10.0),
              child: Container(
                decoration: BoxDecoration(
                    color: Colors.grey[300],
                    borderRadius: BorderRadius.circular(10)),
                padding: const EdgeInsets.all(5),
                width: 150,
                height: 135,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    ClipRRect(
                      borderRadius: BorderRadius.circular(5),
                      child: const Image(
                          image: NetworkImage(
                              "https://media.istockphoto.com/photos/man-lifting-weights-on-a-bench-press-picture-id180200014?b=1&k=20&m=180200014&s=170667a&w=0&h=VE9cTw0Pyus1IIENTjWxSkM9wyQhPFFIxikCpHDbwm8=")),
                    ),
                    const SizedBox(
                      height: 8,
                    ),
                    const Text(
                      "Chest Workout",
                      style:
                          TextStyle(fontWeight: FontWeight.bold, fontSize: 14),
                    )
                  ],
                ),
              ),
            ),
          ],
        ),
      ],
    );
  }
}

CodePudding user response：

Do this:

import 'package:flutter/material.dart';

class ExerciseList extends StatelessWidget {
  const ExerciseList({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    //wrap your listview with a constraint widget: i.e container or SizedBox
    //give it some height of your choice and wrap with SingleChildScrollview //widget to prevent the overflow from occuring
    return Scaffold(
      body: SingleChildScrollView(
          child: SizedBox(
              height:
                  MediaQuery.of(context).size.height, // takes screen full height
              child: ListView(
                shrinkWrap: true,
                scrollDirection: Axis.vertical,
                //choose direction of your choice
                physics: const BouncingScrollPhysics(),
                // scroll effects not the actual scrolling
                children: List.generate(10, (index) =>Row(
                  children: [
                    Padding(
                      padding: const EdgeInsets.only(top: 10.0),
                      child: Container(
                        decoration: BoxDecoration(
                            color: Colors.grey[300],
                            borderRadius: BorderRadius.circular(10)),
                        padding: const EdgeInsets.all(5),
                        width: 150,
                        height: 135,
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: [
                            ClipRRect(
                              borderRadius: BorderRadius.circular(5),
                              child: const Image(
                                  image: NetworkImage(
                                      "https://media.istockphoto.com/photos/man-lifting-weights-on-a-bench-press-picture-id180200014?b=1&k=20&m=180200014&s=170667a&w=0&h=VE9cTw0Pyus1IIENTjWxSkM9wyQhPFFIxikCpHDbwm8=")),
                            ),
                            const SizedBox(
                              height: 8,
                            ),
                            const Text(
                              "Chest Workout",
                              style: TextStyle(
                                  fontWeight: FontWeight.bold, fontSize: 14),
                            )
                          ],
                        ),
                      ),
                    ),
                  ],
                ))
              ))),
    );
  }
}

in your main you don't need a column


@override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home:  const ExerciseList()
    );
  }
}

CodePudding user response：

Try wrapping ExerciseList with SingleChildScrollView instead of Column:

class Home extends StatelessWidget { const Home({Key? key}) : super(key: key);

@override Widget build(BuildContext context) { return Scaffold( body: Padding( padding: EdgeInsets.all(20.0), child: SingleChildScrollView( child: ExerciseList(), ), ), ); } }

CodePudding user response：

simply wrapped listview inside sizedbox and gave it a height of 150 and it's done we are good to go!☺☺

SizedBox(
                child: ListView(
              shrinkWrap: true,
              physics: const AlwaysScrollableScrollPhysics(),
              children: [
                Row(
                  children: [
                    Padding(
                      padding: const EdgeInsets.only(top: 10.0),
                      child: Container(
                        decoration: BoxDecoration(
                            color: Colors.grey[300],
                            borderRadius: BorderRadius.circular(10)),
                        padding: const EdgeInsets.all(5),
                        width: 150,
                        height: 135,
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: [
                            ClipRRect(
                              borderRadius: BorderRadius.circular(5),
                              child: const Image(
                                  image: NetworkImage(
                                      "https://media.istockphoto.com/photos/man-lifting-weights-on-a-bench-press-picture-id180200014?b=1&k=20&m=180200014&s=170667a&w=0&h=VE9cTw0Pyus1IIENTjWxSkM9wyQhPFFIxikCpHDbwm8=")),
                            ),
                            const SizedBox(
                              height: 8,
                            ),
                            const Text(
                              "Chest Workout",
                              style: TextStyle(
                                  fontWeight: FontWeight.bold, fontSize: 14),
                            )
                          ],
                        ),
                      ),
                    ),
                  ],
                ),
                Row(
                  children: [
                    Padding(
                      padding: const EdgeInsets.only(top: 10.0),
                      child: Container(
                        decoration: BoxDecoration(
                            color: Colors.grey[300],
                            borderRadius: BorderRadius.circular(10)),
                        padding: const EdgeInsets.all(5),
                        width: 150,
                        height: 135,
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: [
                            ClipRRect(
                              borderRadius: BorderRadius.circular(5),
                              child: const Image(
                                  image: NetworkImage(
                                      "https://media.istockphoto.com/photos/man-lifting-weights-on-a-bench-press-picture-id180200014?b=1&k=20&m=180200014&s=170667a&w=0&h=VE9cTw0Pyus1IIENTjWxSkM9wyQhPFFIxikCpHDbwm8=")),
                            ),
                            const SizedBox(
                              height: 8,
                            ),
                            const Text(
                              "Chest Workout",
                              style: TextStyle(
                                  fontWeight: FontWeight.bold, fontSize: 14),
                            )
                          ],
                        ),
                      ),
                    ),
                  ],
                ),
                Row(
                  children: [
                    Padding(
                      padding: const EdgeInsets.only(top: 10.0),
                      child: Container(
                        decoration: BoxDecoration(
                            color: Colors.grey[300],
                            borderRadius: BorderRadius.circular(10)),
                        padding: const EdgeInsets.all(5),
                        width: 150,
                        height: 135,
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: [
                            ClipRRect(
                              borderRadius: BorderRadius.circular(5),
                              child: const Image(
                                  image: NetworkImage(
                                      "https://media.istockphoto.com/photos/man-lifting-weights-on-a-bench-press-picture-id180200014?b=1&k=20&m=180200014&s=170667a&w=0&h=VE9cTw0Pyus1IIENTjWxSkM9wyQhPFFIxikCpHDbwm8=")),
                            ),
                            const SizedBox(
                              height: 8,
                            ),
                            const Text(
                              "Chest Workout",
                              style: TextStyle(
                                  fontWeight: FontWeight.bold, fontSize: 14),
                            )
                          ],
                        ),
                      ),
                    ),
                  ],
                ),
              ],
            ));