https://github.com/r100-stack/flutter-weekly-series-6-weather-app-ui

Week 6: Beginners' Guide to Flutter Development
https://github.com/r100-stack/flutter-weekly-series-6-weather-app-ui

dribbble flutter flutter-ui weather-app

Last synced: 12 months ago
JSON representation

Week 6: Beginners' Guide to Flutter Development

• Host: GitHub
• URL: https://github.com/r100-stack/flutter-weekly-series-6-weather-app-ui
• Owner: r100-stack
• Created: 2020-11-04T21:32:23.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2021-03-09T04:55:35.000Z (about 5 years ago)
• Last Synced: 2025-04-19T18:10:08.376Z (about 1 year ago)
• Topics: dribbble, flutter, flutter-ui, weather-app
• Language: Dart
• Homepage: https://youtu.be/0m6NIA22EwU?t=344
• Size: 7.7 MB
• Stars: 4
• Watchers: 1
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Beginners' Guide to Flutter Development

Welcome to the Beginners' Guide to Flutter Development hosted by Google's Developer Student Club (DSC) program!

This is an eight week workshop series every Thursday, 7:00 - 8:30 EDT from Oct 1, 2020 to Nov 19, 2020.

This series will cover all the Flutter skills all the way from the basics to the advanced level.

By the end of this series, you'll be able to build complex, robust, and attractive Flutter apps for iOS, Android and the web.

Register now on EventBrite: [bit.ly/flutterdate](https://bit.ly/flutterdate)

Have questions? Then [join our Google Classroom today](https://classroom.google.com/c/MTYyMzE1MDQwMDcx?cjc=5irho7x)!

## 6. Weather App UI ⛅

Professional Flutter UI that displays mock weather data.

**Credits: [App design idea (Dribbble)](https://dribbble.com/shots/14328625-Weather-Forecast-App) created by [Muhammad Noufal](https://dribbble.com/muhammad_noufal). All credits to Muhammad!**

### Screenshot



### Structure

* The app has been divided into steps.

* Each step has starter and solution code.

* You can access each code set using the respective branches.

* Also, each step has detailed TODOs along with explanations on why we're doing each TODO.

### How to follow this repo?

* Complete the given TODOs in order.

* Compare the starter and solution branches for each step. You can do this on GitHub or in Android Studio/VS Code.

[How to compare branches on GitHub](https://docs.github.com/en/free-pro-team@latest/github/committing-changes-to-your-project/comparing-commits#comparing-branches)

[How to compare branches on Android Studio](https://medium.com/better-programming/how-to-use-git-in-android-studio-part-2-93cec67b91b0#:~:text=Go%20to%20%E2%80%9CVSC%E2%80%9D%20%2D%3E,choose%20%E2%80%9CCompare%20with%20current%E2%80%9D.&text=A%20popup%20%E2%80%9CCompare%20feature%20with,to%20commits%2C%20files%20to%20files.)

[How to compare branches on Android Studio](https://stackoverflow.com/a/57833947/11547064)

### Steps

1. Setting up AppBar



2. Adding city and country name



3. Adding weather information to the weather card



4. Adding current temperature and additional weather parameters 



5. Formatting the additional weather parameters



6. Formatting the hourly forecase bar



7. Adding hourly weather cards



8. Modify UI for large screens



### Skills Learned

* Advanced UI Design and Implementation

* Container decoration

  * Border

  * BorderRadius

  * BoxShadow

  * Background color

* Text

  * Custom fonts

  * fontSize

  * fontWeight

  * color

* AppBar

  * elevation

  * color

  * leading

  * actions

* Modify UI for large screens

* Flutter Web