Blog

A simple CollapsibleToolBar Example in Flutter using SliverAppBar.

Example 1: CollapsibleToolbar using SliverAppBar

Here is the demo screenshot of this example:

This example will comprise the following files:

• CollapsibleToolbar.dart

Step 1: Create Project.

1. Open your favorite Flutter IDE.
2. Go to File-->New-->Project to create a new project.

Step 2: Dependencies.

No external dependency is needed for this project.

Step 4: Write Dart Code

Write your code as follows:

*(a). CollapsibleToolbar.dart

Create a file Dart named CollapsibleToolbar.dart

Here is the full code

import 'package:flutter/material.dart';
class CollapsibleToolbar extends StatefulWidget {
  const CollapsibleToolbar({Key? key, required this.title}) : super(key: key);
  final String title;
  @override
  _CollapsibleToolbarState createState() => _CollapsibleToolbarState();
}
class _CollapsibleToolbarState extends State<CollapsibleToolbar> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            expandedHeight: 200.0,
            pinned: true,
            flexibleSpace: FlexibleSpaceBar(
              title: Text(widget.title),
            ),
          ),
          SliverFixedExtentList(
              delegate: SliverChildBuilderDelegate(
                (context, index) => const Text("Flutter list items"),
              ),
              itemExtent: 24.0)
        ],
      ),
    );
  }
}

Run

Simply copy the source code into your Flutter Project, Build and Run.

Reference.

Download code here.
Follow code author here.