Add Search filed in App Bar with Navigation Drawer flutter - flutter

Question

I am newbie into flutter. I have created a Navigation Drawer and it has multiple selection. In each seletion of drawer i have screen which consists of List of Data coming from server.
Now i want add Search Icon to Navigation Bar with Editfield to filter the list detials and update on the screen of any selected item from Navigation Drawer.
Please help me out.. and will be appreciated.
NavigationDrawer Screen
import 'package:flutter/material.dart';
import 'package:innovation_bridge/fragments/AnnouncementsScreen.dart';
import 'package:innovation_bridge/fragments/AttendeesScreen.dart';
import 'package:innovation_bridge/fragments/BookmarksScreen.dart';
import 'package:innovation_bridge/fragments/ExibitorsScreen.dart';
import 'package:innovation_bridge/fragments/HomeScreen.dart';
import 'package:innovation_bridge/fragments/InnovationsScreen.dart';
import 'package:innovation_bridge/fragments/MeetingsScreen.dart';
import 'package:innovation_bridge/fragments/PrivacyPolicyScreen.dart';
import 'package:innovation_bridge/fragments/ProgramScreen.dart';
import 'package:innovation_bridge/fragments/SpeedSessionScreen.dart';
import 'package:innovation_bridge/fragments/TermsConditionsScreen.dart';
import 'package:innovation_bridge/utils/Utils.dart';
class HomeDashboard extends StatefulWidget {
final drawerItems = [
new DrawerItem("Dashboard"),
new DrawerItem("Program"),
new DrawerItem("Exibitors"),
new DrawerItem("Innovations"),
new DrawerItem("Attendees"),
new DrawerItem("Speed Session"),
new DrawerItem("Bookmarks"),
new DrawerItem("Announcements"),
new DrawerItem("Privacy Policy"),
new DrawerItem("Terms & Conditions"),
new DrawerItem("Logout")
];
#override
_HomeDashboardState createState() => _HomeDashboardState();
}
class _HomeDashboardState extends State<HomeDashboard> {
int _selectedDrawerIndex = 0;
//Let's use a switch statement to return the Fragment for a selected item
_getDrawerFragment(int pos) {
switch (pos) {
case 0:
return new HomeScreen();
case 1:
return new ProgramScreen();
case 2:
return new ExibitorsScreen();
case 3:
return new InnovationsScreen();
case 4:
return new AttendeesScreen();
case 5:
return new SpeedSessionScreen();
case 6:
return new BookmarksScreen();
case 7:
return new AnnouncementsScreen();
case 8:
return new PrivacyPolicyScreen();
case 9:
return new TermsConditionsScreen();
default:
return new Text("Error");
}
}
//Let's update the selectedDrawerItemIndex the close the drawer
_onSelectItem(int index) {
setState(() => _selectedDrawerIndex = index);
//we close the drawer
Navigator.of(context).pop();
}
#override
Widget build(BuildContext context) {
List<Widget> drawerOptions = [];
//Let's create drawer list items. Each will have an icon and text
for (var i = 0; i < widget.drawerItems.length; i++) {
var d = widget.drawerItems[i];
drawerOptions.add(
ListTile(
title: new Text(d.title),
selected: i == _selectedDrawerIndex,
onTap: () => _onSelectItem(i),
)
);
}
//Let's scaffold our homepage
return new Scaffold(
appBar: new AppBar(
// We will dynamically display title of selected page
title: new Text(widget.drawerItems[_selectedDrawerIndex].title),
actions: <Widget>[
IconButton(
tooltip: 'Search',
icon: const Icon(Icons.search),
onPressed: (){
},
),
IconButton(
tooltip: 'Search',
icon: const Icon(Icons.filter_list),
onPressed: (){
},
)
],
),
// Let's register our Drawer to the Scaffold
drawer: SafeArea(
child: new Drawer(
child: new Column(
children: <Widget>[
Container(
color: Utils.hexToColor("#F24A1C"),
height: MediaQuery.of(context).size.height / 10,
width: MediaQuery.of(context).size.width,
child: Padding(
padding: EdgeInsets.only(left: 20),
child: Align(
alignment: Alignment.centerLeft,
child: Text('Menu', style: TextStyle(
fontSize: 18,
color: Colors.white
))
),
),
),
new Column(children: drawerOptions)
],
),
),
),
body: _getDrawerFragment(_selectedDrawerIndex),
);
}
}
//Let's define a DrawerItem data object
class DrawerItem {
String title;
IconData icon;
DrawerItem(this.title);
}
Here, in NavigationDrawer Screen, onclick of search icon TextField should enable and in List Screen filter should happen when user starting typing.
List Screen
import 'dart:math';
import 'package:connectivity/connectivity.dart';
import 'package:flutter/material.dart';
import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:innovation_bridge/detailScreens/ProgramDetailScreen.dart';
import 'package:innovation_bridge/dialogs/CommonMessageDialog.dart';
import 'package:innovation_bridge/utils/Utils.dart';
import 'package:table_calendar/table_calendar.dart';
class ProgramScreen extends StatefulWidget {
#override
_ProgramScreenState createState() => _ProgramScreenState();
}
class _ProgramScreenState extends State<ProgramScreen> {
var meteors = [
"Tunguska",
"Crab Pulsar",
"Geminga",
"Calvera",
"Vela X-1",
];
final String uri = 'https://jsonplaceholder.typicode.com/users';
Future<List<Users>> _fetchUsers() async {
print('## inside fetch user == ');
var response = await http.get(Uri.encodeFull(uri));
if (response.statusCode == 200) {
final items = json.decode(response.body).cast<Map<String, dynamic>>();
List<Users> listOfUsers = items.map<Users>((json) {
return Users.fromJson(json);
}).toList();
return listOfUsers;
} else {
throw Exception('Failed to load internet');
}
}
CalendarController _calendarController;
#override
void initState() {
super.initState();
_calendarController = CalendarController();
}
#override
void dispose() {
_calendarController.dispose();
super.dispose();
}
void _onDaySelected(DateTime day, List events) {
print('## CALLBACK: _onDaySelected' +day.toIso8601String());
setState(() {
});
}
void _onVisibleDaysChanged(DateTime first, DateTime last, CalendarFormat format) {
print('CALLBACK: _onVisibleDaysChanged');
}
#override
Widget build(BuildContext context) {
return Container(
child: Column(
children: <Widget>[
Container(
color: Colors.grey[350],
child: _buildTableCalendar(),
),
Expanded(
child: StreamBuilder(
stream: Connectivity().onConnectivityChanged,
builder: (BuildContext context, AsyncSnapshot<ConnectivityResult> snapShot){
if (!snapShot.hasData) return Center(child: CircularProgressIndicator());
var result = snapShot.data;
switch (result) {
case ConnectivityResult.none:
print("no net");
return Center(child: Text("No Internet Connection! none "));
case ConnectivityResult.mobile:
return _listDetials();
case ConnectivityResult.wifi:
print("yes net");
return _listDetials();
default:
return Center(child: Text("No Internet Connection! default"));
}
},
),
)
],
),
);
}
FutureBuilder _listDetials(){
return FutureBuilder(
future: _fetchUsers(),
builder: (context, snapshot){
if (!snapshot.hasData) {
return Center(child: CircularProgressIndicator());
}
if (snapshot.hasError){
return Text('${snapshot.error}');
}
else{
return ListView.builder(
itemCount: 5,
scrollDirection: Axis.vertical,
itemBuilder: (BuildContext context, int index){
return Padding(
padding: EdgeInsets.fromLTRB(15.0, 10.0, 15.0, 4),
child: Container(
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
GestureDetector(
onTap: (){
Navigator.push(context, MaterialPageRoute(
builder: (context) => ProgramDetailScreen()
));
},
child: Text('Program Activity Title', style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w400
)),
),
Padding(padding: EdgeInsets.only(top: 6)),
Row(
children: <Widget>[
Expanded(
flex: 2,
child: Text('Location Name', style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.w500,
color: Colors.blueAccent,
)),
),
Expanded(
flex: 2,
child: Align(
alignment: Alignment.centerRight,
child: Text('Start time - End time', style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.w500,
color: Colors.blueAccent,
))
),
)
],
),
Padding(padding: EdgeInsets.only(top: 6)),
Text('Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.',
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.w400,
),),
ExpansionTile(
title: Text(''),
trailing: Icon(
Icons.face,
size: 36.0,
),
children: <Widget>[
GridView.count(
shrinkWrap: true,
physics: ClampingScrollPhysics(),
crossAxisCount: 3,
crossAxisSpacing: 5.0,
mainAxisSpacing: 5,
childAspectRatio: MediaQuery.of(context).size.width /
(MediaQuery.of(context).size.height / 4),
children: <Widget>[
GestureDetector(
onTap: (){
},
child: Container(
decoration: BoxDecoration(
border: Border.all(
width: 0.9
),
borderRadius: BorderRadius.all(
Radius.circular(5.0) // <--- border radius here
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: EdgeInsets.fromLTRB(6, 5, 0, 0),
child: Text('Session Title',
softWrap: true,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 10,
fontWeight: FontWeight.bold
)),
),
Padding(
padding: EdgeInsets.fromLTRB(6, 1, 0, 0),
child: Text('10:00 - 10:30',
softWrap: true,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 9
)),
),
Padding(
padding: EdgeInsets.fromLTRB(6, 1, 0, 0),
child: Text('Hall B',
softWrap: true,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 9
)),
),
],
),
),
)
]),
],
// onExpansionChanged: (bool expanding) => setState(() => this.isExpanded = expanding),
)
],
),
),
);
},
);
}
},
);
}
// Simple TableCalendar configuration (using Styles)
Widget _buildTableCalendar() {
return TableCalendar(
calendarController: _calendarController,
startingDayOfWeek: StartingDayOfWeek.monday,
headerVisible: true,
initialCalendarFormat: CalendarFormat.week, availableCalendarFormats: const { CalendarFormat.week: 'Week', },
calendarStyle: CalendarStyle(
selectedColor: Colors.deepOrange[400],
todayColor: Colors.deepOrange[200],
markersColor: Colors.brown[700],
outsideDaysVisible: true
),
headerStyle: HeaderStyle(
formatButtonTextStyle: TextStyle().copyWith(color: Colors.white, fontSize: 15.0),
formatButtonDecoration: BoxDecoration(
color: Colors.deepOrange[400],
borderRadius: BorderRadius.circular(10.0),
),
),
onDaySelected: _onDaySelected,
onVisibleDaysChanged: _onVisibleDaysChanged,
);
}
}
Widget createGridView(BuildContext context, List<String> cosmicBodies) {
//I will shuffle my data
cosmicBodies.shuffle();
// Then build my GridView and return it
return new GridView.builder(
itemCount: cosmicBodies.length,
gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3, mainAxisSpacing: 15.0),
itemBuilder: (BuildContext context, int index) {
return new GestureDetector(
child: new Card(
elevation: 5.0,
child: new Container(
alignment: Alignment.centerLeft,
margin: new EdgeInsets.only(top: 10.0, bottom: 10.0, left: 10.0),
child: new Text(cosmicBodies[index]),
),
),
);
});
}
class Users {
int id;
String name;
String username;
String email;
Users({
this.id,
this.name,
this.username,
this.email,
});
factory Users.fromJson(Map<String, dynamic> json) {
return Users(
id: json['id'],
name: json['name'],
email: json['email'],
username: json['username'],
);
}
}