How to minimize SliverList by clicking button in SliverAppbar flutter

Question

How can I minimize Sliver list automatically by clicking on button in SliverAppBar

I have minimize button in SliverAppbar, and SliverList with multiple ListTiles. I want to minimize animatedly all list item by clicking on this minimize button

here is code for main class

class _MyHomePageState extends State<MyHomePage> {
 @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          const CustomTitleAppbar(
            title: 'Sliver List',
          ),
          CustomSliverListView(),
        ],
      ),
    );
  }
}

code for SliverAppbar Containing minimize button

class CustomTitleAppbar extends StatefulWidget {
  const CustomTitleAppbar({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  _CustomTitleAppbarState createState() => _CustomTitleAppbarState();
}

class _CustomTitleAppbarState extends State<CustomTitleAppbar> {
  @override
  Widget build(BuildContext context) {
    return SliverAppBar(
      title: Text(widget.title),
      // centerTitle: true,
      pinned: true,
      snap: false,
      backgroundColor: Colors.lightGreen,
      actions: [
        IconButton(
          onPressed: () {
            // Here i want to minimize sliver list
          },
          icon: const Icon(Icons.minimize_rounded),
        ),
      ],
    );
  }
}

code for Sliver List with multiple items

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

  @override
  Widget build(BuildContext context) {
    return SliverList(
      delegate: SliverChildListDelegate(
        List.generate(
          5,
          (index) => ListTile(
            leading: CircleAvatar(
              child: Text('${index + 1}'),
              backgroundColor: Colors.lightGreen,
              foregroundColor: Colors.white,
            ),
            title: Text('Row ${index + 1}'),
            subtitle: Text('Subtitle ${index + 1}'),
            trailing: const Icon(Icons.star_border_outlined),
          ),
        ),
      ),
    );
  }
}

I am new in flutter, So thanks for reading.

Answer 1

Using callBack and passing bool on CustomSliverListView .

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _isOpen = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          CustomTitleAppbar(
            title: 'Sliver List',
            onCallBack: () {
              setState(() {
                _isOpen = !_isOpen;
              });
            },
          ),
          CustomSliverListView(
            isOpen: _isOpen,
          ),
        ],
      ),
    );
  }
}

class CustomTitleAppbar extends StatefulWidget {
  final Function onCallBack;

  const CustomTitleAppbar({
    Key? key,
    required this.title,
    required this.onCallBack,
  }) : super(key: key);
  final String title;

  @override
  _CustomTitleAppbarState createState() => _CustomTitleAppbarState();
}

class _CustomTitleAppbarState extends State<CustomTitleAppbar> {
  @override
  Widget build(BuildContext context) {
    return SliverAppBar(
      title: Text(widget.title),
      // centerTitle: true,
      pinned: true,
      snap: false,
      backgroundColor: Colors.lightGreen,
      actions: [
        IconButton(
          onPressed: () {
            // Here i want to minimize sliver list
            widget.onCallBack();
          },
          icon: const Icon(Icons.minimize_rounded),
        ),
      ],
    );
  }
}

class CustomSliverListView extends StatelessWidget {
  final bool isOpen;

  const CustomSliverListView({
    Key? key,
    required this.isOpen,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SliverList(
      delegate: SliverChildListDelegate(
        List.generate(
          isOpen ? 5 : 0,
          (index) => ListTile(
            leading: CircleAvatar(
              child: Text('${index + 1}'),
              backgroundColor: Colors.lightGreen,
              foregroundColor: Colors.white,
            ),
            title: Text('Row ${index + 1}'),
            subtitle: Text('Subtitle ${index + 1}'),
            trailing: const Icon(Icons.star_border_outlined),
          ),
        ),
      ),
    );
  }
}

Does it solve your question?