Search code examples
flutterdartlayout

How to put a shadow above containers inside ListView.builder Flutter?


I have a ListView.builder where I want to show containers with shadows. And I want a shadow of one container to cover another container. Example of how it should looks. It easily to do with Stack widget, but I have no idea how to do it inside ListView.builder.

Solution that works fine for me

Instead of using ListView I've decided to use CustomScrollView that takes slivers as parameters. Inside slivers I'm maping through a list of items and return my container wrapped with SliverToBoxAdapter. I don't know exactly how it works, but it works fine for me.

CustomScrollView(
  slivers: [
    ...names.map(
      (e) => SliverToBoxAdapter(
        child: Center(
          child: CustomContainer(
            child: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text('Container #${e['name']}'),
                  Text('Age is ${e['age']} y.o.')
                ],
              ),
            ),
          ),
        ),
      ),
    ),
  ],
),

Solution

  • // if scroll view overflow on other widget then use ClipRRect With Expanded.

    ClipRRect(
    child: Expanded(
    child: CustomScrollView(
    clipBehavior: Clip.none, //add this line inside CustomScrollView
      slivers: [
        ...names.map(
          (e) => SliverToBoxAdapter(
            child: Center(
              child: CustomContainer(
                child: Center(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text('Container #${e['name']}'),
                      Text('Age is ${e['age']} y.o.')
                    ],
                  ),
                ),
              ),
            ),
          ),
        ),
      ],
    ),),),
    

    I face the same problem and i use this tricks and it's solved.