EP.29 Weather App UI Using Flutter

January 30, 2022

Overview

Today we build a weather app using Flutter

Source Code

import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';

class WeatherApp extends StatelessWidget {
  const WeatherApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Container(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height,
            padding: const EdgeInsets.symmetric(horizontal: 25, vertical: 25),
            decoration: const BoxDecoration(
                color: Colors.amber,
                image: DecorationImage(
                  fit: BoxFit.cover,
                  image: NetworkImage(
                      'https://images.unsplash.com/photo-1611656993299-9f9d73232b9c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80'),
                )),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.end,
              children: [
                const SizedBox(
                  height: 50,
                ),
                Container(
                    width: MediaQuery.of(context).size.width,
                    height: 120,
                    alignment: Alignment.topCenter,
                    child: const Text(
                      "95% chance of Snow",
                      style: TextStyle(
                          fontSize: 32,
                          fontWeight: FontWeight.w500,
                          color: Colors.white),
                    )),
                const Spacer(),
                RichText(
                  text: const TextSpan(
                    children: [
                      TextSpan(
                        text: '3',
                        style: TextStyle(
                            fontSize: 240, fontWeight: FontWeight.w500),
                      ),
                      TextSpan(
                        text: '℃',
                        style: TextStyle(
                          fontWeight: FontWeight.bold,
                          fontSize: 50,
                        ),
                      ),
                    ],
                  ),
                ),
                const Text(
                  "NEW YORK",
                  style: TextStyle(
                      fontSize: 30,
                      fontWeight: FontWeight.w500,
                      color: Colors.white),
                ),
                const SizedBox(
                  height: 10,
                ),
              ],
            ),
          ),
          SizedBox(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height,
            child: Lottie.network(
              'https://assets5.lottiefiles.com/packages/lf20_mjrxpoac.json',
              repeat: true,
              frameRate: FrameRate(60),
              fit: BoxFit.cover,
            ),
          ),
        ],
      ),
    );
  }
}