My_tasks_Flutter

task_03.dart

import 'package:flutter/material.dart';

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

class MyWeatherApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.red,
        appBar: AppBar(
          centerTitle: true,
          backgroundColor: Colors.red,
          elevation: 0.0,
          title: Text(
            'Weather Forecast',
            style: TextStyle(
              color: Colors.white,
            ),
          ),
        ),
        body: weatherBody(),
      ),
    );
  }
}

Widget weatherBody() {
  return SingleChildScrollView(
    child: Column(
      children: <Widget>[
        SafeArea(
          child: Padding(
            padding: EdgeInsets.symmetric(vertical: 20, horizontal: 10),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                textField(),
                Divider(
                  color: Colors.red,
                  height: 25.0,
                ),
                cityDetail(),
                Divider(
                  color: Colors.red,
                  height: 50.0,
                ),
                temperatureDetail(),
                Divider(
                  color: Colors.red,
                  height: 50.0,
                ),
                extraWeatherDetail(),
                Divider(
                  color: Colors.red,
                  height: 50.0,
                ),
                text(),
                Divider(color: Colors.red),
                bottomDetail()
              ],
            ),
          ),
        ),
      ],
    ),
  );
}

Row textField() {
  return Row(
    //mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Column(children: <Widget>[Icon(Icons.search, color: Colors.white)]),
      SizedBox(width: 10),
      Text('Enter City Name',
          style: TextStyle(color: Colors.white, fontSize: 16)),
    ],
  );
}

Column cityDetail() {
  return Column(
    children: <Widget>[
      Text('Murmansk Oblast, RU',
          style: TextStyle(fontSize: 34, color: Colors.white)),
      Divider(color: Colors.red),
      Text('Fryday, Mar 20, 2020',
          style: TextStyle(fontSize: 16, color: Colors.white))
    ],
  );
}

Row temperatureDetail() {
  return Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
    Column(crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[
      Icon(Icons.wb_sunny, color: Colors.white, size: 70.0)
    ]),
    SizedBox(width: 20),
    Column(crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[
      Row(children: <Widget>[
        Text('14 °F',
            style: TextStyle(
                color: Colors.white, fontSize: 54, fontWeight: FontWeight.w100))
      ]),
      Row(children: <Widget>[
        Text('LIGHT SNOW', style: TextStyle(color: Colors.white, fontSize: 16))
      ])
    ])
  ]);
}

Row extraWeatherDetail() {
  return Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Container(
        padding: EdgeInsets.symmetric(horizontal: 40),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Icon(Icons.ac_unit, color: Colors.white),
            Text('3', style: TextStyle(color: Colors.white, fontSize: 24)),
            Text('%', style: TextStyle(color: Colors.white, fontSize: 16)),
          ],
        ),
      ),
      Container(
        padding: EdgeInsets.symmetric(horizontal: 40),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Icon(Icons.ac_unit, color: Colors.white),
            Text('3', style: TextStyle(color: Colors.white, fontSize: 24)),
            Text('%', style: TextStyle(color: Colors.white, fontSize: 16)),
          ],
        ),
      ),
      Container(
        padding: EdgeInsets.symmetric(horizontal: 40),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Icon(Icons.ac_unit, color: Colors.white),
            Text('3', style: TextStyle(color: Colors.white, fontSize: 24)),
            Text('%', style: TextStyle(color: Colors.white, fontSize: 16)),
          ],
        ),
      ),
    ],
  );
}

Text text() {
  return Text('7-DAY WEATHER FORECAST',
      style: TextStyle(color: Colors.white, fontSize: 18));
}

Container bottomDetail() {
  return Container(
    //margin: EdgeInsets.symmetric(vertical: 20.0),
    height: 120.0,
    child: ListView(
      scrollDirection: Axis.horizontal,
      children: <Widget>[
        Container(
          alignment: Alignment.center,
          width: 160.0,
          color: Colors.white38,
          margin: EdgeInsets.symmetric(horizontal: 5),
          child: Column(mainAxisAlignment: MainAxisAlignment.center, children: <
              Widget>[
            Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
              Text('Monday',
                  style: TextStyle(color: Colors.white, fontSize: 24))
            ]),
            Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
              Row(children: <Widget>[
                Text('14 °F ',
                    style: TextStyle(color: Colors.white, fontSize: 24)),
                Icon(Icons.wb_sunny, color: Colors.white, size: 30)
              ])
            ])
          ]),
        ),
        Container(
          alignment: Alignment.center,
          width: 160.0,
          color: Colors.white38,
          margin: EdgeInsets.symmetric(horizontal: 5),
          child: Column(mainAxisAlignment: MainAxisAlignment.center, children: <
              Widget>[
            Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
              Text('Tuesday',
                  style: TextStyle(color: Colors.white, fontSize: 24))
            ]),
            Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
              Row(children: <Widget>[
                Text('5 °F ',
                    style: TextStyle(color: Colors.white, fontSize: 24)),
                Icon(Icons.beach_access, color: Colors.white, size: 30)
              ])
            ])
          ]),
        ),
        Container(
          alignment: Alignment.center,
          width: 160.0,
          color: Colors.white38,
          margin: EdgeInsets.symmetric(horizontal: 5),
          child: Column(mainAxisAlignment: MainAxisAlignment.center, children: <
              Widget>[
            Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
              Text('Wednesday',
                  style: TextStyle(color: Colors.white, fontSize: 24))
            ]),
            Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
              Row(children: <Widget>[
                Text('10 °F ',
                    style: TextStyle(color: Colors.white, fontSize: 24)),
                Icon(Icons.wb_sunny, color: Colors.white, size: 30)
              ])
            ])
          ]),
        ),
        Container(
          alignment: Alignment.center,
          width: 160.0,
          color: Colors.white38,
          margin: EdgeInsets.symmetric(horizontal: 5),
          child: Column(mainAxisAlignment: MainAxisAlignment.center, children: <
              Widget>[
            Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
              Text('Thursday',
                  style: TextStyle(color: Colors.white, fontSize: 24))
            ]),
            Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
              Row(children: <Widget>[
                Text('15 °F ',
                    style: TextStyle(color: Colors.white, fontSize: 24)),
                Icon(Icons.wb_sunny, color: Colors.white, size: 30)
              ])
            ])
          ]),
        ),
        Container(
          alignment: Alignment.center,
          width: 160.0,
          color: Colors.white38,
          margin: EdgeInsets.symmetric(horizontal: 5),
          child: Column(mainAxisAlignment: MainAxisAlignment.center, children: <
              Widget>[
            Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
              Text('Friday',
                  style: TextStyle(color: Colors.white, fontSize: 24))
            ]),
            Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
              Row(children: <Widget>[
                Text('10 °F ',
                    style: TextStyle(color: Colors.white, fontSize: 24)),
                Icon(Icons.wb_sunny, color: Colors.white, size: 30)
              ])
            ])
          ]),
        ),
        Container(
          alignment: Alignment.center,
          width: 160.0,
          color: Colors.white38,
          margin: EdgeInsets.symmetric(horizontal: 5),
          child: Column(mainAxisAlignment: MainAxisAlignment.center, children: <
              Widget>[
            Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
              Text('Saturday',
                  style: TextStyle(color: Colors.white, fontSize: 24))
            ]),
            Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
              Row(children: <Widget>[
                Text('8 °F ',
                    style: TextStyle(color: Colors.white, fontSize: 24)),
                Icon(Icons.wb_sunny, color: Colors.white, size: 30)
              ])
            ])
          ]),
        ),
        Container(
          alignment: Alignment.center,
          width: 160.0,
          color: Colors.white38,
          margin: EdgeInsets.symmetric(horizontal: 5),
          child: Column(mainAxisAlignment: MainAxisAlignment.center, children: <
              Widget>[
            Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
              Text('Sunday',
                  style: TextStyle(color: Colors.white, fontSize: 24))
            ]),
            Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
              Row(children: <Widget>[
                Text('5 °F ',
                    style: TextStyle(color: Colors.white, fontSize: 24)),
                Icon(Icons.wb_sunny, color: Colors.white, size: 30)
              ])
            ])
          ]),
        ),
      ],
    ),
  );
}