skip to Main Content

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 instructionsnto 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!

2

Answers


  1. 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 instructionsnto do your own test.',
                            style: const TextStyle(
                              color: Colors.white,
                              fontSize: 16.0,
                            ),
                            maxLines: 2,
                          ),
                        ],
                      )
                    ],
                  ),
                )
            ],
          ),
        );
      }
    
    
    Login or Signup to reply.
  2. 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 instructionsnto do your own test.',
                              style: const TextStyle(
                                color: Colors.white,
                                fontSize: 16.0,
                              ),
                              maxLines: 2,
                            ),
                          ],
                        )
                      ],
                    ),
                  );
                }),
              )
            ],
          ),
        );
      }
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search