Flutter实现SearchBar搜索框效果

使用Flutter实现SearchBar搜索框效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
import 'package:flutter/material.dart';
import 'dart:ui';

class SearchBarDemoPage extends StatefulWidget {
@override
State<StatefulWidget> createState() => new _SearchBarDemoPageState();
}

class _SearchBarDemoPageState extends State<SearchBarDemoPage> {
final controller = TextEditingController();

@override
void initState() {
super.initState();
}

Widget build(BuildContext context) {
return Scaffold(
body: Container(
color: Theme.of(context).primaryColor,
child: Padding(
padding: EdgeInsets.only(top: MediaQueryData.fromWindow(window).padding.top,),
child: Container(
height: 52.0,
child: new Padding(
padding: const EdgeInsets.all(6.0),
child: new Card(
child: new Container(
child: new Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
SizedBox(width: 5.0,),
Icon(Icons.search, color: Colors.grey,),
Expanded(
child: Container(
alignment: Alignment.center,
child: TextField(
controller: controller,
decoration: new InputDecoration(
contentPadding: EdgeInsets.only(top: 0.0),
hintText: 'Search', border: InputBorder.none),
// onChanged: onSearchTextChanged,
),
),
),
new IconButton(
icon: new Icon(Icons.cancel),
color: Colors.grey,
iconSize: 18.0,
onPressed: () {
controller.clear();
// onSearchTextChanged('');
},
),
],
),
)
)
),
),
),
),
);
}
}

Flutter SearchBar

Powered by AppBlog.CN     浙ICP备14037229号

Copyright © 2012 - 2020 APP开发技术博客 All Rights Reserved.

访客数 : | 访问量 :