Flutter: Pinned Toolbar - A guide to CustomScrollView with SliverAppBar

Last edited time
Last updated June 7, 2023
Format and Platform

The problem:

In the previous version of the The Playlist App, the toolbar was located above the editor so when the content gets taller, it becomes hard to access the toolbar.
Form( key: _formKey, child: SingleChildScrollView( child: Padding( padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 16), child: Column(children: [ TextFormField(), TextFormField(), Container( decoration: BoxDecoration(), child: Column( children: [ QuillToolbar.basic(), QuillEditor(), ], ), ), const SizedBox( height: 16, ), Row(children: [ FilledButton(), (Platform.isAndroid || Platform.isIOS) ? TextButton() : Container(), ]) ]), )));
notion image

The solution:

To address this issue, we have pinned the toolbar to the top when the editor is in focus.
We use CustomScrollView with SliverAppBar to pin our own appbar above our custom scrollview:
CustomScrollView( slivers: [ SliverAppBar( automaticallyImplyLeading: false, // removes the back button centerTitle: true, pinned: true, // pins the appbar on top of the scrollview toolbarHeight: isToolBarVisible ? 50 : 0, title: Visibility( // adds the appbar only when needed visible: isToolBarVisible, child: QuillToolbar.basic(), ), ), SliverToBoxAdapter( child: Padding(child: QuillEditor(...)) )])
Et voila!