My problem
I want make search icons button text field appears at the bottom of the button when button is clicked
Are there any documents or sites I can refer to?
My code -- makes StatefulWidget --
appBar: AppBar(
backgroundColor: const Color(0xffffffff),
centerTitle: true,
title: Text(
'CREW',
style: TextStyle(color: Colors.black, fontWeight: FontWeight.w900),
),
elevation: 0.0,
actions: [
IconButton(icon: Icon(Icons.search), onPressed: (){
}),
IconButton(icon: Icon(Icons.notifications), onPressed: null),
],
**Try below code to add search bar in appbar.**
AppBar(
backgroundColor: const Color(0xffffffff),
centerTitle: true,
title: Text(
'CREW',
style: TextStyle(color: Colors.black, fontWeight: FontWeight.w900),
),
elevation: 0.0,
actions: [
// Navigate to the Search Screen
IconButton(
onPressed: () => Navigator.of(context)
.push(MaterialPageRoute(builder: (_) => const SearchPage())),
icon: const Icon(Icons.search)),
IconButton(icon: Icon(Icons.notifications), onPressed: null),
],
),
//search ui & page
class SearchPage extends StatelessWidget {
const SearchPage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
// The search area here
title: Container(
width: double.infinity,
height: 40,
decoration: BoxDecoration(
color: Colors.white, borderRadius: BorderRadius.circular(5)),
child: Center(
child: TextField(
decoration: InputDecoration(
prefixIcon: const Icon(Icons.search),
suffixIcon: IconButton(
icon: const Icon(Icons.clear),
onPressed: () {
/* Clear the search field */
},
),
hintText: 'Search...',
border: InputBorder.none),
),
),
)),
);
}