weather-flutter-workshop20102020

// myTextWIdget my_text_widget.dart
import 'package:flutter/material.dart';

class MyTextWidget extends StatelessWidget {
  MyTextWidget({
    this.title,
    this.fontWeight,
    this.fontSize,
    this.color,
  });

  final String title;
  final FontWeight fontWeight;
  final double fontSize;
  final Color color;

  @override
  Widget build(BuildContext context) {
    return Text(
      title,
      style: TextStyle(
        color: color ?? Colors.white, // default Colors.white
        fontSize: fontSize,
        fontWeight: fontWeight,
      ),
    );
  }
}




// main.dart

import 'package:flutter/material.dart';

import 'screens/homepage_screen.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomeScreen(),
    );
  }
}




import 'dart:ui';

import 'package:flutter/material.dart';

import '../my_text_widget.dart';

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.black,
        title: Text(
          'Workshop',
          style: TextStyle(
            fontWeight: FontWeight.w300,
          ),
        ),
        actions: [
          IconButton(
            icon: Icon(Icons.settings),
            onPressed: () {
              print('click on setting icons');
            },
          )
        ],
      ),
      body: Container(
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width,
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            colors: [
              Colors.grey.shade900,
              Colors.black,
            ],
          ),
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            _snowIcon(),
            _temperature(),
            _location(),
            _date(),
            _description(),
            _hourlyWeatherInfo(),
          ],
        ),
      ),
    );
  }

  final List<String> times = ['Now', '07', '08'];
  final List<String> temps = ['-1', '-2', '-10'];
  Widget _hourlyWeatherInfo() {
    return Container(
      margin: EdgeInsets.only(top: 10),
      height: 100,
      decoration: BoxDecoration(
        border: Border(
          bottom: BorderSide(
            color: Colors.white.withOpacity(0.3),
          ),
          top: BorderSide(
            color: Colors.white.withOpacity(0.3),
          ),
        ),
      ),
      child: ListView.builder(
        itemCount: times.length,
        scrollDirection: Axis.horizontal,
        itemBuilder: (context, index) {
          return Container(
            width: 50,
            child: Card(
              color: Colors.transparent,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  MyTextWidget(
                    title: times[index],
                  ),
                  Icon(
                    Icons.cloud_queue,
                    color: Colors.white,
                  ),
                  MyTextWidget(
                    title: temps[index],
                  )
                ],
              ),
            ),
          );
        },
      ),
    );
  }

  Widget _description() {
    return Container(
      padding: EdgeInsets.only(left: 20, top: 3),
      child: MyTextWidget(
        title: 'Snow turn to cloud',
      ),
    );
  }

  Widget _date() {
    return Container(
      padding: EdgeInsets.only(left: 20, top: 10),
      child: Row(
        children: [
          MyTextWidget(
            title: 'Today',
            fontWeight: FontWeight.w700,
            color: Colors.grey,
          ),
          SizedBox(
            width: 10,
          ),
          Text(
            '20.10.2020',
            style: TextStyle(
              color: Colors.white,
              fontSize: 14,
            ),
          ),
        ],
      ),
    );
  }

  Widget _location() {
    return Container(
      padding: EdgeInsets.only(left: 20),
      child: Row(
        children: [
          Icon(
            Icons.place,
            color: Colors.white,
          ),
          Text(
            'London, UK',
            style: TextStyle(
              color: Colors.white,
              fontSize: 18,
              fontWeight: FontWeight.w300,
            ),
          ),
        ],
      ),
    );
  }

  Widget _temperature() {
    return Container(
      padding: EdgeInsets.only(left: 20),
      child: Text(
        '-10',
        style: TextStyle(
          color: Colors.white,
          fontSize: 80.0,
          fontWeight: FontWeight.w100,
        ),
      ),
    );
  }

  Widget _snowIcon() {
    return Center(
      child: Container(
        height: 200,
        child: Image.asset(
          'assets/images/snow.png',
          height: 80.0,
        ),
      ),
    );
  }
}