Flutter animation sliver - flutter

Question

I'm a flutter developer. I want to build my Appbar with some fancy animation like the below gif.
I think maybe this "Appbar" must be SliverPersistentHeader and AnimatedPosition. But I don't know how to do it.

Answer 1

Please try this below example code of similar kind
class AnimatedAppBar extends StatefulWidget {
const AnimatedAppBar({Key key}) : super(key: key);
#override
_AnimatedAppBarState createState() => _AnimatedAppBarState();
}
class _AnimatedAppBarState extends State<AnimatedAppBar> {
final TextEditingController stateController = TextEditingController();
final FocusNode stateFocus = FocusNode();
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: NestedScrollView(
headerSliverBuilder:
(BuildContext context, bool innnerBoxIsScrolled) {
return <Widget>[
SliverAppBar(
expandedHeight: 150.0,
floating: false,
pinned: true,
backgroundColor: Colors.blue,
automaticallyImplyLeading: false,
titleSpacing: 0.0,
centerTitle: false,
elevation: 0.0,
leadingWidth: 0.0,
title: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
if (innnerBoxIsScrolled != null &&
innnerBoxIsScrolled == true)
Padding(
padding: EdgeInsets.symmetric(
horizontal: 10.0,
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Icon(
Icons.note,
color: Colors.white,
),
Icon(
Icons.note,
color: Colors.white,
),
Icon(
Icons.note,
color: Colors.white,
),
Icon(
Icons.note,
color: Colors.white,
),
Icon(
Icons.fullscreen,
color: Colors.white,
),
Icon(
Icons.search,
color: Colors.white,
),
Icon(
Icons.notifications,
color: Colors.white,
),
],
),
),
],
),
flexibleSpace: FlexibleSpaceBar(
background: Container(
width: MediaQuery.of(context).size.width,
child: Stack(
alignment: Alignment.center,
children: [
Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: 10.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
SizedBox(
width: 10.0,
),
/* State */
Expanded(
child: TextFormField(
autovalidateMode:
AutovalidateMode.onUserInteraction,
/* autovalidate is disabled */
controller: stateController,
inputFormatters: [
FilteringTextInputFormatter.deny(
RegExp(r"\s\s")),
FilteringTextInputFormatter.deny(RegExp(
r'(\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff])')),
],
keyboardType: TextInputType.text,
maxLength: 160,
onChanged: (val) {},
maxLines: 1,
validator: (value) {},
focusNode: stateFocus,
autofocus: false,
decoration: InputDecoration(
errorMaxLines: 3,
counterText: "",
filled: true,
fillColor: Colors.white,
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(4)),
borderSide: BorderSide(
width: 1,
color: Color(0xffE5E5E5),
),
),
disabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(4)),
borderSide: BorderSide(
width: 1,
color: Color(0xffE5E5E5),
),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(4)),
borderSide: BorderSide(
width: 1,
color: Color(0xffE5E5E5),
),
),
border: OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(4)),
borderSide: BorderSide(
width: 1,
),
),
errorBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(4)),
borderSide: BorderSide(
width: 1,
color: Colors.red,
)),
focusedErrorBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(4)),
borderSide: BorderSide(
width: 1,
color: Colors.red,
),
),
hintText: "Enter state" ?? "",
),
),
),
SizedBox(
height: 15.0,
),
if (innnerBoxIsScrolled != null &&
innnerBoxIsScrolled == true)
Text(
"Name" ?? "",
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: Colors.black,
),
),
IconButton(
icon: Padding(
padding: const EdgeInsets.all(5.0),
child: Icon(
Icons.notifications,
color: Colors.white,
size: 18,
),
),
onPressed: () {},
)
],
),
SizedBox(
height: 10.0,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Container(
width: MediaQuery.of(context).size.width *
0.20,
child: Column(
crossAxisAlignment:
CrossAxisAlignment.center,
mainAxisAlignment:
MainAxisAlignment.center,
children: [
Container(
width: 50.0,
height: 50.0,
child: Icon(
Icons.note,
color: Colors.white,
),
),
SizedBox(
height: 2.0,
),
Text(
"Attach Docs",
maxLines: 6,
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.center,
),
],
),
),
SizedBox(
width: 5.0,
),
Container(
width: MediaQuery.of(context).size.width *
0.20,
child: Column(
crossAxisAlignment:
CrossAxisAlignment.center,
mainAxisAlignment:
MainAxisAlignment.center,
children: [
Container(
width: 50.0,
height: 50.0,
child: Icon(
Icons.note,
color: Colors.white,
),
),
SizedBox(
height: 2.0,
),
Text(
"Attach Docs",
maxLines: 6,
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.center,
),
],
),
),
SizedBox(
width: 5.0,
),
Container(
width: MediaQuery.of(context).size.width *
0.20,
child: Column(
crossAxisAlignment:
CrossAxisAlignment.center,
mainAxisAlignment:
MainAxisAlignment.center,
children: [
Container(
width: 50.0,
height: 50.0,
child: Icon(
Icons.note,
color: Colors.white,
),
),
SizedBox(
height: 2.0,
),
Text(
"Attach Docs",
maxLines: 6,
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.center,
),
],
),
),
SizedBox(
width: 5.0,
),
Container(
width: MediaQuery.of(context).size.width *
0.20,
child: Column(
crossAxisAlignment:
CrossAxisAlignment.center,
mainAxisAlignment:
MainAxisAlignment.center,
children: [
Container(
width: 50.0,
height: 50.0,
child: Icon(
Icons.note,
color: Colors.white,
),
),
SizedBox(
height: 2.0,
),
Text(
"Attach Docs",
maxLines: 6,
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.center,
),
],
),
),
],
),
],
),
],
),
],
),
),
),
),
];
},
body: Builder(
builder: (BuildContext context) {
return SingleChildScrollView(
child: Column(
children: [
ListView.builder(
itemCount: 100,
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
itemBuilder: (BuildContext context, int index) {
return Padding(
padding: const EdgeInsets.all(4.0),
child: Text("Index value: $index"),
);
},
)
],
),
);
},
),
),
),
);
}
}