import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'IoT Smart Rain',
      theme: ThemeData(
        primaryColor: Colors.blueGrey[600],
      ),
      home: Device(),
    );
  }
}

class Device extends StatefulWidget {
  @override
  DeviceState createState() => DeviceState();
}

class DeviceState extends State<Device> {
  final TextStyle _biggestFont = const TextStyle(fontSize: 34);
  final TextStyle _biggerFont = const TextStyle(fontSize: 15);

  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: Center(
          child: Text('Smart Rain'),
        )),
        body: Column(
          children: <Widget>[
            Card(
              elevation: 5.0,
              margin: EdgeInsets.all(3),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                mainAxisSize: MainAxisSize.max,
                children: <Widget>[
                  Image.asset(
                    'assets/images/elco_logo.png',
                    width: 210,
                    height: 100,
                    fit: BoxFit.fill,
                  ),
                  Column(
                      mainAxisAlignment: MainAxisAlignment.start,
                      mainAxisSize: MainAxisSize.max,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          mainAxisSize: MainAxisSize.max,
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: <Widget>[
                            Text(
                              'SR-001',
                              style: _biggestFont,
                            ),
                            Icon(
                              Icons.check_circle,
                            )
                          ],
                        ),
                        Card(
                          color: Colors.green,
                          child: Text(
                            '4500AMP Remaining',
                            style: _biggerFont,
                          ),
                        ),
                      ]),
                ],
              ),
            ),
            Container(
              color: Colors.blue,
              constraints: BoxConstraints.expand(height: 400, width: 400),
              alignment: Alignment.center,
            )
          ],
        ));
  }
}