Flutter Advanced : Build Beautiful Material Search App or Integrate it with Any App

Codepur · 184K views · 2018 · 24:46

Open on YouTube

Software (other)UX & UI designtutorialdated

Why Stack Overflow recommends it

Stack Overflow users link it when answering or asking about adding a search bar or SearchDelegate to a Flutter app.

Recommended by 1 people across 1 different months, 2020 to 2021.

What it is

A roughly 25-minute Flutter tutorial from the Codepur channel (Pawan Kumar) on building a material-design search bar and plugging it into any app. It was recorded in 2018 while Flutter was still in beta.

What people said

Recommends Mateen · 2020-04 · Stack Overflow · on “Container height listener”

You can follow this tutorial [this video] OR Here is a little example for your expected result: SliverAppBar( expandedHeight: _width / 3.0, backgroundColor: Colors.white, leading: InkWell( onTap: () => Navigator.of(context).pop(), child: Container( alignment: Alignment.center, child: Container( width: 30, height: 30, alignment: Alignment.center, decoration: BoxDecoration( color: Colors.white, ), child: Icon(Icons.arrow_back,)), ), ), elevation: 0.1, title: Container( margin: EdgeInsets.only( left: 16, ), child: Text( "${widget.title}", style: TextStyle( color: AppTheme.black, fontSize: 24, fontWeight: FontWeight.w600), ), ), floating: true, pinned: true, snap: false, stretch: true, centerTitle: f

Cites goldilocks · 2020-12 · Stack Overflow · on “Using search delegate for a listview generated from Future”

Here is my listview generated from a Future from a json file. class _ChorusPage extends State<ChorusPage> { static Future<List<Chorus>> getList() async { var data = await rootBundle.loadString('assets/chorusJson.json'); var jsonMap = json.decode(data); // cast<Map<String, dynamic>>(); List<Chorus> choruses = []; for (var c in jsonMap) { Chorus chorus = Chorus.fromJson(c); choruses.add(chorus); } // var = User.fromJson(parsedJson); // choruses = jsonMap.map<Chorus>((json) => Chorus.fromJson(json)).toList(); print(choruses.length); return choruses; } Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar(title: new Text('Chorus'), actions: <Widget>[ IconButton(icon: Icon(

Cites Lash · 2021-09 · Stack Overflow · on “Implementation of basic flutter search bar failed”

So I followed a tutorial on how to implement a basic Flutter search bar with search Delegation. You can find the tutorial on this link: [this video] class DataSearch extends SearchDelegate<String>{ final wordssuggest=["Word1","Word2"]; final recentwords=["Word1"]; @override List<Widget> buildActions(BuildContext context){ return [ IconButton(onPressed: (){ query=" "; }, icon: Icon(Icons.clear)) ]; //actions for appbar } @override Widget buildLeading(BuildContext context){ return IconButton(onPressed: (){ close(context, null); }, icon: Icon(Icons.search)); //leasding icon on the left of the app bar } @override Widget buildResults(BuildContext context){ //show some result return Container( color: C