flutter 中的搜索栏实现

Question

Is here any way to implement a search bar using a TextField to accept the query string and using the search icon on being pressed giving the desired results.

Answer 1

dependencies:
  flutter_search_bar: ^2.1.0 

then

import 'package:flutter/material.dart';
    import 'package:flutter_search_bar/flutter_search_bar.dart';
    
    void main() {
      runApp(new SearchBarDemoApp());
    }
    
    class SearchBarDemoApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return new MaterialApp(
            title: 'Search Bar Demo',
            theme: new ThemeData(primarySwatch: Colors.blue),
            home: new SearchBarDemoHome());
      }
    }
    
    class SearchBarDemoHome extends StatefulWidget {
      @override
      _SearchBarDemoHomeState createState() => new _SearchBarDemoHomeState();
    }
    
    class _SearchBarDemoHomeState extends State<SearchBarDemoHome> {
      SearchBar searchBar;
      final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
    
      AppBar buildAppBar(BuildContext context) {
        return new AppBar(
            title: new Text('Search Bar Demo'),
            actions: [searchBar.getSearchAction(context)]);
      }
    
      void onSubmitted(String value) {
        setState(() => _scaffoldKey.currentState
            .showSnackBar(new SnackBar(content: new Text('You wrote $value!'))));
      }
    
      _SearchBarDemoHomeState() {
        searchBar = new SearchBar(
            inBar: false,
            buildDefaultAppBar: buildAppBar,
            setState: setState,
            onSubmitted: onSubmitted,
            onCleared: () {
              print("cleared");
            },
            onClosed: () {
              print("closed");
            });
      }
    
      @override
      Widget build(BuildContext context) {
        return new Scaffold(
          appBar: searchBar.build(context),
          key: _scaffoldKey,
          body: new Center(
              child: new Text("Don't look at me! Press the search button!")),
        );
      }
    }