Custom SliverAppBar in Flutter

Question

I want to add custom SliverAppBar in flutter like below The SliverAppBar I want

but I am only able to do as following The SliverAppBar I get cheak the sliver animation at https://dribbble.com/shots/11466567-Music-Player

my code for SliverAppBar is :

import 'package:background_app_bar/background_app_bar.dart';
import 'package:flutter/material.dart';
import 'package:music_player/widgets/song_tile.dart';
import 'package:sliver_fab/sliver_fab.dart';

class PlaylistScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SliverFab(
        floatingWidget: FloatingActionButton(
          backgroundColor: const Color(0xffD933C3),
          onPressed: () {},
          child: Icon(
            Icons.play_arrow,
            color: Colors.white,
            size: 38,
          ),
        ),
        floatingPosition: FloatingPosition(
          right: 32,
        ),
        expandedHeight: MediaQuery.of(context).size.height * 0.4,
        slivers: [
          SliverAppBar(
            expandedHeight: MediaQuery.of(context).size.height * 0.4,
            backgroundColor: const Color(0xff1c0436),
            pinned: true,
            floating: true,
            leading: IconButton(icon: Icon(Icons.arrow_back), onPressed: () {}),
            actions: [
              IconButton(icon: Icon(Icons.more_vert), onPressed: () {})
            ],
            flexibleSpace: BackgroundFlexibleSpaceBar(
              title: new Text('A Synthwave Mix'),
              centerTitle: true,
              titlePadding: const EdgeInsets.only(left: 20.0, bottom: 20.0),
              background: ClipRRect(
                borderRadius:
                    BorderRadius.vertical(bottom: Radius.circular(50)),
                child: Image.network(
                  'https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/4bb82b72535211.5bead62fe26d5.jpg',
                  height: MediaQuery.of(context).size.height * 0.43,
                  width: MediaQuery.of(context).size.width,
                  fit: BoxFit.cover,
                ),
              ),
            ),
          ),
          SliverList(
              delegate: SliverChildListDelegate([
            Column(
              children: [
                SongTile(),
                SongTile(),
                SongTile(),
                SongTile(),
                SongTile(),
                SongTile(),
                SongTile(),
                SongTile(),
                SongTile(),
                SongTile(),
                SongTile(),
                SongTile(),
                SongTile(),
                SongTile(),
                SongTile(),
                SongTile(),
                SongTile(),
              ],
            )
          ]))
        ],
      ),
    );
  }
}

my code for the song tile is

class SongTile extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 24, vertical: 14),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          GestureDetector(
            onTap: () {
              Navigator.of(context).push(MaterialPageRoute(builder: (ctx) {
                return MusicPlayerScreen();
              }));
            },
            child: Row(
              children: [
                Container(
                  decoration: BoxDecoration(
                      color: const Color(0xff3b1f50),
                      borderRadius: BorderRadius.all(Radius.circular(25))),
                  child: Icon(Icons.music_note),
                  padding: EdgeInsets.all(16),
                ),
                SizedBox(
                  width: 25,
                ),
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      'Song Title with Desc ',
                      style: GoogleFonts.mukta(
                          fontSize: 17,
                          color: Colors.white,
                          fontWeight: FontWeight.bold),
                    ),
                    Text(
                      'Playlist Name',
                      style: GoogleFonts.mukta(
                          fontSize: 13,
                          color: Theme.of(context).textTheme.subtitle2.color,
                          fontWeight: FontWeight.bold),
                    )
                  ],
                ),
              ],
            ),
          ),
          Icon(
            Icons.favorite,
            color: const Color(0xff3b1f50),
          )
        ],
      ),
    );
  }
}

I added background_app_bar: ^1.0.2 for getting the image as a background for the appBar and also add sliver_fab: ^1.0.0 dependency to get the floating button at SliverAppBar.

Answer 1

You can achieve by wrapping FlexibleSpaceBar inside Container see code below

class PlaylistScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SliverFab(
        floatingWidget: FloatingActionButton(
          backgroundColor: const Color(0xffD933C3),
          onPressed: () {},
          child: Icon(
            Icons.play_arrow,
            color: Colors.white,
            size: 38,
          ),
        ),
        floatingPosition: FloatingPosition(
          right: 32,
        ),
        expandedHeight: MediaQuery.of(context).size.height * 0.4,
        slivers: [
          SliverAppBar(
            expandedHeight: MediaQuery.of(context).size.height * 0.4,
            backgroundColor: const Color(0xff1c0436),
            pinned: true,
            floating: true,
            leading: IconButton(icon: Icon(Icons.arrow_back), onPressed: () {}),
            actions: [
              IconButton(icon: Icon(Icons.more_vert), onPressed: () {})
            ],
            flexibleSpace: Container(
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: NetworkImage(
                        'https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/4bb82b72535211.5bead62fe26d5.jpg'), //your image
                    fit: BoxFit.cover,
                  ),
                  borderRadius: BorderRadius.vertical(
                    bottom:
                        Radius.circular(50),
                  ),
                ),
                child: FlexibleSpaceBar(
                    collapseMode: CollapseMode.pin,
                    centerTitle: true,
                    title: Text('A Synthwave Mix'))),
          ),
          SliverList(
              delegate: SliverChildListDelegate([
            Column(
              children: [
                SongTile(),
                SongTile(),
                SongTile(),
                SongTile(),
                SongTile(),
                SongTile(),
                SongTile(),
                SongTile(),
                SongTile(),
                SongTile(),
                SongTile(),
                SongTile(),
                SongTile(),
                SongTile(),
                SongTile(),
                SongTile(),
                SongTile(),
              ],
            )
          ]))
        ],
      ),
    );
  }
}