How to achieve animated search app bar in flutter? - flutter

Question

I want to achieve the animated search app bar: https://drive.google.com/file/d/1BnykuOZExHusxIRgareKmdaPM6RlswYe/view?usp=sharing
I tried to use a stack and an animated container, to achieve it. however, it was giving renderflex error.
I would like to know if anyone has other suggestions to achieve it.
Following is the code for the custom appbar and search widget:
AppBar:
class CustomHomeAppBar extends ConsumerStatefulWidget with PreferredSizeWidget {
#override
final Size preferredSize;
CustomHomeAppBar({Key? key, required this.title})
: preferredSize = const Size.fromHeight(60.0),
super(key: key);
final String title;
#override
ConsumerState<ConsumerStatefulWidget> createState() =>
_CustomHomeAppBarState();
}
class _CustomHomeAppBarState extends ConsumerState<CustomHomeAppBar> {
#override
Widget build(BuildContext context) {
return AppBar(
backgroundColor: Colors.white,
foregroundColor: Colors.black,
elevation: 0,
title: Stack(children: [
Row(
mainAxisSize: MainAxisSize.min,
children: [
InkWell(
onTap: () {},
child: const CircleAvatar(
radius: 18,
backgroundColor: Colors.teal,
child: CircleAvatar(
backgroundImage: NetworkImage(
"https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80"),
radius: 28,
),
),
),
const SizedBox(
width: 10,
),
Text(
widget.title,
style:
const TextStyle(fontWeight: FontWeight.w400, fontSize: 22),
),
],
),
Positioned(right: 0, child: AnimatedSearchBar())
]));
}
}
search widget:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/src/foundation/key.dart';
import 'package:flutter/src/widgets/framework.dart';
class AnimatedSearchBar extends StatefulWidget {
const AnimatedSearchBar({Key? key}) : super(key: key);
#override
State<AnimatedSearchBar> createState() => _AnimatedSearchBarState();
}
class _AnimatedSearchBarState extends State<AnimatedSearchBar> {
bool _folded = true;
#override
Widget build(BuildContext context) {
return AnimatedContainer(
duration: const Duration(milliseconds: 400),
width: _folded ? 24 : MediaQuery.of(context).size.width - 16,
// height: 56,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(32),
color: Colors.white,
),
child: Row(children: [
Expanded(
child: Container(
// padding: const EdgeInsets.only(left: 16),
decoration:
BoxDecoration(color: Color.fromARGB(255, 212, 207, 207)),
child: !_folded
? const TextField(
decoration: InputDecoration(
hintText: 'Search',
hintStyle: TextStyle(color: Colors.blue),
border: InputBorder.none))
: null,
),
),
AnimatedContainer(
duration: const Duration(milliseconds: 400),
child: InkWell(
onTap: () {
print("clicks");
setState(() {
_folded = !_folded;
});
},
// child: Padding(
// padding: const EdgeInsets.all(16.0),
child: Icon(
_folded ? Icons.search : Icons.close,
color: Colors.blue[900],
),
),
),
// )
]),
);
}
}
It results in the following appbar:
search with stack