Hola usuario de nuestra página web, descubrimos la respuesta a tu interrogante, continúa leyendo y la hallarás más abajo.
Solución:
Con la ayuda de @aziza, escribo un fragmento de código de detalle de la vista de búsqueda con el filtro de lista a continuación. ayudará a los demás
import 'package:flutter/material.dart';
class SearchList extends StatefulWidget
SearchList( Key key ) : super(key: key);
@override
_SearchListState createState() => new _SearchListState();
class _SearchListState extends State
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();
final TextEditingController _searchQuery = new TextEditingController();
List _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 _buildList()
return _list.map((contact) => new ChildItem(contact)).toList();
List _buildSearchList()
if (_searchText.isEmpty)
return _list.map((contact) => new ChildItem(contact))
.toList();
else
List _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: [
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));
Producción :
Solo necesita alternar entre el estado cada vez que el usuario toque el icono. Además de refactorizar un poco una limpieza de código de su lado, este simple ejemplo debería ayudarlo a comenzar.
class SearchAppBar extends StatefulWidget
@override
_SearchAppBarState createState() => new _SearchAppBarState();
class _SearchAppBarState extends State
Widget appBarTitle = new Text("AppBar Title");
Icon actionIcon = new Icon(Icons.search);
@override
Widget build(BuildContext context)
return new Scaffold(
appBar: new AppBar(
centerTitle: true,
title:appBarTitle,
actions: [
new IconButton(icon: actionIcon,onPressed:()
setState(()
if ( this.actionIcon.icon == Icons.search)
this.actionIcon = new Icon(Icons.close);
this.appBarTitle = new TextField(
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)
),
);
else
this.actionIcon = new Icon(Icons.search);
this.appBarTitle = new Text("AppBar Title");
);
,),]
),
);
Deberías usar SearchDelegate que sale de la caja con Flutter. Aquí hay un pequeño video de cómo funciona:
Solución completa:
class SearchPage extends StatefulWidget
@override
_SearchPageState createState() => _SearchPageState();
class _SearchPageState extends State
String _result;
@override
Widget build(BuildContext context)
return Scaffold(
appBar: AppBar(title: Text("Search")),
body: Center(
child: Column(
children: [
Text(_result ?? "", style: TextStyle(fontSize: 18)),
RaisedButton(
onPressed: () async
var result = await showSearch(
context: context,
delegate: CustomDelegate(),
);
setState(()
_result = result;
);
,
child: Text("Search"),
),
],
),
),
);
class CustomDelegate extends SearchDelegate
List data = nouns.take(100).toList();
@override
List buildActions(BuildContext context) => [IconButton(icon: Icon(Icons.clear), onPressed: () => query = '')];
@override
Widget buildLeading(BuildContext context) => IconButton(icon: Icon(Icons.chevron_left), onPressed: () => close(context, null));
@override
Widget buildResults(BuildContext context) => Container();
@override
Widget buildSuggestions(BuildContext context)
var listToShow;
if (query.isNotEmpty)
listToShow = data.where((e) => e.contains(query) && e.startsWith(query)).toList();
else
listToShow = data;
return ListView.builder(
itemCount: listToShow.length,
itemBuilder: (_, i)
var noun = listToShow[i];
return ListTile(
title: Text(noun),
onTap: () => close(context, noun),
);
,
);
Si te ha resultado útil este artículo, te agradeceríamos que lo compartas con el resto desarrolladores y nos ayudes a dar difusión a nuestra información.
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)