cu-traffic-lights-solution-2d.dart

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> {
  bool isSafeToCross = false;

  void onPedestrianLightPressed() {
    setState(() {
      isSafeToCross = true;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        PedestrianLight(
          isSafeToCross,
          onPedestrianLightPressed,
        ),
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 32),
          child: TrafficLight(isSafeToCross),
        ),
      ],
    );
  }
}

class PedestrianLight extends StatelessWidget {
  PedestrianLight(this.isSafeToCross, this.onPressed);

  final bool isSafeToCross;
  final VoidCallback onPressed;

  @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 TrafficLight extends StatelessWidget {
  TrafficLight(this.isSafeToCross);

  final bool 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: isSafeToCross ? Colors.red : MyColors.lightGrey,
                  shape: BoxShape.circle,
                ),
              ),
              Container(
                height: 70,
                width: 70,
                margin: EdgeInsets.all(8),
                decoration: BoxDecoration(
                  color: MyColors.lightGrey,
                  shape: BoxShape.circle,
                ),
              ),
              Container(
                height: 70,
                width: 70,
                margin: EdgeInsets.all(8),
                decoration: BoxDecoration(
                  color: !isSafeToCross ? Colors.green : MyColors.lightGrey,
                  shape: BoxShape.circle,
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }
}

class MyColors {
  static const darkGrey = Color.fromRGBO(42, 43, 46, 1);
  static const lightGrey = Color.fromRGBO(95, 96, 99, 1);
}