La barra de búsqueda es un elemento básico de la interfaz de usuario proporcionado por todas y cada una de las aplicaciones o sitios web que usamos para buscar el contenido que necesitamos. La barra de búsqueda básica se puede crear fácilmente, pero la que vamos a crear buscará elementos según una substring ingresada en tiempo real. Veamos cómo crear la barra de búsqueda.
Implementación paso a paso
Paso 1: Crear un proyecto de Flutter.
- Abra el código VS y, usando «Ctrl+Shift+P», seleccione «Flutter: New Project».
- Seleccione la carpeta en la que desea crear su aplicación.
- Luego asigne un nombre a su aplicación.
- Después de presionar «Enter», el SDK de Flutter creará un nuevo proyecto para ti.
Paso 2: después de crear el proyecto, abra el archivo main.dart .
Dart
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This is the root widget
// of your application
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: GFG(),
);
}
}
Paso 3: debajo del widget MyApp, cree un widget con estado y asígnele el nombre que desee. En VS Code, puede intentar escribir stf y el autocompletado le dará un widget con estado como sugerencia, selecciónelo y asígnele el nombre tal como se muestra en el código a continuación.
Dart
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: GFG(),
);
}
}
// This is the widget that will be shown
// as the homepage of your application.
class GFG extends StatefulWidget {
const GFG({Key? key}) : super(key: key);
@override
State<GFG> createState() => _GFGState();
}
class _GFGState extends State<GFG> {
@override
Widget build(BuildContext context) {
return Scaffold();
}
}
Paso 4: ahora en Scaffold, use el parámetro appBar y use el parámetro de acciones de appBar para crear un IconButton dentro de él.
Dart
class GFG extends StatefulWidget {
const GFG({Key? key}) : super(key: key);
@override
State<GFG> createState() => _GFGState();
}
class _GFGState extends State<GFG> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text(
"GeeksForGeeks",
),
actions: [
IconButton(
onPressed: () {
// method to show the search bar
showSearch(
context: context,
// delegate to customize the search bar
delegate: CustomSearchDelegate()
);
},
icon: const Icon(Icons.search),
)
],
),
);
}
}
Paso 5: crear la clase CustomSearchDelegate que amplía SearchDelegate. SearchDelegate tiene 4 anulaciones necesarias que deben implementarse.
Dart
class CustomSearchDelegate extends SearchDelegate {
// Demo list to show querying
List<String> searchTerms = [
"Apple",
"Banana",
"Mango",
"Pear",
"Watermelons",
"Blueberries",
"Pineapples",
"Strawberries"
];
// first overwrite to
// clear the search text
@override
List<Widget>? buildActions(BuildContext context) {
return [
IconButton(
onPressed: () {
query = '';
},
icon: Icon(Icons.clear),
),
];
}
// second overwrite to pop out of search menu
@override
Widget? buildLeading(BuildContext context) {
return IconButton(
onPressed: () {
close(context, null);
},
icon: Icon(Icons.arrow_back),
);
}
// third overwrite to show query result
@override
Widget buildResults(BuildContext context) {
List<String> matchQuery = [];
for (var fruit in searchTerms) {
if (fruit.toLowerCase().contains(query.toLowerCase())) {
matchQuery.add(fruit);
}
}
return ListView.builder(
itemCount: matchQuery.length,
itemBuilder: (context, index) {
var result = matchQuery[index];
return ListTile(
title: Text(result),
);
},
);
}
// last overwrite to show the
// querying process at the runtime
@override
Widget buildSuggestions(BuildContext context) {
List<String> matchQuery = [];
for (var fruit in searchTerms) {
if (fruit.toLowerCase().contains(query.toLowerCase())) {
matchQuery.add(fruit);
}
}
return ListView.builder(
itemCount: matchQuery.length,
itemBuilder: (context, index) {
var result = matchQuery[index];
return ListTile(
title: Text(result),
);
},
);
}
}
Con esto, hemos creado nuestra barra de búsqueda.
Código dardo completo:
Dart
class CustomSearchDelegate extends SearchDelegate {
// Demo list to show querying
List<String> searchTerms = [
"Apple",
"Banana",
"Mango",
"Pear",
"Watermelons",
"Blueberries",
"Pineapples",
"Strawberries"
];
// first overwrite to
// clear the search text
@override
List<Widget>? buildActions(BuildContext context) {
return [
IconButton(
onPressed: () {
query = '';
},
icon: Icon(Icons.clear),
),
];
}
// second overwrite to pop out of search menu
@override
Widget? buildLeading(BuildContext context) {
return IconButton(
onPressed: () {
close(context, null);
},
icon: Icon(Icons.arrow_back),
);
}
// third overwrite to show query result
@override
Widget buildResults(BuildContext context) {
List<String> matchQuery = [];
for (var fruit in searchTerms) {
if (fruit.toLowerCase().contains(query.toLowerCase())) {
matchQuery.add(fruit);
}
}
return ListView.builder(
itemCount: matchQuery.length,
itemBuilder: (context, index) {
var result = matchQuery[index];
return ListTile(
title: Text(result),
);
},
);
}
// last overwrite to show the
// querying process at the runtime
@override
Widget buildSuggestions(BuildContext context) {
List<String> matchQuery = [];
for (var fruit in searchTerms) {
if (fruit.toLowerCase().contains(query.toLowerCase())) {
matchQuery.add(fruit);
}
}
return ListView.builder(
itemCount: matchQuery.length,
itemBuilder: (context, index) {
var result = matchQuery[index];
return ListTile(
title: Text(result),
);
},
);
}
}
Producción: