Flutter Appbar UI design - flutter

Question

How to create appbar like this? In flutter default search button I will have to click on the SearchIcon later it will give the search tab but i need it directly like the image posted and also along with the seachbar notification button and navigation drawer.
Edit:
Below is the final working code
with the help of Ravindra S. Patil
import 'package:flutter/material.dart';
import '../widget/app_drawer.dart';
import '../widget/bottom_navigation.dart';
import 'package:badges/badges.dart';
// ignore: use_key_in_widget_constructors
class HomeScreen extends StatefulWidget {
static String routeName = '/home_screen';
#override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
#override
Widget build(BuildContext context) {
return Scaffold(
bottomNavigationBar: BottomNavigation(),
endDrawerEnableOpenDragGesture: false,
drawer: AppDrawer(),
key: _scaffoldKey,
appBar: AppBar(
automaticallyImplyLeading: false,
toolbarHeight: 80,
title: Container(
margin: const EdgeInsets.only(
top: 20,
bottom: 20,
),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(
10,
),
),
child: TextFormField(
decoration: InputDecoration(
enabledBorder: const OutlineInputBorder(
borderSide: BorderSide(
color: Colors.white,
),
borderRadius: BorderRadius.all(
Radius.circular(
10.0,
),
),
),
focusedBorder: const OutlineInputBorder(
borderSide: BorderSide(
color: Colors.white,
),
borderRadius: BorderRadius.all(
Radius.circular(
10.0,
),
),
),
hintText: 'Search petients,transcript,contacts',
prefixIcon: IconButton(
icon: Icon(Icons.menu),
onPressed: () => {
if (_scaffoldKey.currentState.isDrawerOpen)
{_scaffoldKey.currentState.openEndDrawer()}
else
{_scaffoldKey.currentState.openDrawer()}
},
),
suffixIcon: Stack(
children: [
Container(
padding: const EdgeInsets.only(
top: 8,
),
child: const Icon(
Icons.notifications,
size: 30,
),
),
Positioned(
right: 15,
child: Badge(
shape: BadgeShape.circle,
badgeColor: Colors.red,
borderRadius: BorderRadius.circular(
5,
),
badgeContent: const Text(
'2',
style: TextStyle(
color: Colors.white,
),
),
),
),
],
),
border: const OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(
10.0,
),
),
),
),
),
),
),
);
}
}

Answer 1

Try below code hope its help to you. Used badges package here for display notification.
Refer TextFormField here
Refer InputDecoration here
Scaffold(
appBar: AppBar(
toolbarHeight: 80,
title: Container(
margin: EdgeInsets.only(
top: 20,
bottom: 20,
),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(
10,
),
),
child: TextFormField(
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.white,
),
borderRadius: const BorderRadius.all(
const Radius.circular(
10.0,
),
),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.white,
),
borderRadius: const BorderRadius.all(
const Radius.circular(
10.0,
),
),
),
hintText: 'Search petients,transcript,contacts',
prefixIcon: Icon(
Icons.menu,
),
suffixIcon: Stack(
children: [
Container(
padding: EdgeInsets.only(
top: 8,
),
child: Icon(
Icons.notifications,
size: 30,
),
),
Positioned(
right: 15,
child: Badge(
shape: BadgeShape.circle,
badgeColor: Colors.red,
borderRadius: BorderRadius.circular(
5,
),
badgeContent: Text(
'2',
style: TextStyle(
color: Colors.white,
),
),
),
),
],
),
border: OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(
10.0,
),
),
),
),
),
),
),
);
Your result screen->

Answer 2

import 'package:flutter/material.dart';
class SearchList extends StatefulWidget {
SearchList({ Key key }) : super(key: key);
#override
_SearchListState createState() => new _SearchListState();
}
class _SearchListState extends State<SearchList>
{
Widget appBarTitle = new Text("Search Sample", style: new TextStyle(color: Colors.white),);
Icon actionIcon = new Icon(Icons.search, color: Colors.white,);
final key = new GlobalKey<ScaffoldState>();
final TextEditingController _searchQuery = new TextEditingController();
List<String> _list;
bool _IsSearching;
String _searchText = "";
_SearchListState() {
_searchQuery.addListener(() {
if (_searchQuery.text.isEmpty) {
setState(() {
_IsSearching = false;
_searchText = "";
});
}
else {
setState(() {
_IsSearching = true;
_searchText = _searchQuery.text;
});
}
});
}
#override
void initState() {
super.initState();
_IsSearching = false;
init();
}
void init() {
_list = List();
_list.add("Google");
_list.add("IOS");
_list.add("Andorid");
_list.add("Dart");
_list.add("Flutter");
_list.add("Python");
_list.add("React");
_list.add("Xamarin");
_list.add("Kotlin");
_list.add("Java");
_list.add("RxAndroid");
}
#override
Widget build(BuildContext context) {
return new Scaffold(
key: key,
appBar: buildBar(context),
body: new ListView(
padding: new EdgeInsets.symmetric(vertical: 8.0),
children: _IsSearching ? _buildSearchList() : _buildList(),
),
);
}
List<ChildItem> _buildList() {
return _list.map((contact) => new ChildItem(contact)).toList();
}
List<ChildItem> _buildSearchList() {
if (_searchText.isEmpty) {
return _list.map((contact) => new ChildItem(contact))
.toList();
}
else {
List<String> _searchList = List();
for (int i = 0; i < _list.length; i++) {
String name = _list.elementAt(i);
if (name.toLowerCase().contains(_searchText.toLowerCase())) {
_searchList.add(name);
}
}
return _searchList.map((contact) => new ChildItem(contact))
.toList();
}
}
Widget buildBar(BuildContext context) {
return new AppBar(
centerTitle: true,
title: appBarTitle,
actions: <Widget>[
new IconButton(icon: actionIcon, onPressed: () {
setState(() {
if (this.actionIcon.icon == Icons.search) {
this.actionIcon = new Icon(Icons.close, color: Colors.white,);
this.appBarTitle = new TextField(
controller: _searchQuery,
style: new TextStyle(
color: Colors.white,
),
decoration: new InputDecoration(
prefixIcon: new Icon(Icons.search, color: Colors.white),
hintText: "Search...",
hintStyle: new TextStyle(color: Colors.white)
),
);
_handleSearchStart();
}
else {
_handleSearchEnd();
}
});
},),
]
);
}
void _handleSearchStart() {
setState(() {
_IsSearching = true;
});
}
void _handleSearchEnd() {
setState(() {
this.actionIcon = new Icon(Icons.search, color: Colors.white,);
this.appBarTitle =
new Text("Search Sample", style: new TextStyle(color: Colors.white),);
_IsSearching = false;
_searchQuery.clear();
});
}
}
class ChildItem extends StatelessWidget {
final String name;
ChildItem(this.name);
#override
Widget build(BuildContext context) {
return new ListTile(title: new Text(this.name));
}
}