flutter学习--搜索框

主入口文件

继承StatelessWidget,然后在home属性中加入SearchBarDemo，这是一个自定义的Widget，主要代码都在这个文件中。

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()
    );
  }
}

数据文件 asset.dart

asset.dart相当于数据文件，工作中这些数据是后台传递给我们，或者写成配置文件的，这里我们就以List的方式代替了。我们在这个文件中定义了两个List：

• searchList : 这个相当于数据库中的数据，我们要在这里进行搜索。

• recentSuggest ： 目前的推荐数据，就是搜索时，自动为我们进行推荐。

const searchList = [
  "jiejie-大长腿",
  "jiejie-水蛇腰",
  "gege1-帅气欧巴",
  "gege2-小鲜肉"
];

const recentSuggest = [
  "推荐-1",
  "推荐-2"
];

AppBar的样式制作

import 'package:flutter/material.dart';
import 'asset.dart'