我想在Flutter中添加自定义的SliverAppBar，如下所示：
我想要的SliverAppBar，
但是现在我只能做到以下这种效果：
我得到的SliverAppBar。
请查看以下sliver动画。
我的SliverAppBar代码如下：
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(),
],
)
]))
],
),
);
}
}
我用来制作歌曲标题的代码如下：
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),
)
],
),
);
}
}
我添加了 background_app_bar: ^1.0.2 以将图像作为 appBar 的背景，并且还添加了 sliver_fab: ^1.0.0 依赖项，以在 SliverAppBar 上获取浮动按钮。