Flutter: Pinned Toolbar - A guide to CustomScrollView with SliverAppBar

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(),
      ])
    ]),
  )));

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!