[英]How do i make this search bar work in flutter
Here is the code for my search bar, whenever i enter some value in the search bar i want it to show items available on the list which matches the entered value.这是我的搜索栏的代码,每当我在搜索栏中输入一些值时,我希望它显示列表中与输入的值匹配的可用项目。
class HeaderWithSearchBox extends StatelessWidget {
const HeaderWithSearchBox({
Key key,
@required this.size,
}) : super(key: key);
final Size size;
@override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.only(bottom: kDefaultPadding * 1.5),
// It will cover 20% of our total height
// height: size.height * 0.2,
child: Stack(
children: <Widget>[
Container(
padding: EdgeInsets.only(
left: kDefaultPadding,
right: kDefaultPadding,
bottom: 36 + kDefaultPadding,
),
//height: size.height * 0.2 - 27,
decoration: BoxDecoration(
//color: kPrimaryColor,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(36),
bottomRight: Radius.circular(36),
),
),
),
Positioned(
bottom: 0,
left: 0,
right: 0,
top: 20,
child: Container(
alignment: Alignment.center,
margin: EdgeInsets.symmetric(horizontal: kDefaultPadding),
padding: EdgeInsets.symmetric(horizontal: kDefaultPadding),
height: 54,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20),
boxShadow: [
BoxShadow(
offset: Offset(0, 10),
blurRadius: 50,
color: kPrimaryColor.withOpacity(0.23),
),
],
),
child: Row(
children: <Widget>[
Expanded(
child: Center(
child: TextField(
onChanged: (value) {
},
decoration: InputDecoration(
hintText: "Search",
hintStyle: TextStyle(
color: kPrimaryColor.withOpacity(0.5),
),
enabledBorder: InputBorder.none,
focusedBorder: InputBorder.none,
),
),
),
),
Icon(Icons.search),
],
),
),
),
],
),
);
}
}
whenever i enter some value in the search bar i want it to show items available on the list which matches the entered value.每当我在搜索栏中输入一些值时,我希望它显示列表中与输入值匹配的可用项目。 when the item is clicked i want to open new page, how can i do that?
单击该项目时,我想打开新页面,我该怎么做? Any help will be appreciated.
任何帮助将不胜感激。
This works这有效
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({
Key key,
}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
List fooList = ['one', 'two', 'three', 'four', 'five'];
List filteredList = List();
@override
void initState() {
super.initState();
filteredList = fooList;
}
void filter(String inputString) {
filteredList =
fooList.where((i) => i.toLowerCase().contains(inputString)).toList();
setState(() {});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Column(
children: [
TextField(
decoration: InputDecoration(
hintText: 'Search ',
hintStyle: TextStyle(
fontSize: 14,
),
),
onChanged: (text) {
text = text.toLowerCase();
filter(text);
},
),
Expanded(
child: ListView.builder(
itemCount: filteredList.length,
itemBuilder: (BuildContext context, int index) => ListTile(
title: Text(filteredList[index]),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Display(
text: filteredList[index],
),
),
);
},
),
),
)
],
),
);
}
}
class Display extends StatelessWidget {
final String text;
const Display({Key key, this.text}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Text(text),
),
);
}
}
Use Dependency:使用依赖:
dependencies:
flappy_search_bar: ^1.7.2
Code:代码:
import 'dart:math';
import 'package:flappy_search_bar/flappy_search_bar.dart';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Home(),
);
}
}
class Post {
final String title;
final String body;
Post(this.title, this.body);
}
class Home extends StatefulWidget {
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
final SearchBarController<Post> _searchBarController = SearchBarController();
bool isReplay = false;
Future<List<Post>> _getALlPosts(String text) async {
List<Post> posts = [];
var random = new Random();
for (int i = 0; i < 10; i++) {
posts
.add(Post("$text $i", "body random number : ${random.nextInt(100)}"));
}
return posts;
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: SearchBar<Post>(
minimumChars: 1,
searchBarPadding: EdgeInsets.symmetric(horizontal: 10),
headerPadding: EdgeInsets.symmetric(horizontal: 10),
listPadding: EdgeInsets.symmetric(horizontal: 10),
onSearch: _getALlPosts,
searchBarController: _searchBarController,
placeHolder: Center(
child: Text(
"PlaceHolder",
style: TextStyle(fontSize: 30),
)),
cancellationWidget: Text("Cancel"),
emptyWidget: Text("empty"),
onCancelled: () {
print("Cancelled triggered");
},
mainAxisSpacing: 10,
onItemFound: (Post post, int index) {
return Container(
color: Colors.lightBlue,
child: ListTile(
title: Text(post.title),
isThreeLine: true,
subtitle: Text(post.body),
onTap: () {
Navigator.of(context)
.push(MaterialPageRoute(builder: (context) => Detail()));
},
),
);
},
),
),
);
}
}
class Detail extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: SafeArea(
child: Center(child: Text("Detail", style: TextStyle(fontSize: 30),)),
),
);
}
}
Output: Output:
Usually I use blocs for the filtering part and any implementing stuff to make this page just for design but this is just for explanation.通常我使用块作为过滤部分和任何实现的东西来制作这个页面只是为了设计,但这只是为了解释。
First you should filter list on change assuming x is the list then it should be like this:首先,您应该在更改时过滤列表,假设 x 是列表,那么它应该是这样的:
TextField(
onChanged: (value) {
x = x.where((i) => x.contains(value))
},
decoration: InputDecoration(
hintText: "Search",
hintStyle: TextStyle(
color: kPrimaryColor.withOpacity(0.5),
),
enabledBorder: InputBorder.none,
focusedBorder: InputBorder.none,
),
then you should add a container to show filtered list:那么你应该添加一个容器来显示过滤列表:
Container(
child: ListView.builder(
itemCount: x.lenghth,
itemBuilder: (context, index) {
return Text(x[index]);
}
)
),
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.