Created
August 4, 2020 18:30
-
-
Save rogood/4f7a43e67b4390d97eac752224be61f7 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import 'package:flutter/material.dart'; | |
void main() { | |
runApp(MyApp()); | |
} | |
class MyApp extends StatelessWidget { | |
@override | |
Widget build(BuildContext context) { | |
return MaterialApp( | |
title: 'Flutter Traffic Lights', | |
theme: ThemeData( | |
primarySwatch: Colors.blue, | |
visualDensity: VisualDensity.adaptivePlatformDensity, | |
), | |
home: Scaffold( | |
appBar: AppBar( | |
title: Text('Flutter Traffic Lights'), | |
), | |
body: SafeArea( | |
child: SingleChildScrollView( | |
padding: const EdgeInsets.symmetric( | |
vertical: 32, | |
horizontal: 16, | |
), | |
child: Container( | |
child: Center( | |
child: Crossing(), | |
), | |
), | |
), | |
), | |
), | |
); | |
} | |
} | |
class Crossing extends StatefulWidget { | |
@override | |
_CrossingState createState() => _CrossingState(); | |
} | |
class _CrossingState extends State<Crossing> { | |
@override | |
Widget build(BuildContext context) { | |
return Row( | |
crossAxisAlignment: CrossAxisAlignment.start, | |
children: <Widget>[ | |
PedestrianLight(), | |
Padding( | |
padding: const EdgeInsets.only(left: 32), | |
child: TrafficLight(), | |
), | |
], | |
); | |
} | |
} | |
class TrafficLight extends StatelessWidget { | |
@override | |
Widget build(BuildContext context) { | |
return Column( | |
children: [ | |
Container( | |
color: MyColors.darkGrey, | |
child: Column( | |
mainAxisSize: MainAxisSize.min, | |
children: <Widget>[ | |
Container( | |
height: 70, | |
width: 70, | |
margin: EdgeInsets.all(8), | |
decoration: BoxDecoration( | |
color: Colors.red, | |
shape: BoxShape.circle, | |
), | |
), | |
Container( | |
height: 70, | |
width: 70, | |
margin: EdgeInsets.all(8), | |
decoration: BoxDecoration( | |
color: Colors.amber, | |
shape: BoxShape.circle, | |
), | |
), | |
Container( | |
height: 70, | |
width: 70, | |
margin: EdgeInsets.all(8), | |
decoration: BoxDecoration( | |
color: Colors.green, | |
shape: BoxShape.circle, | |
), | |
) | |
], | |
), | |
), | |
], | |
); | |
} | |
} | |
class PedestrianLight extends StatefulWidget { | |
@override | |
_PedestrianLightState createState() => _PedestrianLightState(); | |
} | |
class _PedestrianLightState extends State<PedestrianLight> { | |
bool isSafeToCross = false; | |
void onPressed() { | |
setState(() { | |
isSafeToCross = !isSafeToCross; | |
}); | |
} | |
@override | |
Widget build(BuildContext context) { | |
return Column( | |
children: [ | |
Container( | |
color: MyColors.darkGrey, | |
child: Column( | |
mainAxisSize: MainAxisSize.min, | |
children: <Widget>[ | |
Container( | |
height: 70, | |
width: 70, | |
margin: EdgeInsets.all(8), | |
decoration: BoxDecoration( | |
color: MyColors.lightGrey, | |
shape: BoxShape.circle, | |
), | |
child: !isSafeToCross | |
? Icon( | |
Icons.person, | |
size: 48, | |
color: Colors.red, | |
) | |
: null, | |
), | |
Container( | |
height: 70, | |
width: 70, | |
margin: EdgeInsets.all(8), | |
decoration: BoxDecoration( | |
color: MyColors.lightGrey, | |
shape: BoxShape.circle, | |
), | |
child: isSafeToCross | |
? Icon( | |
Icons.person, | |
size: 48, | |
color: Colors.green, | |
) | |
: null, | |
) | |
], | |
), | |
), | |
RaisedButton( | |
onPressed: onPressed, | |
child: Text('Press to cross'), | |
), | |
], | |
); | |
} | |
} | |
class MyColors { | |
static const darkGrey = Color.fromRGBO(42, 43, 46, 1); | |
static const lightGrey = Color.fromRGBO(95, 96, 99, 1); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment