wp_search_bar

Description:

wp search bar

WhatsApp Search Bar for Flutter #
WhatsApp Search Bar its a Flutter plugin enable you to build a flexible search bar with buttons filter like WhatsApp Search bar
|
|
||
Usage #
1.Install Package
With Dart:
$ dart pub add wp_search_bar
copied to clipboard
With Flutter:
$ flutter pub add wp_search_bar
copied to clipboard
This will add a line like this to you package's pubspec.yaml (and run an implicit dart pub get):
dependencies:
wp_search_bar: ^0.1.4
copied to clipboard
2.Define data that you want to show in listview
List<Map<String, String>> data = [
{'name': "Mohammad", 'message': "message from mhammad"},
{'name': "Kamel", 'message': "message from kamel"},
{'name': "Nadine", 'message': "how are you ?"},
{'name': "Joseph", 'message': "hello...!"},
{'name': "71966691", 'message': "Hi"},
{'name': "03405609", 'message': "hiiii...."},
{'name': "Mohammad", 'message': "message from mhammad"},
{'name': "Kamel", 'message': "message from kamel"},
{'name': "Nadine", 'message': "how are you ?"},
{'name': "Joseph", 'message': "hello...!"},
{'name': "71966691", 'message': "Hi"},
{'name': "03405609", 'message': "hiiii...."},
];
copied to clipboard
3.Define Button filters that should use in search bar.
var buttonFilters = {
'name': {
'name': 'name',
'selected': false,
'title': 'Name',
'operation': 'CONTAINS',
'icon': Icons.supervised_user_circle_rounded,
},
'message': {
'name': 'message',
'selected': false,
'title': 'Message',
'operation': 'CONTAINS',
'icon': Icons.message,
},
'date': {
'name': 'Date',
'selected': false,
'title': 'Date',
'operation': 'CONTAINS',
'icon': Icons.date_range,
},
'other': {
'name': 'other',
'selected': false,
'title': 'Other',
'operation': 'CONTAINS',
'icon': Icons.more,
},
};
copied to clipboard
4.Build the Search bar
@override
Widget build(BuildContext context) {
return MaterialApp(
home: WPSearchBar(
listOfFilters: buttonFilters,
materialDesign: const {
'title': {'text': 'WhatsApp'},
},
onSearch: (filter, value, operation) {
},
body: Container(
decoration: const BoxDecoration(color: Color(0xff121b22)),
child: ListView.builder(
itemCount: filteredData.length,
itemBuilder: (context, index) {
var item = filteredData[index];
return ListTile(
title: Text(
item['name'].toString(),
style: const TextStyle(
color: Colors.white, fontWeight: FontWeight.bold),
),
);
}),
),
),
);
}
}

copied to clipboard
To add Sidebar Menu #


Screenshot 1
Screenshot 2






use a GlobalKey for scaffold #
final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();

@override
Widget build(BuildContext context) {
return Scaffold(
key: _scaffoldKey,
endDrawer: SidebarMenu(),
body: WPSearchBar(
actions: [
IconButton(
icon: const Icon(Icons.menu),
onPressed: () {
_scaffoldKey.currentState?.openEndDrawer();
},
),
],
....
);
}
copied to clipboard