Use platform-aware UI library for native look and feel

- Added score layout
This commit is contained in:
Tony Bark 2021-05-28 05:34:28 -04:00
parent 9e475f6a34
commit 9c707d1e47
5 changed files with 41 additions and 12 deletions

View file

@ -1,4 +1,5 @@
import 'package:flutter/material.dart';
import 'package:flutter_platform_widgets/flutter_platform_widgets.dart';
class Control extends StatefulWidget {
Control({Key? key}) : super(key: key);
@ -15,8 +16,8 @@ class _ControlState extends State<Control> {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("1"),
Slider(
PlatformText("1"),
PlatformSlider(
value: _currentValue,
onChanged: (newValue) {
setState(() {
@ -27,7 +28,7 @@ class _ControlState extends State<Control> {
min: 1.0,
max: 100.0,
),
Text("100")
PlatformText("100")
],
);
}

View file

@ -2,6 +2,8 @@ import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:bullseye/prompt.dart';
import 'package:bullseye/control.dart';
import 'package:bullseye/score.dart';
import 'package:flutter_platform_widgets/flutter_platform_widgets.dart';
void main() => runApp(BullsEyeApp());
@ -41,12 +43,13 @@ class _GamePageState extends State<GamePage> {
children: [
Prompt(targetValue: 100),
Control(),
TextButton(
child: Text('Hit me!'),
PlatformTextButton(
child: PlatformText('Hit me!'),
onPressed: () {
this._alertIsVisable = true;
_showAlert(context);
})
}),
Score()
],
),
),
@ -55,7 +58,7 @@ class _GamePageState extends State<GamePage> {
void _showAlert(BuildContext context) {
Widget okButton = TextButton(
child: Text("Awesome!"),
child: PlatformText("Awesome!"),
onPressed: () {
Navigator.of(context).pop();
this._alertIsVisable = false;
@ -65,11 +68,10 @@ class _GamePageState extends State<GamePage> {
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
return PlatformAlertDialog(
title: Text("Hello There."),
content: Text("This is my first pop-up."),
actions: <Widget>[okButton],
elevation: 5,
);
});
}

View file

@ -1,4 +1,5 @@
import 'package:flutter/material.dart';
import 'package:flutter_platform_widgets/flutter_platform_widgets.dart';
class Prompt extends StatelessWidget {
Prompt({@required this.targetValue});
@ -6,11 +7,10 @@ class Prompt extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Column(
children: <Widget>[
Text("PUT THE BULLSEYE AS CLOSE YOU CAN TO"),
Text("$targetValue")
PlatformText("PUT THE BULLSEYE AS CLOSE YOU CAN TO"),
PlatformText("$targetValue")
],
);
}

25
lib/score.dart Normal file
View file

@ -0,0 +1,25 @@
import 'package:flutter/material.dart';
import 'package:flutter_platform_widgets/flutter_platform_widgets.dart';
class Score extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
PlatformButton(
child: PlatformText("Start Over"),
onPressed: () {},
),
PlatformText("Score:"),
PlatformText("999"),
PlatformText("Round:"),
PlatformText("999"),
PlatformButton(
child: PlatformText("Info"),
onPressed: () {},
)
],
);
}
}

View file

@ -29,6 +29,7 @@ dependencies:
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^1.0.2
google_fonts: ^2.1.0
flutter_platform_widgets: ^1.9.0
dev_dependencies:
flutter_test: