flutter搜索功能实现

搜索功能在每个app里面必不可少，也是常见的功能，以下是个案例。

效果图展示：

说明：本功能实现，点击搜索框跳转至搜索页面，搜索联想功能

import 'package:flutter/material.dart';
import 'detail_page.dart';
 
class HomePage extends StatefulWidget{
  _TvPageState createState() => _TvPageState();
}
 
class _TvPageState extends State<HomePage> with AutomaticKeepAliveClientMixin{
  @override
  void initState(){
    super.initState();
  }
  @override
  Widget build(BuildContext context){
//    super.build(context);
    return Scaffold(
      backgroundColor: Color.fromRGBO(244, 245, 245, 1),
      appBar: AppBar(
 
        title: Container(
          child:InkWell(
            onTap: (){
              showSearch(context: context, delegate: CustomSearchDelegate()); //实现点击跳转至搜索页面
            },
            child: Row(
              children: <Widget>[
                Container(
                  child: Text(
                    '广州',
                    style: TextStyle(fontSize: 14),
                  ),
                ),
                Container(
                  width: ScreenUtil().setWidth(50),
                  child: Icon(
                      Icons.expand_more,
                      color: Colors.white,
                      size:20
                  ),
                ),
                Container(
                    width: ScreenUtil().setWidth(515),
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.all(Radius.circular(50.0)),
                    ),
                    height: 30,
                    child: Row(
                      children: <Widget>[
                        Container(
                            width: ScreenUtil().setWidth(60),
                            child:
                            Icon(
                                Icons.search,
                                color: Colors.grey,
                                size:20
                            )
                        ),
                        Container(
                          width: ScreenUtil().setWidth(400),
                          child:
                          Text(
                            '影视名称/主演',
                            style: TextStyle(color: Colors.black,fontSize: 16),
                          ),
                        ),
                        Container(
                          width: ScreenUtil().setWidth(50),
                          child: Icon(
                              Icons.mic,
                              color: Colors.grey,
                              size:20
                          ),
                        )
 
                      ],
                    )
                ),
              ],
            ),
          ),
        )
      ),
    );
  }
 
//搜索
class CustomSearchDelegate extends SearchDelegate {
  @override
  List<Widget> buildActions(BuildContext context) {
    return [
      IconButton(
        tooltip: 'Clear',
        icon: const Icon(Icons.clear),
        onPressed: () {
          query = '';
          showSuggestions(context);
        },
      )
    ];
  }
 
  @override
  String get searchFieldLabel => "影视名称/主演";
  Widget buildLeading(BuildContext context) {
    return IconButton(
      tooltip: 'Back',
      icon: AnimatedIcon(
        icon: AnimatedIcons.menu_arrow,
        progress: transitionAnimation,
      ),
      onPressed: () {
        this.close(context, null);
      },
    );
  }
 
  @override
  TextInputType get keyboardType => TextInputType.text;  //设置输入框输入内容类型
 
  @override
  Widget buildResults(BuildContext context) {
//    if (int.parse(query) >= 100) {
//      return Center(child: Text('请输入小于 100 的数字'));
//    }
    var map = Map();
    map["query"] = query;
    return Scaffold(
        body: FutureBuilder(
            future: request('gsearchs',formData: map),
            builder: (context,AsyncSnapshot snapshot) {
              if(snapshot.connectionState ==ConnectionState.done){
                if(snapshot.hasData){
                  var data = json.decode(snapshot.data.toString());
                  return ListView.builder(
                      itemCount: List.of(data["data"]).length,
                      itemBuilder: (BuildContext context, int index) {
                        return InkWell(
                          onTap: (){
                            Navigator.of(context).push(
                                MaterialPageRoute(builder: (context)=>DetailPage(
                                    eachVodId: List.of(data["data"])[index]['id'],
                                    eachVodName:List.of(data["data"])[index]['vod_name'],
                                    p:1
                                ))
                            );
                          },
                          child:ListTile(title: Text(List.of(data["data"])[index]['vod_name'])),
                        );
 
                      }
                  );
                }else{
                  return Center(child: CircularProgressIndicator());
                }
 
              }else{
                return Center(child: CircularProgressIndicator());
              }
 
            })
    );
  }
 
  @override
  Widget buildSuggestions(BuildContext context) {
    var map = Map();
    map["query"] = query;
    return Scaffold(
        body: FutureBuilder(
            future: request('gsearchs',formData: map),
            builder: (context, snapshot) {
              if(snapshot.connectionState ==ConnectionState.done){
                if(snapshot.hasData){
                  var data = json.decode(snapshot.data.toString());
                  return ListView.builder(
                      itemCount: List.of(data["data"]).length,
                      itemBuilder: (BuildContext context, int index) {
                        return InkWell(
                          onTap: (){
                            Navigator.of(context).push(
                                MaterialPageRoute(builder: (context)=>DetailPage(
                                    eachVodId: List.of(data["data"])[index]['id'],
                                    eachVodName:List.of(data["data"])[index]['vod_name'],
                                    p:1
 
                                ))
                            );
                          },
                          child:ListTile(title: Text(List.of(data["data"])[index]['vod_name'])),
                        );
 
                      }
                  );
                }else{
                  return Center(child: CircularProgressIndicator());
                }
 
              }else{
                return Center(child: CircularProgressIndicator());
              }
 
            })
    );
 
  }
 
}