Skip to content

Commit 1dae795

Browse files
boyan01boyan01
committed
add button direction icon for controller
1 parent d26b94c commit 1dae795

File tree

1 file changed

+200
-121
lines changed

1 file changed

+200
-121
lines changed

‎lib/panel/controller.dart

Lines changed: 200 additions & 121 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import 'dart:async';
2-
3-
import 'package:flutter/material.dart';
42
import 'dart:math' as math;
53

4+
import 'package:flutter/material.dart';
65
import 'package:tetris/gamer/gamer.dart';
76
import 'package:tetris/generated/i18n.dart';
87

@@ -21,96 +20,163 @@ class GameController extends StatelessWidget {
2120
}
2221
}
2322

24-
const Size _DIRECTION_BUTTON_SIZE = const Size(60, 60);
23+
const Size _DIRECTION_BUTTON_SIZE = const Size(48, 48);
2524

2625
const Size _SYSTEM_BUTTON_SIZE = const Size(28, 28);
2726

28-
const double _DIRECTION_SPACE = 10;
27+
const double _DIRECTION_SPACE = 16;
28+
29+
const double _iconSize = 16;
2930

3031
class DirectionController extends StatelessWidget {
3132
@override
3233
Widget build(BuildContext context) {
33-
return SizedBox.fromSize(
34-
size: _DIRECTION_BUTTON_SIZE * 2 * 1.41,
35-
child: Transform.rotate(
36-
angle: math.pi / 4,
37-
child: Column(
38-
mainAxisSize: MainAxisSize.min,
39-
children: <Widget>[
40-
SizedBox(height: _DIRECTION_SPACE),
41-
Row(
42-
mainAxisSize: MainAxisSize.min,
43-
children: <Widget>[
44-
_Button(
45-
enableLongPress: false,
46-
size: _DIRECTION_BUTTON_SIZE,
47-
buttonIcon: Icons.rotate_right,
48-
onTap: () {
49-
Game.of(context).rotate();
50-
}),
51-
SizedBox(width: _DIRECTION_SPACE),
52-
_Button(
53-
size: _DIRECTION_BUTTON_SIZE,
54-
buttonIcon: Icons.chevron_right,
55-
onTap: () {
56-
Game.of(context).right();
57-
}),
58-
],
59-
),
60-
SizedBox(height: _DIRECTION_SPACE),
61-
Row(
62-
mainAxisSize: MainAxisSize.min,
63-
children: <Widget>[
64-
_Button(
34+
return Stack(
35+
alignment: Alignment.center,
36+
children: <Widget>[
37+
SizedBox.expand(),
38+
Transform.rotate(
39+
angle: math.pi / 4,
40+
child: Column(
41+
mainAxisSize: MainAxisSize.min,
42+
children: <Widget>[
43+
Row(
44+
mainAxisSize: MainAxisSize.min,
45+
children: <Widget>[
46+
Transform.scale(
47+
scale: 1.5,
48+
child: Transform.rotate(
49+
angle: -math.pi / 4,
50+
child: Icon(
51+
Icons.arrow_drop_up,
52+
size: _iconSize,
53+
)),
54+
),
55+
Transform.scale(
56+
scale: 1.5,
57+
child: Transform.rotate(
58+
angle: -math.pi / 4,
59+
child: Icon(
60+
Icons.arrow_right,
61+
size: _iconSize,
62+
)),
63+
),
64+
],
65+
),
66+
Row(
67+
mainAxisSize: MainAxisSize.min,
68+
children: <Widget>[
69+
Transform.scale(
70+
scale: 1.5,
71+
child: Transform.rotate(
72+
angle: -math.pi / 4,
73+
child: Icon(
74+
Icons.arrow_left,
75+
size: _iconSize,
76+
)),
77+
),
78+
Transform.scale(
79+
scale: 1.5,
80+
child: Transform.rotate(
81+
angle: -math.pi / 4,
82+
child: Icon(
83+
Icons.arrow_drop_down,
84+
size: _iconSize,
85+
)),
86+
),
87+
],
88+
),
89+
],
90+
),
91+
),
92+
Transform.rotate(
93+
angle: math.pi / 4,
94+
child: Column(
95+
mainAxisSize: MainAxisSize.min,
96+
children: <Widget>[
97+
SizedBox(height: _DIRECTION_SPACE),
98+
Row(
99+
mainAxisSize: MainAxisSize.min,
100+
children: <Widget>[
101+
_Button(
102+
enableLongPress: false,
103+
size: _DIRECTION_BUTTON_SIZE,
104+
onTap: () {
105+
Game.of(context).rotate();
106+
}),
107+
SizedBox(width: _DIRECTION_SPACE),
108+
_Button(
109+
size: _DIRECTION_BUTTON_SIZE,
110+
onTap: () {
111+
Game.of(context).right();
112+
}),
113+
],
114+
),
115+
SizedBox(height: _DIRECTION_SPACE),
116+
Row(
117+
mainAxisSize: MainAxisSize.min,
118+
children: <Widget>[
119+
_Button(
120+
size: _DIRECTION_BUTTON_SIZE,
121+
onTap: () {
122+
Game.of(context).left();
123+
}),
124+
SizedBox(width: _DIRECTION_SPACE),
125+
_Button(
65126
size: _DIRECTION_BUTTON_SIZE,
66-
buttonIcon: Icons.chevron_left,
67127
onTap: () {
68-
Game.of(context).left();
69-
}),
70-
SizedBox(width: _DIRECTION_SPACE),
71-
_Button(
72-
size: _DIRECTION_BUTTON_SIZE,
73-
buttonIcon: Icons.keyboard_arrow_down,
74-
onTap: () {
75-
Game.of(context).down();
76-
},
77-
),
78-
],
79-
),
80-
SizedBox(height: _DIRECTION_SPACE),
81-
],
128+
Game.of(context).down();
129+
},
130+
),
131+
],
132+
),
133+
SizedBox(height: _DIRECTION_SPACE),
134+
],
135+
),
82136
),
83-
),
137+
],
84138
);
85139
}
86140
}
87141

88142
class SystemButtonGroup extends StatelessWidget {
143+
static const _systemButtonColor = const Color(0xFF2dc421);
144+
89145
@override
90146
Widget build(BuildContext context) {
91147
return Row(
92148
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
93149
children: <Widget>[
94-
_SystemButton(
95-
color: const Color(0xFF2dc421),
96-
label: S.of(context).sounds,
97-
onTap: () {
98-
Game.of(context).soundSwitch();
99-
},
150+
_Description(
151+
text: S.of(context).sounds,
152+
child: _Button(
153+
size: _SYSTEM_BUTTON_SIZE,
154+
color: _systemButtonColor,
155+
enableLongPress: false,
156+
onTap: () {
157+
Game.of(context).soundSwitch();
158+
}),
100159
),
101-
_SystemButton(
102-
color: const Color(0xFF2dc421),
103-
label: S.of(context).pause_resume,
104-
onTap: () {
105-
Game.of(context).pauseOrResume();
106-
},
160+
_Description(
161+
text: S.of(context).pause_resume,
162+
child: _Button(
163+
size: _SYSTEM_BUTTON_SIZE,
164+
color: _systemButtonColor,
165+
enableLongPress: false,
166+
onTap: () {
167+
Game.of(context).pauseOrResume();
168+
}),
107169
),
108-
_SystemButton(
109-
color: Colors.red,
110-
label: S.of(context).reset,
111-
onTap: () {
112-
Game.of(context).reset();
113-
})
170+
_Description(
171+
text: S.of(context).reset,
172+
child: _Button(
173+
size: _SYSTEM_BUTTON_SIZE,
174+
enableLongPress: false,
175+
color: Colors.red,
176+
onTap: () {
177+
Game.of(context).reset();
178+
}),
179+
)
114180
],
115181
);
116182
}
@@ -119,13 +185,15 @@ class SystemButtonGroup extends StatelessWidget {
119185
class DropButton extends StatelessWidget {
120186
@override
121187
Widget build(BuildContext context) {
122-
return _Button(
123-
enableLongPress: false,
124-
size: Size(90, 90),
125-
buttonIcon: Icons.file_download,
126-
onTap: () {
127-
Game.of(context).drop();
128-
});
188+
return _Description(
189+
text: 'drop',
190+
child: _Button(
191+
enableLongPress: false,
192+
size: Size(90, 90),
193+
onTap: () {
194+
Game.of(context).drop();
195+
}),
196+
);
129197
}
130198
}
131199

@@ -146,44 +214,9 @@ class LeftController extends StatelessWidget {
146214
}
147215
}
148216

149-
class _SystemButton extends StatelessWidget {
150-
final Color color;
151-
final String label;
152-
final VoidCallback onTap;
153-
154-
const _SystemButton({
155-
Key key,
156-
this.color = Colors.blue,
157-
@required this.label,
158-
@required this.onTap,
159-
}) : assert(label != null),
160-
super(key: key);
161-
162-
@override
163-
Widget build(BuildContext context) {
164-
return Column(
165-
children: <Widget>[
166-
ClipOval(
167-
child: SizedBox.fromSize(
168-
size: _SYSTEM_BUTTON_SIZE,
169-
child: RaisedButton(
170-
onPressed: onTap,
171-
child: Container(),
172-
color: color,
173-
))),
174-
SizedBox(height: 8),
175-
Text(
176-
label,
177-
style: TextStyle(fontSize: 12),
178-
)
179-
],
180-
);
181-
}
182-
}
183-
184217
class _Button extends StatefulWidget {
185218
final Size size;
186-
final IconData buttonIcon;
219+
final Widget icon;
187220

188221
final VoidCallback onTap;
189222

@@ -196,7 +229,7 @@ class _Button extends StatefulWidget {
196229
{Key key,
197230
@required this.size,
198231
@required this.onTap,
199-
@required this.buttonIcon,
232+
this.icon,
200233
this.color = Colors.blue,
201234
this.enableLongPress = true})
202235
: super(key: key);
@@ -207,6 +240,57 @@ class _Button extends StatefulWidget {
207240
}
208241
}
209242

243+
///show a hint text for child widget
244+
class _Description extends StatelessWidget {
245+
final String text;
246+
247+
final Widget child;
248+
249+
final AxisDirection direction;
250+
251+
const _Description({
252+
Key key,
253+
this.text,
254+
this.direction = AxisDirection.down,
255+
this.child,
256+
}) : assert(direction != null),
257+
super(key: key);
258+
259+
@override
260+
Widget build(BuildContext context) {
261+
Widget widget;
262+
switch (direction) {
263+
case AxisDirection.right:
264+
widget = Row(
265+
mainAxisSize: MainAxisSize.min,
266+
children: <Widget>[child, SizedBox(width: 8), Text(text)]);
267+
break;
268+
case AxisDirection.left:
269+
widget = Row(
270+
children: <Widget>[Text(text), SizedBox(width: 8), child],
271+
mainAxisSize: MainAxisSize.min,
272+
);
273+
break;
274+
case AxisDirection.up:
275+
widget = Column(
276+
children: <Widget>[Text(text), SizedBox(height: 8), child],
277+
mainAxisSize: MainAxisSize.min,
278+
);
279+
break;
280+
case AxisDirection.down:
281+
widget = Column(
282+
children: <Widget>[child, SizedBox(height: 8), Text(text)],
283+
mainAxisSize: MainAxisSize.min,
284+
);
285+
break;
286+
}
287+
return DefaultTextStyle(
288+
child: widget,
289+
style: TextStyle(fontSize: 12, color: Colors.black),
290+
);
291+
}
292+
}
293+
210294
class _ButtonState extends State<_Button> {
211295
Timer _timer;
212296

@@ -276,13 +360,8 @@ class _ButtonState extends State<_Button> {
276360
});
277361
},
278362
child: SizedBox.fromSize(
279-
size: widget.size,
280-
child: Transform.rotate(angle: (widget.buttonIcon == Icons.file_download) ? 0 : - (math.pi/ 12.0) * 3,
281-
child: Icon(
282-
widget.buttonIcon,
283-
color: Colors.white),
284-
),
285-
),
363+
size: widget.size,
364+
),
286365
),
287366
);
288367
}

0 commit comments

Comments
 (0)