Home > Enterprise >  ListView.builder is not scrolling in flutter
ListView.builder is not scrolling in flutter

Time:12-07

i'm trying to integrate a listView.builder in my UI! First of all, the whole content of the screen is inside a CustomScrollView that has silver widgets inside of it. Everything works pretty fine unless that my listview is not scrolling.

Here is the code:

class _DashboardScreenState extends State<DashboardScreen> {
  @override
  Widget build(BuildContext context) {
    final screenHeight = MediaQuery.of(context).size.height;

    return Scaffold(
      appBar: CustomAppBar(),
      body: CustomScrollView(
        physics: ClampingScrollPhysics(),
        slivers: <Widget>[
          _buildHeader(screenHeight),
          _buildBody(screenHeight),
        ],
      ),
    );
  }
}

The _buildBody code:

SliverToBoxAdapter _buildBody(double screenHeight) {
  return SliverToBoxAdapter(
    child: Column(
      children: [
        Container(
          width: 100,
          height: 65,
          child: Padding(
            padding: const EdgeInsets.only(top: 20),
            child: ElevatedButton(
              onPressed: () {},
              child: Text(
                'Add',
                style: TextStyle(fontSize: 18),
              ),
              style: ElevatedButton.styleFrom(
                  shape: StadiumBorder(),
                  backgroundColor: Palette.primaryColor),
            ),
          ),
        ),
        SizedBox(
          height: 10,
        ),
        ListView.builder(
            scrollDirection: Axis.vertical,
            physics: const AlwaysScrollableScrollPhysics(),
            shrinkWrap: true,
            itemCount: 6,
            itemBuilder: ((BuildContext context, int index) {
              return Container(
                margin: const EdgeInsets.symmetric(
                  vertical: 10.0,
                  horizontal: 20.0,
                ),
                padding: const EdgeInsets.all(10.0),
                height: screenHeight * 0.15,
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    colors: [Color(0xFFAD9FE4), Palette.primaryColor],
                  ),
                  borderRadius: BorderRadius.circular(20.0),
                ),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: <Widget>[
                    Image.asset(
                      "assets/worker.png",
                      height: 80,
                      width: 80,
                    ),
                    Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Text(
                          'Somme: 50 €',
                          style: const TextStyle(
                            color: Colors.white,
                            fontSize: 18.0,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                        SizedBox(height: screenHeight * 0.01),
                        Text(
                          'Date: 19 novembre 2022',
                          style: TextStyle(fontSize: 10, color: Colors.white),
                        ),
                        SizedBox(height: screenHeight * 0.01),
                        Text(
                          'Follow the instructions\nto do your own test.',
                          style: const TextStyle(
                            color: Colors.white,
                            fontSize: 16.0,
                          ),
                          maxLines: 2,
                        ),
                      ],
                    )
                  ],
                ),
              );
            }))
      ],
    ),
  );
}

I tried adding shrinkWrap: true as well as the scroll direction. Also tried wrapping it inside a SingleScrollChildView, none of the solutions worked for me. I appreciate any kind of help!

CodePudding user response:

You can use physics: const NeverScrollableScrollPhysics(), on listView, the parent widget is already handling the scroll event. But you can replace listView with Column widget.(we already have on parent, therefor using loop)

  SliverToBoxAdapter _buildBody(double screenHeight) {
    return SliverToBoxAdapter(
      child: Column(
        children: [
          Container(
            width: 100,
            height: 65,
            child: Padding(
              padding: const EdgeInsets.only(top: 20),
              child: ElevatedButton(
                onPressed: () {},
                child: Text(
                  'Add',
                  style: TextStyle(fontSize: 18),
                ),
                style: ElevatedButton.styleFrom(
                    shape: StadiumBorder(),
                    backgroundColor: Palette.primaryColor),
              ),
            ),
          ),
          SizedBox(
            height: 10,
          ),
          for (int i = 0; i < 6; i  )
            Container(
              margin: const EdgeInsets.symmetric(
                vertical: 10.0,
                horizontal: 20.0,
              ),
              padding: const EdgeInsets.all(10.0),
              height: screenHeight * 0.15,
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  colors: [Color(0xFFAD9FE4), Palette.primaryColor],
                ),
                borderRadius: BorderRadius.circular(20.0),
              ),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: <Widget>[
                  Image.asset(
                    "assets/worker.png",
                    height: 80,
                    width: 80,
                  ),
                  Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Text(
                        'Somme: 50 €',
                        style: const TextStyle(
                          color: Colors.white,
                          fontSize: 18.0,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                      SizedBox(height: screenHeight * 0.01),
                      Text(
                        'Date: 19 novembre 2022',
                        style: TextStyle(fontSize: 10, color: Colors.white),
                      ),
                      SizedBox(height: screenHeight * 0.01),
                      Text(
                        'Follow the instructions\nto do your own test.',
                        style: const TextStyle(
                          color: Colors.white,
                          fontSize: 16.0,
                        ),
                        maxLines: 2,
                      ),
                    ],
                  )
                ],
              ),
            )
        ],
      ),
    );
  }

CodePudding user response:

Instead of using ListView.Builderinside CustomScrollView. It is always better to use Slivers. Therefore, instead of wrapping ListView.builder with SliverToBoxAdapter, use SliverList. Here is the detail code I have refactored below for you. Or you can directly visit this link where you can play with the refactored code.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.light(),
      home: const DashboardScreen(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class DashboardScreen extends StatefulWidget {
  const DashboardScreen({super.key});

  @override
  State<DashboardScreen> createState() => _DashboardScreenState();
}

class _DashboardScreenState extends State<DashboardScreen> {
  @override
  Widget build(BuildContext context) {
    final screenHeight = MediaQuery.of(context).size.height;

    return Scaffold(
      appBar: AppBar(),
      body: CustomScrollView(
        physics: ClampingScrollPhysics(),
        slivers: <Widget>[
          // your build header widget

          SliverToBoxAdapter(
            child: Container(
              width: 100,
              height: 65,
              child: Padding(
                padding: const EdgeInsets.only(top: 20),
                child: ElevatedButton(
                  onPressed: () {},
                  child: Text(
                    'Add',
                    style: TextStyle(fontSize: 18),
                  ),
                  style: ElevatedButton.styleFrom(
                    shape: StadiumBorder(),
                    backgroundColor: Colors.red,
                  ),
                ),
              ),
            ),
          ),
          SliverToBoxAdapter(
            child: SizedBox(height: 10),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate((context, index) {
              return Container(
                margin: const EdgeInsets.symmetric(
                  vertical: 10.0,
                  horizontal: 20.0,
                ),
                padding: const EdgeInsets.all(10.0),
                height: screenHeight * 0.15,
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    colors: [Color(0xFFAD9FE4), Colors.red],
                  ),
                  borderRadius: BorderRadius.circular(20.0),
                ),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: <Widget>[
                    // Image.asset(
                    //   "assets/worker.png",
                    //   height: 80,
                    //   width: 80,
                    // ),
                    // 
                    Container(
                    height: 80,
                    width: 80,
                    child: Text("A"),
                    ),
                    
                    Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Text(
                          'Somme: 50 €',
                          style: const TextStyle(
                            color: Colors.white,
                            fontSize: 18.0,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                        SizedBox(height: screenHeight * 0.01),
                        Text(
                          'Date: 19 novembre 2022',
                          style: TextStyle(fontSize: 10, color: Colors.white),
                        ),
                        SizedBox(height: screenHeight * 0.01),
                        Text(
                          'Follow the instructions\nto do your own test.',
                          style: const TextStyle(
                            color: Colors.white,
                            fontSize: 16.0,
                          ),
                          maxLines: 2,
                        ),
                      ],
                    )
                  ],
                ),
              );
            }),
          )
        ],
      ),
    );
  }
}
  • Related