mirror of
https://github.com/flutter/samples.git
synced 2025-11-08 13:58:47 +00:00
Adds search screen to veggieseasons. (#17)
This commit is contained in:
@@ -4,19 +4,86 @@
|
|||||||
|
|
||||||
import 'package:flutter/cupertino.dart';
|
import 'package:flutter/cupertino.dart';
|
||||||
import 'package:flutter/widgets.dart';
|
import 'package:flutter/widgets.dart';
|
||||||
|
import 'package:scoped_model/scoped_model.dart';
|
||||||
|
import 'package:veggieseasons/data/model.dart';
|
||||||
|
import 'package:veggieseasons/data/veggie.dart';
|
||||||
import 'package:veggieseasons/styles.dart';
|
import 'package:veggieseasons/styles.dart';
|
||||||
|
import 'package:veggieseasons/widgets/search_bar.dart';
|
||||||
|
import 'package:veggieseasons/widgets/veggie_headline.dart';
|
||||||
|
|
||||||
class SearchScreen extends StatelessWidget {
|
class SearchScreen extends StatefulWidget {
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
_SearchScreenState createState() => _SearchScreenState();
|
||||||
return CupertinoPageScaffold(
|
}
|
||||||
navigationBar: CupertinoNavigationBar(
|
|
||||||
middle: Text('Search'),
|
class _SearchScreenState extends State<SearchScreen> {
|
||||||
),
|
final _controller = TextEditingController();
|
||||||
backgroundColor: Styles.scaffoldBackground,
|
final _focusNode = FocusNode();
|
||||||
child: Center(
|
String _terms = '';
|
||||||
child: Text('Not yet implemented.'),
|
|
||||||
|
@override
|
||||||
|
void initState() {
|
||||||
|
super.initState();
|
||||||
|
_controller.addListener(_onTextChanged);
|
||||||
|
}
|
||||||
|
|
||||||
|
@override
|
||||||
|
void dispose() {
|
||||||
|
_focusNode.dispose();
|
||||||
|
super.dispose();
|
||||||
|
}
|
||||||
|
|
||||||
|
void _onTextChanged() {
|
||||||
|
setState(() => _terms = _controller.text);
|
||||||
|
}
|
||||||
|
|
||||||
|
Widget _createSearchBox() {
|
||||||
|
return Padding(
|
||||||
|
padding: const EdgeInsets.all(8.0),
|
||||||
|
child: SearchBar(
|
||||||
|
controller: _controller,
|
||||||
|
focusNode: _focusNode,
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
List<Widget> _generateVeggieRows(List<Veggie> veggies) {
|
||||||
|
final cards = new List<Widget>();
|
||||||
|
|
||||||
|
for (Veggie veggie in veggies) {
|
||||||
|
cards.add(Padding(
|
||||||
|
padding: EdgeInsets.only(left: 16.0, right: 16.0, bottom: 24.0),
|
||||||
|
child: VeggieHeadline(veggie),
|
||||||
|
));
|
||||||
|
}
|
||||||
|
|
||||||
|
return cards;
|
||||||
|
}
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
final model = ScopedModel.of<AppState>(context, rebuildOnChange: true);
|
||||||
|
|
||||||
|
return CupertinoTabView(
|
||||||
|
builder: (context) {
|
||||||
|
return DecoratedBox(
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
color: Styles.scaffoldBackground,
|
||||||
|
),
|
||||||
|
child: SafeArea(
|
||||||
|
child: Column(
|
||||||
|
children: [
|
||||||
|
_createSearchBox(),
|
||||||
|
Expanded(
|
||||||
|
child: ListView(
|
||||||
|
children: _generateVeggieRows(model.searchVeggies(_terms)),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
58
veggieseasons/lib/widgets/search_bar.dart
Normal file
58
veggieseasons/lib/widgets/search_bar.dart
Normal file
@@ -0,0 +1,58 @@
|
|||||||
|
// Copyright 2018 The Flutter team. All rights reserved.
|
||||||
|
// Use of this source code is governed by a BSD-style license that can be
|
||||||
|
// found in the LICENSE file.
|
||||||
|
|
||||||
|
import 'package:flutter/cupertino.dart';
|
||||||
|
import 'package:flutter/widgets.dart';
|
||||||
|
import 'package:veggieseasons/styles.dart';
|
||||||
|
|
||||||
|
class SearchBar extends StatelessWidget {
|
||||||
|
final TextEditingController controller;
|
||||||
|
final FocusNode focusNode;
|
||||||
|
|
||||||
|
SearchBar({
|
||||||
|
@required this.controller,
|
||||||
|
@required this.focusNode,
|
||||||
|
});
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return DecoratedBox(
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
color: Styles.searchBackground,
|
||||||
|
borderRadius: BorderRadius.circular(10.0),
|
||||||
|
),
|
||||||
|
child: Padding(
|
||||||
|
padding: const EdgeInsets.symmetric(
|
||||||
|
horizontal: 4.0,
|
||||||
|
vertical: 8.0,
|
||||||
|
),
|
||||||
|
child: Row(
|
||||||
|
children: [
|
||||||
|
Icon(
|
||||||
|
CupertinoIcons.search,
|
||||||
|
color: Styles.searchIconColor,
|
||||||
|
),
|
||||||
|
Expanded(
|
||||||
|
child: EditableText(
|
||||||
|
controller: controller,
|
||||||
|
focusNode: focusNode,
|
||||||
|
style: Styles.searchText,
|
||||||
|
cursorColor: Styles.searchCursorColor,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
GestureDetector(
|
||||||
|
onTap: () {
|
||||||
|
controller.clear();
|
||||||
|
},
|
||||||
|
child: Icon(
|
||||||
|
CupertinoIcons.clear_thick_circled,
|
||||||
|
color: Styles.searchIconColor,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user