FLUTTER - UI ON STICK HERO MOBILE GAME APP:
Source Code:
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Stick Hero - UI',
home: MyApp(),
));
}
//Only UI with deep widgets even for hero icon
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Wrap(
children: <Widget>[
Stack(
children: <Widget>[
Container(
height: 750.0,
child: Image.asset('assets/images/nature1.jpg', fit: BoxFit.fill),
),
//for better view i am using other image
Column(
// crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
SizedBox(height: 25.0),
Text(
'STICK',
style: TextStyle(
color: Colors.black,
fontSize: 80.0,
fontWeight: FontWeight.bold),
),
Text(
'HERO',
style: TextStyle(
color: Colors.black,
fontSize: 80.0,
fontWeight: FontWeight.bold),
),
SizedBox(height: 50.0),
Column(
children: <Widget>[
Material(
borderRadius: BorderRadius.circular(60),
color: Colors.pink,
child: Container(
height: 120.0,
width: 120.0,
child: Center(
child: GestureDetector(
child: Text(
'PLAY',
style: TextStyle(
color: Colors.white, fontSize: 25.0),
),
onTap: () {
debugPrint("Let's Play");
},
),
)),
),
],
),
SizedBox(height: 90.0),
Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Material(
elevation: 0.0,
borderRadius: BorderRadius.circular(60),
color: Colors.black26,
child: Container(
height: 90.0,
width: 90.0,
child: Center(
child: GestureDetector(
child: Text(
'?',
style: TextStyle(
color: Colors.white,
fontSize: 40.0,
fontWeight: FontWeight.bold),
),
onTap: () {
debugPrint("Any Questions");
},
),
)),
),
Column(
children: <Widget>[
Column(
children: <Widget>[
Container(
height: 5.0,
width: 20.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(2),
color: Colors.black),
),
Container(
height: 5.0,
width: 20.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(1),
color: Colors.red[600]),
),
Container(
height: 20.0,
width: 20.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(2),
color: Colors.black),
child: Stack(
children: <Widget>[
Positioned(
left: 15.0,
child: Material(
elevation: 0.0,
borderRadius:
BorderRadius.circular(60),
color: Colors.white,
child: Container(
height: 3.0,
width: 3.0,
),
),
)
],
),
),
Row(
children: <Widget>[
Container(
height: 5.0,
width: 5.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(1),
color: Colors.black
),
),
Container(
height: 5.0,
width: 7.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(1),
// color: Colors.black
),
),
Container(
height: 5.0,
width: 5.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(1),
color: Colors.black
),
),
],
),
Container(
height: 180.0,
width: 100.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(1),
color: Colors.black
),
),
],
),
],
),
Material(
elevation: 0.0,
borderRadius: BorderRadius.circular(60),
color: Colors.black26,
child: Container(
height: 90.0,
width: 90.0,
child: Center(
child: IconButton(
icon: Icon(Icons.volume_off),
iconSize: 40.0,
color: Colors.white,
onPressed: () {
debugPrint('Mutted');
},
)
)),
),
],
),
],
)
],
)
],
),
],
));
}
}
No comments:
Post a Comment