Weather app layout

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            "Weather",
            style: TextStyle(color: Colors.black87),
          ),
          backgroundColor: Colors.white,
          centerTitle: true,
          leading: IconButton(
            icon: Icon(Icons.menu),
            onPressed: () {},
          ),
          iconTheme: IconThemeData(color: Colors.black54),
          brightness: Brightness.light,
          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.settings),
              onPressed: () {},
            ),
          ],
        ),
        body: _buildBody(),
      ),
    );
  }

  Widget _buildBody() {
    return SingleChildScrollView(
      child: Column(
        children: <Widget>[
          _headerImage(),
          SafeArea(
            child: Padding(
              padding: EdgeInsets.all(16.0),
              child: Column(
                children: <Widget>[
                  Padding(
                    padding: EdgeInsets.all(8),
                    child: _weatherDescription(),
                  ),
                  Divider(),
                  _temperature(),
                  Divider(),
                  _temperatureForecast(),
                  Divider(),
                  _footerRatings(),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

  Image _headerImage() {
    return Image(
      image: NetworkImage(
          'https://klike.net/uploads/posts/2019-06/1561182204_1.jpg'),
      fit: BoxFit.cover,
    );
  }

  Column _weatherDescription() {
    var lorem =
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.' * 10;

//     for (int i; i < 3; i++) {
//       lorem = lorem;// + lorem;
//     }
    return Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        Text(
          'Tuseday - May 22',
          style: TextStyle(
            fontSize: 32.0,
            fontWeight: FontWeight.bold,
          ),
        ),
        Divider(),
        Text(
          lorem,
          style: TextStyle(
            color: Colors.black54,
            //fontSize: 32.0,
          ),
        ),
      ],
    );
  }

  Row _temperature() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Icon(
              Icons.wb_sunny,
              color: Colors.yellow,
            ),
          ],
        ),
        SizedBox(width: 16),
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Row(
              children: <Widget>[
                Text(
                  "15% Clear",
                  style: TextStyle(
                    color: Colors.deepPurple,
                  ),
                ),
              ],
            ),
            Row(
              children: <Widget>[
                Text(
                  "Moscow oblast, Moscow",
                  style: TextStyle(
                    color: Colors.grey,
                  ),
                ),
              ],
            ),
          ],
        ),
      ],
    );
  }

  Wrap _temperatureForecast() {
    return Wrap(
      spacing: 10.0,
      children: List.generate(
        8,
        (int index) {
          return Chip(
            label: Text(
              "${index + 20}%C",
              style: TextStyle(fontSize: 15),
            ),
            avatar: Icon(
              Icons.wb_cloudy,
              color: Colors.blue.shade300,
            ),
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(4.0),
                side: BorderSide(
                  color: Colors.grey,
                )),
            backgroundColor: Colors.grey.shade100,
          );
        },
      ),
    );
  }

  Row _footerRatings() {
    var stars = Row(
      children: <Widget>[
        Icon(
          Icons.star,
          size: 15.0,
          color: Colors.yellow[600],
        ),
        Icon(
          Icons.star,
          size: 15.0,
          color: Colors.yellow[600],
        ),
        Icon(
          Icons.star,
          size: 15.0,
          color: Colors.yellow[600],
        ),
        Icon(
          Icons.star,
          size: 15.0,
          color: Colors.black,
        ),
        Icon(
          Icons.star,
          size: 15.0,
          color: Colors.black,
        ),
      ],
    );

    return Row(
      children: <Widget>[
        Text(
          "Info with openweathermap.org",
          style: TextStyle(
            fontSize: 15,
          ),
        ),
        SizedBox(width: 16),
        stars,
      ],
    );
  }
}