black icons / filters prototype
This commit is contained in:
208
lib/components/filters.dart
Normal file
208
lib/components/filters.dart
Normal file
@@ -0,0 +1,208 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
enum Tags {
|
||||
cardPayments,
|
||||
petFriendly,
|
||||
glutenFree,
|
||||
vegan,
|
||||
vegetarian,
|
||||
alcohol,
|
||||
delivery
|
||||
}
|
||||
|
||||
class Filters {
|
||||
bool cardPayments = false;
|
||||
bool petFriendly = false;
|
||||
bool glutenFree = false;
|
||||
bool vegan = false;
|
||||
bool vegetarian = false;
|
||||
bool alcohol = false;
|
||||
bool delivery = false;
|
||||
bool onlyOpen = false;
|
||||
List<String> selectedTypes = [];
|
||||
final List<String> availableTypes = [
|
||||
'chińska',
|
||||
'dietetyczna',
|
||||
'francuska',
|
||||
'grecka',
|
||||
'indyjska',
|
||||
'japońska',
|
||||
'koreańska',
|
||||
'koszerna',
|
||||
'meksykańska',
|
||||
'polska',
|
||||
'rosyjska',
|
||||
'skandynawska',
|
||||
'śródziemnomorska',
|
||||
'tajska',
|
||||
'turecka',
|
||||
'ukraińska',
|
||||
'węgierska',
|
||||
'wietnamska',
|
||||
'włoska',
|
||||
'mieszane',
|
||||
'inna'
|
||||
];
|
||||
}
|
||||
|
||||
class RestaurantFilters extends StatelessWidget {
|
||||
final Filters filters;
|
||||
final Function(String) onSelectType;
|
||||
final Function(Tags) onSelectTag;
|
||||
|
||||
RestaurantFilters(
|
||||
{@required this.filters,
|
||||
@required this.onSelectType,
|
||||
@required this.onSelectTag});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
width: double.infinity,
|
||||
decoration: BoxDecoration(color: Colors.grey[850]),
|
||||
padding: EdgeInsets.all(12),
|
||||
child: Column(
|
||||
children: <Widget>[
|
||||
Padding(
|
||||
padding: EdgeInsets.all(8),
|
||||
child: Text(
|
||||
'Rodzaj kuchni',
|
||||
style: TextStyle(color: Colors.orange),
|
||||
),
|
||||
),
|
||||
Wrap(
|
||||
spacing: 6,
|
||||
runAlignment: WrapAlignment.center,
|
||||
runSpacing: -14,
|
||||
children: filters.availableTypes.map<ButtonTheme>((String value) {
|
||||
return ButtonTheme(
|
||||
minWidth: 60,
|
||||
height: 20,
|
||||
child: RaisedButton(
|
||||
splashColor: Colors.orange,
|
||||
padding: EdgeInsets.all(6),
|
||||
color: (() {
|
||||
if (filters.selectedTypes.contains(value)) {
|
||||
return Colors.orange;
|
||||
} else {
|
||||
return Colors.grey;
|
||||
}
|
||||
}()),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.all(Radius.circular(24))),
|
||||
onPressed: () => onSelectType(value),
|
||||
child: Text(
|
||||
value,
|
||||
style: TextStyle(fontSize: 11),
|
||||
),
|
||||
),
|
||||
);
|
||||
}).toList(),
|
||||
),
|
||||
Padding(
|
||||
padding: EdgeInsets.all(8),
|
||||
child: Text(
|
||||
'Tagi',
|
||||
style: TextStyle(color: Colors.orange),
|
||||
),
|
||||
),
|
||||
Wrap(
|
||||
spacing: 6,
|
||||
runSpacing: -12,
|
||||
children: [
|
||||
RestaurantTag(
|
||||
name: "Płatność kartą",
|
||||
active: filters.cardPayments,
|
||||
img: 'img/i_card_black.png',
|
||||
onTapped: () => onSelectTag(Tags.cardPayments),
|
||||
),
|
||||
RestaurantTag(
|
||||
name: "Lubimy zwierzaki",
|
||||
active: filters.petFriendly,
|
||||
img: 'img/i_pets_black.png',
|
||||
onTapped: () => onSelectTag(Tags.petFriendly),
|
||||
),
|
||||
RestaurantTag(
|
||||
name: "Bez glutenu",
|
||||
active: filters.glutenFree,
|
||||
img: 'img/i_glutenFree_black.png',
|
||||
onTapped: () => onSelectTag(Tags.glutenFree),
|
||||
),
|
||||
RestaurantTag(
|
||||
name: "Wegańskie",
|
||||
active: filters.vegan,
|
||||
img: 'img/i_vegan_black.png',
|
||||
onTapped: () => onSelectTag(Tags.vegan),
|
||||
),
|
||||
RestaurantTag(
|
||||
name: "Wegetariańskie",
|
||||
active: filters.vegetarian,
|
||||
img: 'img/i_vegetarian_black.png',
|
||||
onTapped: () => onSelectTag(Tags.vegetarian),
|
||||
),
|
||||
RestaurantTag(
|
||||
name: "Alkohol",
|
||||
active: filters.alcohol,
|
||||
img: 'img/i_alcohol_black.png',
|
||||
onTapped: () => onSelectTag(Tags.alcohol),
|
||||
),
|
||||
RestaurantTag(
|
||||
name: "Dowozimy",
|
||||
active: filters.delivery,
|
||||
img: 'img/i_delivery_black.png',
|
||||
onTapped: () => onSelectTag(Tags.delivery),
|
||||
),
|
||||
],
|
||||
)
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class RestaurantTag extends StatelessWidget {
|
||||
final String name;
|
||||
final String img;
|
||||
final bool active;
|
||||
final Function onTapped;
|
||||
|
||||
RestaurantTag({this.name, this.active, this.img, this.onTapped});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return ButtonTheme(
|
||||
height: 26,
|
||||
minWidth: 60,
|
||||
child: RaisedButton(
|
||||
splashColor: Colors.white,
|
||||
color: (() {
|
||||
if (active) {
|
||||
return Colors.orange;
|
||||
} else {
|
||||
return Colors.grey;
|
||||
}
|
||||
}()),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.all(Radius.circular(24))),
|
||||
onPressed: onTapped,
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
Image.asset(
|
||||
img,
|
||||
width: 16,
|
||||
),
|
||||
Padding(
|
||||
padding: EdgeInsets.only(left: 6),
|
||||
child: Text(
|
||||
name,
|
||||
style: TextStyle(fontSize: 11),
|
||||
),
|
||||
)
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -7,6 +7,7 @@ import 'homeScreen.dart';
|
||||
import 'orderView.dart';
|
||||
import 'favoritesView.dart';
|
||||
import '../settings.dart';
|
||||
import 'filters.dart';
|
||||
|
||||
class SearchResults extends StatefulWidget {
|
||||
SearchResults(
|
||||
@@ -27,6 +28,7 @@ class _SearchResultsState extends State<SearchResults>
|
||||
bool expand;
|
||||
AnimationController animationController;
|
||||
Animation<double> animation;
|
||||
Filters filters = new Filters();
|
||||
|
||||
void prepareAnimations() {
|
||||
animationController =
|
||||
@@ -36,26 +38,15 @@ class _SearchResultsState extends State<SearchResults>
|
||||
}
|
||||
|
||||
void checkExpand() {
|
||||
print('Check Expand');
|
||||
if (expand) {
|
||||
animationController.forward();
|
||||
print('Open');
|
||||
} else {
|
||||
animationController.reverse();
|
||||
print('Close');
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
void didUpdateWidget(SearchResults oldWidget) {
|
||||
print('Widget Did Update');
|
||||
super.didUpdateWidget(oldWidget);
|
||||
checkExpand();
|
||||
}
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
print("Init State");
|
||||
super.initState();
|
||||
expand = false;
|
||||
prepareAnimations();
|
||||
@@ -70,6 +61,7 @@ class _SearchResultsState extends State<SearchResults>
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
checkExpand();
|
||||
return Scaffold(
|
||||
key: _drawerKey,
|
||||
body: Container(
|
||||
@@ -80,12 +72,80 @@ class _SearchResultsState extends State<SearchResults>
|
||||
mainAxisAlignment: MainAxisAlignment.start,
|
||||
children: <Widget>[
|
||||
SizeTransition(
|
||||
sizeFactor: animation,
|
||||
child: Container(
|
||||
decoration: BoxDecoration(color: Colors.blue),
|
||||
child: Text("Dupa"),
|
||||
),
|
||||
),
|
||||
sizeFactor: animation,
|
||||
child: RestaurantFilters(
|
||||
filters: filters,
|
||||
onSelectType: (value) {
|
||||
if (filters.selectedTypes.contains(value)) {
|
||||
final List<String> result =
|
||||
List.from(filters.selectedTypes);
|
||||
result.remove(value);
|
||||
setState(() {
|
||||
filters.selectedTypes = result;
|
||||
});
|
||||
} else {
|
||||
final List<String> result =
|
||||
List.from(filters.selectedTypes);
|
||||
result.add(value);
|
||||
setState(() {
|
||||
filters.selectedTypes = result;
|
||||
});
|
||||
}
|
||||
},
|
||||
onSelectTag: (tag) {
|
||||
switch (tag) {
|
||||
case Tags.alcohol:
|
||||
{
|
||||
setState(() {
|
||||
filters.alcohol = !filters.alcohol;
|
||||
});
|
||||
}
|
||||
break;
|
||||
case Tags.cardPayments:
|
||||
{
|
||||
setState(() {
|
||||
filters.cardPayments = !filters.cardPayments;
|
||||
});
|
||||
}
|
||||
break;
|
||||
case Tags.delivery:
|
||||
{
|
||||
setState(() {
|
||||
filters.delivery = !filters.delivery;
|
||||
});
|
||||
}
|
||||
break;
|
||||
case Tags.glutenFree:
|
||||
{
|
||||
setState(() {
|
||||
filters.glutenFree = !filters.glutenFree;
|
||||
});
|
||||
}
|
||||
break;
|
||||
case Tags.petFriendly:
|
||||
{
|
||||
setState(() {
|
||||
filters.petFriendly = !filters.petFriendly;
|
||||
});
|
||||
}
|
||||
break;
|
||||
case Tags.vegan:
|
||||
{
|
||||
setState(() {
|
||||
filters.vegan = !filters.vegan;
|
||||
});
|
||||
}
|
||||
break;
|
||||
case Tags.vegetarian:
|
||||
{
|
||||
setState(() {
|
||||
filters.vegetarian = !filters.vegetarian;
|
||||
});
|
||||
}
|
||||
break;
|
||||
}
|
||||
},
|
||||
)),
|
||||
Container(
|
||||
decoration: BoxDecoration(color: Colors.grey[850]),
|
||||
child: Column(
|
||||
|
||||
Reference in New Issue
Block a user