Flutter Question posted in
The official Flutter documentation can be found here.

I want to achive this nested list UI in flutter

How could we achive this UI in flutter?

The top row buttons hide when scroll up and visible when scroll down and the listview is wrap in a card widget.

https://youtube.com/shorts/6e3q47AMXoU?si=428FC8uTk3TSJcTt

Tags:

2

Answers


  1. 0

    You can archive a header that hides when the user scrolls down and shows when they scroll up by using a combination of the SliverAppBar and CustomScrollView

    Here’s a basic example :

    Scaffold(
        body: SafeArea(
          child: CustomScrollView(
            slivers: <Widget>[
              const SliverAppBar(
                floating: true,
                snap: true,
                backgroundColor: Colors.blue,
                title: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Icon(Icons.history_rounded,color: Colors.white,size: 30,),
                    Icon(Icons.wallet,color: Colors.white,size: 30),
                    Icon(Icons.inventory_outlined,color: Colors.white,size: 30),
                  ],
                ),
              ),
              SliverList(
                delegate: SliverChildBuilderDelegate(
                      (BuildContext context, int index) {
                    return ListTile(
                      title: Text('Your Data $index'),
                    );
                  },
                  childCount: 20,
                ),
              ),
            ],
          ),
        ),
    )
    Login or Signup to reply.
  2. 0

    You can achieve this behavior using CustomScrollView and SliverAppBar. Use the top one as pinned as a toolbar and for the Row Buttons, you can use SliverAppBar without pinning.
    Here is the example code:

    import 'package:flutter/material.dart';

class ScreenExample extends StatelessWidget {
  const ScreenExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.teal,
      body: SafeArea(
        child: CustomScrollView(
          physics: const BouncingScrollPhysics(),
          slivers: [
            SliverAppBar(
              pinned: true,
              backgroundColor: Colors.teal,
              title: const Text(
                "Example Scrolling",
              ),
              actions: [
                IconButton(
                  onPressed: () {},
                  icon: const Icon(Icons.settings),
                ),
              ],
            ),
            const SliverAppBar(
              backgroundColor: Colors.teal,
              toolbarHeight: 100,
              flexibleSpace: Center(
                  child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  CircleAvatar(
                    radius: 40,
                    backgroundColor: Colors.green,
                    child: Center(
                      child: Text("Demo"),
                    ),
                  ),
                  CircleAvatar(
                    radius: 40,
                    backgroundColor: Colors.green,
                    child: Center(
                      child: Text("Demo"),
                    ),
                  ),
                  CircleAvatar(
                    radius: 40,
                    backgroundColor: Colors.green,
                    child: Center(
                      child: Text("Demo"),
                    ),
                  ),
                ],
              )),
            ),
            SliverToBoxAdapter(
              child: Card(
                margin: const EdgeInsets.symmetric(
                  horizontal: 16,
                  vertical: 16,
                ),
                child: ListView.builder(
                  itemCount: 50,
                  shrinkWrap: true,
                  physics: const BouncingScrollPhysics(),
                  itemBuilder: (_, index) {
                    return ListTile(
                      title: Text("List Item - ${index + 1}"),
                      subtitle: const Text("Description here"),
                    );
                  },
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search