Skip to content

Instantly share code, notes, and snippets.

@skourta

skourta/main.dart

Last active January 9, 2020 22:47
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save skourta/834bb23fd6de73c23757b0d858989fac to your computer and use it in GitHub Desktop.
Save skourta/834bb23fd6de73c23757b0d858989fac to your computer and use it in GitHub Desktop.
Download ZIP
GDG School Flutter Workshop
Raw
main.dart
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyFoodPage extends StatefulWidget {
@override
_FoodPageState createState() {
return _FoodPageState();
}
}
class _FoodPageState extends State<MyFoodPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: ListView(
padding: EdgeInsets.fromLTRB(10, 50, 0, 0),
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
ClipOval(
child: Material(
color: Colors.transparent,
child: InkWell(
child: Icon(
Icons.arrow_back,
color: Colors.black,
size: 30,
),
onTap: () {
Navigator.pop(context);
}),))
],
),
SizedBox(
height: 60,
),
Column(
children: <Widget>[
Container(
width: 300,
child: Text('FANTASTIC',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w500,
fontSize: 40)),
),
Container(
width: 300,
child: Text('BEEF RAMYEN',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w500,
fontSize: 40)),
),
SizedBox(
height: 20,
),
Row(
//mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
SizedBox(
width: 20,
),
Stack(
overflow: Overflow.visible,
children: <Widget>[
Container(
height: 40,
width: 40,
decoration: BoxDecoration(
color: Colors.amber,
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage(
"https://static.boredpanda.com/blog/wp-content/uploads/2016/03/i-got-lost-in-the-beauty-of-tokyo-at-night__880.jpg"),
),
borderRadius: BorderRadius.circular(100),
border: Border.all(color: Colors.white, width: 2.0),
),
),
Positioned(
left: 20,
child: Container(
height: 40,
width: 40,
decoration: BoxDecoration(
color: Colors.pink,
image: DecorationImage(
fit: BoxFit.cover,image: NetworkImage(
"https://static.boredpanda.com/blog/wp-content/uploads/2016/03/i-got-lost-in-the-beauty-of-tokyo-at-night__880.jpg"),
),
borderRadius: BorderRadius.circular(100),
border: Border.all(color: Colors.white, width: 2.0),
),
),
),
Positioned(
left: 45,
child: Container(
height: 40,
width: 40,
decoration: BoxDecoration(
color: Colors.blue,
image: DecorationImage(
fit: BoxFit.cover,image: NetworkImage(
"https://static.boredpanda.com/blog/wp-content/uploads/2016/03/i-got-lost-in-the-beauty-of-tokyo-at-night__880.jpg"),
),
borderRadius: BorderRadius.circular(100),
border: Border.all(color: Colors.white, width: 2.0),
),
),
),
],
),
SizedBox(
width: 60,
),
Text('12,453 people like this',
style: TextStyle(
color: Colors.grey,
fontWeight: FontWeight.w200,
fontSize: 16,
))
],
)
],
),
SizedBox(
height: 30,
),
Container(
height: 200,
width: double.infinity,
child: ListView(
scrollDirection: Axis.horizontal,
padding: EdgeInsets.all(12.0),
children: <Widget>[
Container(
height: 170,
width: 180,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15.0),
image: DecorationImage(
fit: BoxFit.cover, image: NetworkImage(
"https://static.boredpanda.com/blog/wp-content/uploads/2016/03/i-got-lost-in-the-beauty-of-tokyo-at-night__880.jpg"),)),
),
SizedBox(
width: 10,
),
Column(
children: <Widget>[
Container(
padding: EdgeInsets.all(12),
height: 80,
width: 80,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15.0),
image: DecorationImage(
fit: BoxFit.cover,image: NetworkImage(
"https://static.boredpanda.com/blog/wp-content/uploads/2016/03/i-got-lost-in-the-beauty-of-tokyo-at-night__880.jpg"),)),
),
SizedBox(
height: 10,
),
Container(
padding: EdgeInsets.all(12),
height: 80,
width: 80,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15.0),
image: DecorationImage(
fit: BoxFit.cover,image: NetworkImage(
"https://static.boredpanda.com/blog/wp-content/uploads/2016/03/i-got-lost-in-the-beauty-of-tokyo-at-night__880.jpg"),)),
),
],
),
SizedBox(
width: 10,
),
Column(
children: <Widget>[
Container(
padding: EdgeInsets.all(12),
height: 80,
width: 80,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15.0),
image: DecorationImage(
fit: BoxFit.cover,image: NetworkImage(
"https://static.boredpanda.com/blog/wp-content/uploads/2016/03/i-got-lost-in-the-beauty-of-tokyo-at-night__880.jpg"),)),
),
SizedBox(
height: 10,
),
Container(
padding: EdgeInsets.all(12),
height: 80,
width: 80,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15.0),
image: DecorationImage(
fit: BoxFit.cover,image: NetworkImage(
"https://static.boredpanda.com/blog/wp-content/uploads/2016/03/i-got-lost-in-the-beauty-of-tokyo-at-night__880.jpg"),)),
),
],
),
SizedBox(
width: 10,
),
Container(
padding: EdgeInsets.all(12),
height: 170,
width: 80,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15.0),
image: DecorationImage(
fit: BoxFit.cover, image: NetworkImage(
"https://static.boredpanda.com/blog/wp-content/uploads/2016/03/i-got-lost-in-the-beauty-of-tokyo-at-night__880.jpg"),)),
),
],
),
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
SizedBox(
width: 18,
),
Container(
height: 40,
width: 40,
child: Icon(
Icons.list,
color: Colors.white,
),
decoration: BoxDecoration(
color: Colors.pink,
borderRadius: BorderRadius.circular(100)),
),
SizedBox(
width: 18,
),
Container(
height: 20,
width: 200,
child: Text('ABOUT',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 18,
)),
),
],
),
Column(
children: <Widget>[
SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Container(
width: 220,
height: 100,
padding: EdgeInsets.all(5),
child: Text(
'Lorem Ipsum er ganske enkelt fyldtekst fra print- og typografiindustrien. Lorem Ipsum har været standard fyldtekst ',
),
),
)
],
),
SizedBox(
height: 20,
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
SizedBox(
width: 18,
),
Container(
height: 40,
width: 40,
child: Icon(
Icons.alarm,
color: Colors.white,
),
decoration: BoxDecoration(
color: Colors.pink,
borderRadius: BorderRadius.circular(100)),
),
SizedBox(
width: 18,
),
Container(
height: 20,
width: 200,
child: Text('OPEN HOURS',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 18,
)),
),
],
),
Column(
children: <Widget>[
SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Container(
width: 200,
height: 100,
padding: EdgeInsets.all(5),
child: Text(
'Everyday . 10am - 10pm',
),
),
)
],
),
],
),
);
}
}
// void main () {
// runApp(MyApp);
// }
class MyHomePage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _MyHomePageState();
}
}
class _MyHomePageState extends State<MyHomePage>{
var selectedPlace = '';
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
body: ListView(
children: <Widget>[
Stack(
children: <Widget>[
Container(
height:
MediaQuery.of(context).size.height * 0.5,
child: null,
),Image.network(
'https://static.boredpanda.com/blog/wp-content/uploads/2016/03/i-got-lost-in-the-beauty-of-tokyo-at-night__880.jpg',
height:MediaQuery.of(context).size.height * 0.39,
fit: BoxFit.cover,
),
Positioned(
child: RotatedBox(
quarterTurns: 3,
child: Text('JAPAN',
style: TextStyle(
fontSize: 80,
fontFamily: 'Oswald',
fontWeight: FontWeight.bold,
color: Colors.white.withOpacity(0.3),
letterSpacing : 10.0,
),),
),
),
Positioned(
top: 8,
right: 8,
child: Container(
height: 40.0,
width: 40.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.white
),
child: Icon(Icons.menu),
),
),
Positioned(
top: 8,
right: 8,
child: Container(
height: 12,
width: 12,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(6.0),
color: Colors.red
),
)
),
Positioned(
left: 30,
top: 270,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('Welcome to',
style: TextStyle(
fontWeight: FontWeight.w500,
fontSize: 25,
color: Colors.white,
fontFamily: 'Oswald'
),
),
Row(
children: <Widget>[
Text('TOKYO',
style : TextStyle(
fontFamily: 'Oswald',
fontSize: 50,
fontWeight: FontWeight.bold,
color: Colors.pink
)
),
Text(', JAPAN',
style : TextStyle(
fontFamily: 'Oswald',
fontSize: 50,
fontWeight: FontWeight.bold,
color: Colors.white
)
),
],
),
],
)
),
Positioned(
left: 25,
right: 25,
top: 350,
child: Container(
height: 50,
decoration: BoxDecoration(
color: Colors.grey.shade600,
borderRadius: BorderRadius.circular(15)
),
child: TextField(
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'Lets explore some places here...',
helperStyle: TextStyle(
color: Colors.grey,
fontSize: 12,
fontFamily: 'Montserrat',
),
contentPadding: EdgeInsets.only(top:15.0),
prefixIcon: Icon(Icons.search, color:Colors.grey)
),
),
),
)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
_buildMenuItem('BEEF', Icons.fastfood),
_buildMenuItem('AIRPORT', Icons.local_airport),
_buildMenuItem('COFFE', Icons.cloud)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
_buildMenuItem('PARK', Icons.terrain),
_buildMenuItem('MAIL', Icons.mail_outline),
_buildMenuItem('BRUSH', Icons.brush)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
_buildMenuItem('PARTY', Icons.party_mode),
_buildMenuItem('RESTAURANT', Icons.restaurant),
_buildMenuItem('CAKE', Icons.cake)
],
)
]
),
);
}
Widget _buildMenuItem (String placeName, iconData){
return InkWell(
splashColor: Colors.transparent,
onTap: () {
selectedMenuOption (placeName);
if(selectedPlace == 'BEEF'){ Navigator.push(
context,
MaterialPageRoute(builder: (context) => MyFoodPage()),
);}
},
child: AnimatedContainer(
curve: Curves.easeIn,
duration: Duration(milliseconds: 300),
height: selectedPlace == placeName
? MediaQuery.of(context).size.width / 3
: MediaQuery.of(context).size.width / 3 * 0.75,
width: selectedPlace == placeName
? MediaQuery.of(context).size.width / 3
: MediaQuery.of(context).size.width / 3 * 0.75,
color: selectedPlace == placeName ? Colors.pink : Colors.transparent,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(iconData,
color: selectedPlace == placeName ? Colors.white : Colors.grey,
size: 20.0,),
SizedBox(height: 12,),
Text(placeName,
style: TextStyle(
fontFamily: 'Montserrat',
color: selectedPlace == placeName ? Colors.white : Colors.grey,
fontSize: 12.0
))
],
),
),
);
}
selectedMenuOption (placeName){
setState(() {
selectedPlace = placeName;
});
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment