©2020-2024 ioDraw All rights reserved
<> Main entry file
inherit StatelessWidget, And then in the home Attribute SearchBarDemo, This is a custom one Widget, The main code is in this file .
import 'package:flutter/material.dart'; import 'search_bar_demo.dart'; void
main() =>runApp(MyApp()); class MyApp extends StatelessWidget { @override
Widget build(BuildContext context) { return MaterialApp( title:'Flutter Demo',
theme: ThemeData.light(), home: SearchBarDemo() ); } }
<> data file asset.dart
asset.dart Equivalent to data file , At work, these data are transmitted to us in the background , Or write it as a configuration file , Here we will take List Instead . We define two in this document List：
*
searchList : This is equivalent to the data in the database , We're going to search here .
*
recentSuggest ： Current recommended data , When searching , Automatically recommend for us .
const searchList = [ "jiejie- long legs ", "jiejie- Water snake waist ", "gege1- Handsome Europa ", "gege2- little fresh meat " ];
const recentSuggest = [ " recommend -1", " recommend -2" ];
<>AppBar Style making
import 'package:flutter/material.dart'; import 'asset.dart'; class
SearchBarDemo extends StatefulWidget { _SearchBarDemoState createState() =>
_SearchBarDemoState(); } class _SearchBarDemoState extends State<SearchBarDemo>
{ @override Widget build(BuildContext context) { return Scaffold(
appBar:AppBar( title:Text('SearchBarDemo'), actions:<Widget>[ IconButton(
icon:Icon(Icons.search), onPressed: (){ print(' Start searching '); } ), ] ) ); } }
<> rewrite buildActions method ：
buildActions Method, the button to the right of the search bar executes the method , We put one in the method here clear Icon . When clicking on an image , Empty search content .
@override List<Widget> buildActions(BuildContext context){ return [
IconButton( icon:Icon(Icons.clear), onPressed: ()=>query = "",) ]; }
<>buildLeading Method rewriting
The left side of the search bar icon and function of the writing
@override Widget buildLeading(BuildContext context) { return IconButton(
icon: AnimatedIcon( icon: AnimatedIcons.menu_arrow, progress:
transitionAnimation), onPressed: () => close(context, null)); }
<>buildResults Method rewriting
buildResults method , It's the display after finding the content ,
@override Widget buildResults(BuildContext context) { return Container( width:
100.0, height: 100.0, child: Card( color: Colors.redAccent, child: Center(
child: Text(query), ), ), ); }
<>buildSuggestions Method rewriting
The main function of this method is to set recommendations , That is, we type in a word , Then automatically push relevant search results for us
@override Widget buildSuggestions(BuildContext context) { final suggestionList
= query.isEmpty ? recentSuggest : searchList.where((input) =>
input.startsWith(query)).toList(); return ListView.builder( itemCount:
suggestionList.length, itemBuilder: (context, index) => ListTile( title:
RichText( text: TextSpan( text: suggestionList[index].substring(0,
query.length), style: TextStyle( color: Colors.black, fontWeight:
FontWeight.bold), children: [ TextSpan( text:
suggestionList[index].substring(query.length), style: TextStyle(color:
Colors.grey)) ])), )); } }
Technology