Skip to content

Commit 765eb7d

Browse files
braulio94braulio94
authored
Implemented drink type switch
2 parents 1854225 + e0eadd0 commit 765eb7d

File tree

12 files changed

+435
-101
lines changed

12 files changed

+435
-101
lines changed

‎drinkshop/assets/fonts/ionicons.ttf‎

184 KB
Binary file not shown.

‎drinkshop/lib/colors.dart‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import 'package:flutter/painting.dart';
2+
3+
class DrinkShopColors {
4+
static final Color backgroundColor = new Color(0xFF251829);
5+
static final Color backgroundAccentColor = new Color(0xFF4b3053);
6+
static final Color buttonColor = new Color(0xFFFd5fb5);
7+
static final Color buttonAccentColor = new Color(0xFFEE8AE1);
8+
static final Color headerIconColor = new Color(0xFF7A4E87);
9+
}

‎drinkshop/lib/drink_selection_panel.dart‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
import 'dart:async';
2+
3+
import 'package:drinkshop/colors.dart';
4+
import 'package:drinkshop/icons.dart';
5+
import 'package:drinkshop/models.dart';
6+
import 'package:flutter/material.dart';
7+
8+
class DrinkSelectionPanel extends StatefulWidget {
9+
final StreamController<DrinkType> drinkTypeStream;
10+
11+
DrinkSelectionPanel(this.drinkTypeStream);
12+
13+
@override
14+
State createState() => new _DrinkSelectionPanelState();
15+
}
16+
17+
class _DrinkSelectionPanelState extends State<DrinkSelectionPanel>
18+
with TickerProviderStateMixin {
19+
@override
20+
void initState() {
21+
super.initState();
22+
}
23+
24+
@override
25+
void dispose() {
26+
super.dispose();
27+
}
28+
29+
@override
30+
Widget build(BuildContext context) {
31+
return new Stack(
32+
children: <Widget>[
33+
new ClipOval(
34+
clipper: new _CustomClipOval(),
35+
child: new Container(
36+
decoration: new BoxDecoration(
37+
color: DrinkShopColors.backgroundAccentColor,
38+
),
39+
),
40+
),
41+
new Positioned(
42+
left: MediaQuery.of(context).size.width / 6,
43+
top: MediaQuery.of(context).size.width + 10,
44+
child: new SettingsButton(),
45+
),
46+
new Positioned(
47+
right: MediaQuery.of(context).size.width / 6,
48+
top: MediaQuery.of(context).size.width - 10,
49+
child: new AddButton(),
50+
),
51+
],
52+
);
53+
}
54+
}
55+
56+
class _CustomClipOval extends CustomClipper<Rect> {
57+
@override
58+
Rect getClip(Size size) {
59+
return new Rect.fromCircle(
60+
center: new Offset(size.width / 2, 50.0), radius: size.width);
61+
}
62+
63+
@override
64+
bool shouldReclip(CustomClipper<Rect> oldClipper) => true;
65+
}
66+
67+
class AddButton extends StatelessWidget {
68+
@override
69+
Widget build(BuildContext context) {
70+
return new Container(
71+
width: 90.0,
72+
height: 90.0,
73+
decoration: new BoxDecoration(
74+
color: DrinkShopColors.buttonColor,
75+
shape: BoxShape.circle,
76+
boxShadow: <BoxShadow>[
77+
new BoxShadow(
78+
color: Colors.black26,
79+
spreadRadius: 1.0,
80+
blurRadius: 3.0,
81+
offset: new Offset(1.0, 2.0),
82+
),
83+
],
84+
),
85+
child: new Icon(
86+
DrinkShopIcons.plus,
87+
color: Colors.white,
88+
),
89+
);
90+
}
91+
}
92+
93+
class SettingsButton extends StatelessWidget {
94+
@override
95+
Widget build(BuildContext context) {
96+
return new Container(
97+
width: 50.0,
98+
height: 50.0,
99+
decoration: new BoxDecoration(
100+
color: DrinkShopColors.buttonAccentColor,
101+
shape: BoxShape.circle,
102+
boxShadow: <BoxShadow>[
103+
new BoxShadow(
104+
color: Colors.black26,
105+
spreadRadius: 1.0,
106+
blurRadius: 3.0,
107+
offset: new Offset(1.0, 2.0),
108+
),
109+
],
110+
),
111+
child: new Icon(
112+
DrinkShopIcons.controls,
113+
color: Colors.white,
114+
),
115+
);
116+
}
117+
}

‎drinkshop/lib/drink_shop_home.dart‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import 'dart:async';
2+
3+
import 'package:drinkshop/colors.dart';
4+
import 'package:drinkshop/drink_selection_panel.dart';
5+
import 'package:drinkshop/header.dart';
6+
import 'package:drinkshop/models.dart';
7+
import 'package:flutter/material.dart';
8+
9+
class DrinkShopHome extends StatefulWidget {
10+
@override
11+
State createState() => new DrinkShopHomeState();
12+
}
13+
14+
class DrinkShopHomeState extends State<DrinkShopHome> {
15+
StreamController<DrinkType> drinkTypeStream;
16+
17+
@override
18+
void initState() {
19+
super.initState();
20+
drinkTypeStream = new StreamController<DrinkType>();
21+
}
22+
23+
@override
24+
void dispose() {
25+
drinkTypeStream.close();
26+
super.dispose();
27+
}
28+
29+
@override
30+
Widget build(BuildContext context) {
31+
return new Scaffold(
32+
body: new Container(
33+
color: DrinkShopColors.backgroundColor,
34+
child: new Stack(
35+
children: <Widget>[
36+
new DrinkSelectionPanel(drinkTypeStream),
37+
new DrinkShopHeader(drinkTypeStream),
38+
_buildOrderItems(),
39+
],
40+
),
41+
),
42+
);
43+
}
44+
45+
Widget _buildOrderItems() {
46+
return new Align(
47+
alignment: new Alignment(0.0, 0.8),
48+
child: new Text(
49+
"YOUR ORDER WILL APPEAR HERE",
50+
style: new TextStyle(
51+
color: DrinkShopColors.backgroundAccentColor,
52+
),
53+
),
54+
);
55+
}
56+
}

‎drinkshop/lib/drink_switch_menu.dart‎

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
import 'dart:async';
2+
import 'dart:math';
3+
4+
import 'package:drinkshop/models.dart';
5+
import 'package:flutter/material.dart';
6+
7+
class DrinkSwitchMenu extends StatefulWidget {
8+
final StreamController<DrinkType> drinkTypeStream;
9+
10+
DrinkSwitchMenu(this.drinkTypeStream);
11+
12+
@override
13+
State createState() => new DrinkSwitchMenuState();
14+
}
15+
16+
class DrinkSwitchMenuState extends State<DrinkSwitchMenu>
17+
with TickerProviderStateMixin {
18+
AnimationController controller;
19+
20+
Animation<double> drinksScaleAnimation;
21+
Animation<double> drinksTiltAnimation;
22+
Animation<double> drinksTranslateAnimation;
23+
24+
static Key frappeKey = new Key("__frappe__");
25+
static Key glassKey = new Key("__glass__");
26+
Key active = frappeKey;
27+
28+
@override
29+
void initState() {
30+
super.initState();
31+
32+
controller = new AnimationController(
33+
vsync: this, duration: new Duration(milliseconds: 200));
34+
drinksScaleAnimation = new Tween<double>(begin: 1.0, end: 1.5).animate(
35+
new CurvedAnimation(
36+
parent: controller,
37+
curve: new Interval(0.0, 0.5, curve: Curves.easeIn)));
38+
drinksTiltAnimation = new Tween<double>(begin: 0.0, end: 40.0).animate(
39+
new CurvedAnimation(
40+
parent: controller,
41+
curve: new Interval(0.0, 0.5, curve: Curves.easeIn)));
42+
drinksTranslateAnimation = new Tween<double>(begin: 0.0, end: 30.0).animate(
43+
new CurvedAnimation(
44+
parent: controller,
45+
curve: new Interval(0.0, 0.5, curve: Curves.easeIn)));
46+
47+
drinksScaleAnimation.addListener(() {
48+
setState(() {});
49+
});
50+
drinksTiltAnimation.addListener(() {
51+
setState(() {});
52+
});
53+
drinksTranslateAnimation.addListener(() {
54+
setState(() {});
55+
});
56+
}
57+
58+
@override
59+
void dispose() {
60+
super.dispose();
61+
}
62+
63+
@override
64+
Widget build(BuildContext context) {
65+
final inactiveTransform = new Matrix4.identity()
66+
..translate(-10.0 - drinksTranslateAnimation.value, 0.0, 0.0)
67+
..scale(drinksScaleAnimation.value, drinksScaleAnimation.value)
68+
..rotateZ(-drinksTiltAnimation.value * (PI / 180));
69+
final activeTransform = new Matrix4.identity()
70+
..translate(0.0, 10.0 + drinksTranslateAnimation.value, 0.0)
71+
..scale(drinksScaleAnimation.value, drinksScaleAnimation.value)
72+
..rotateZ(drinksTiltAnimation.value * (PI / 180));
73+
74+
final glass = new Transform(
75+
key: glassKey,
76+
transform: active == glassKey ? activeTransform : inactiveTransform,
77+
origin: new Offset(20.0, 20.0),
78+
child: new Image.asset(
79+
"assets/images/glass.png",
80+
width: 35.0,
81+
height: 35.0,
82+
),
83+
);
84+
85+
final frappe = new Transform(
86+
key: frappeKey,
87+
transform: active == frappeKey ? activeTransform : inactiveTransform,
88+
origin: new Offset(20.0, 20.0),
89+
child: new Image.asset(
90+
"assets/images/frappe.png",
91+
width: 35.0,
92+
height: 35.0,
93+
),
94+
);
95+
96+
return new GestureDetector(
97+
onTap: () {
98+
swapDrinks();
99+
},
100+
child: new Container(
101+
child: new Stack(
102+
children: active == glassKey
103+
? <Widget>[frappe, glass]
104+
: <Widget>[glass, frappe],
105+
),
106+
),
107+
);
108+
}
109+
110+
void swapDrinks() async {
111+
widget.drinkTypeStream
112+
.add(active == frappeKey ? DrinkType.frappe : DrinkType.glass);
113+
await controller.forward();
114+
await controller.reverse();
115+
116+
setState(() {
117+
if (active == glassKey) {
118+
active = frappeKey;
119+
} else if (active == frappeKey) {
120+
active = glassKey;
121+
}
122+
});
123+
}
124+
}

‎drinkshop/lib/header.dart‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import 'dart:async';
2+
3+
import 'package:drinkshop/colors.dart';
4+
import 'package:drinkshop/drink_switch_menu.dart';
5+
import 'package:drinkshop/icons.dart';
6+
import 'package:flutter/material.dart';
7+
8+
class DrinkShopHeader extends StatelessWidget {
9+
10+
final StreamController drinkTypeStream;
11+
12+
DrinkShopHeader(this.drinkTypeStream);
13+
14+
@override
15+
Widget build(BuildContext context) {
16+
return new Container(
17+
height: 100.0,
18+
padding: new EdgeInsets.only(
19+
top: MediaQuery.of(context).padding.top + 20,
20+
left: 20.0,
21+
right: 20.0),
22+
child: new Row(
23+
mainAxisAlignment: MainAxisAlignment.center,
24+
crossAxisAlignment: CrossAxisAlignment.start,
25+
children: <Widget>[
26+
new IconButton(
27+
icon: new Icon(
28+
DrinkShopIcons.menu,
29+
color: DrinkShopColors.headerIconColor,
30+
size: 30.0,
31+
),
32+
onPressed: () {}),
33+
new Expanded(
34+
child: new Container(),
35+
),
36+
new DrinkSwitchMenu(drinkTypeStream),
37+
],
38+
),
39+
);
40+
}
41+
}

‎drinkshop/lib/icons.dart‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import 'package:flutter/widgets.dart';
2+
3+
class DrinkShopIcons {
4+
static final String fontFamily = "ionicons";
5+
static final IconData plus = new IconData(0xf217, fontFamily: fontFamily);
6+
static final IconData controls = new IconData(0xf39d, fontFamily: fontFamily);
7+
static final IconData menu = new IconData(0xf20d, fontFamily: fontFamily);
8+
}

0 commit comments

Comments
 (0)