{"id":18968643,"url":"https://github.com/r100-stack/flutter-weekly-series-6-weather-app-ui","last_synced_at":"2025-06-16T09:36:26.883Z","repository":{"id":120424682,"uuid":"310122325","full_name":"r100-stack/Flutter-Weekly-Series-6-Weather-App-UI","owner":"r100-stack","description":"Week 6: Beginners' Guide to Flutter Development","archived":false,"fork":false,"pushed_at":"2021-03-09T04:55:35.000Z","size":8074,"stargazers_count":4,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-19T18:10:08.376Z","etag":null,"topics":["dribbble","flutter","flutter-ui","weather-app"],"latest_commit_sha":null,"homepage":"https://youtu.be/0m6NIA22EwU?t=344","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/r100-stack.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-11-04T21:32:23.000Z","updated_at":"2023-12-12T07:50:52.000Z","dependencies_parsed_at":null,"dependency_job_id":"05b1e796-e7f3-4340-9a0c-20880a63551b","html_url":"https://github.com/r100-stack/Flutter-Weekly-Series-6-Weather-App-UI","commit_stats":null,"previous_names":["r100-stack/flutter-weekly-series-6-weather-app-ui"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/r100-stack/Flutter-Weekly-Series-6-Weather-App-UI","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/r100-stack%2FFlutter-Weekly-Series-6-Weather-App-UI","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/r100-stack%2FFlutter-Weekly-Series-6-Weather-App-UI/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/r100-stack%2FFlutter-Weekly-Series-6-Weather-App-UI/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/r100-stack%2FFlutter-Weekly-Series-6-Weather-App-UI/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/r100-stack","download_url":"https://codeload.github.com/r100-stack/Flutter-Weekly-Series-6-Weather-App-UI/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/r100-stack%2FFlutter-Weekly-Series-6-Weather-App-UI/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260134060,"owners_count":22963838,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dribbble","flutter","flutter-ui","weather-app"],"created_at":"2024-11-08T14:48:11.486Z","updated_at":"2025-06-16T09:36:26.861Z","avatar_url":"https://github.com/r100-stack.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Beginners' Guide to Flutter Development\n\nWelcome to the Beginners' Guide to Flutter Development hosted by Google's Developer Student Club (DSC) program!\n\nThis is an eight week workshop series every Thursday, 7:00 - 8:30 EDT from Oct 1, 2020 to Nov 19, 2020.\n\nThis series will cover all the Flutter skills all the way from the basics to the advanced level.\nBy the end of this series, you'll be able to build complex, robust, and attractive Flutter apps for iOS, Android and the web.\n\nRegister now on EventBrite: [bit.ly/flutterdate](https://bit.ly/flutterdate)\n\nHave questions? Then [join our Google Classroom today](https://classroom.google.com/c/MTYyMzE1MDQwMDcx?cjc=5irho7x)!\n\n## 6. Weather App UI ⛅\n\nProfessional Flutter UI that displays mock weather data.\n\n**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!**\n\n### Screenshot\n\n\u003cimg src=\"assets/screenshot_step7.gif\"\u003e\n\n### Structure\n\n* The app has been divided into steps.\n* Each step has starter and solution code.\n* You can access each code set using the respective branches.\n* Also, each step has detailed TODOs along with explanations on why we're doing each TODO.\n\n### How to follow this repo?\n\n* Complete the given TODOs in order.\n* Compare the starter and solution branches for each step. You can do this on GitHub or in Android Studio/VS Code.\n\n[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)\n\n[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.\u0026text=A%20popup%20%E2%80%9CCompare%20feature%20with,to%20commits%2C%20files%20to%20files.)\n\n[How to compare branches on Android Studio](https://stackoverflow.com/a/57833947/11547064)\n\n### Steps\n\n1. Setting up AppBar\n\u003cimg src=\"assets/screenshot_step1.png\"\u003e\n2. Adding city and country name\n\u003cimg src=\"assets/screenshot_step2.png\"\u003e\n3. Adding weather information to the weather card\n\u003cimg src=\"assets/screenshot_step3.png\"\u003e\n4. Adding current temperature and additional weather parameters \n\u003cimg src=\"assets/screenshot_step4.png\"\u003e\n5. Formatting the additional weather parameters\n\u003cimg src=\"assets/screenshot_step5.png\"\u003e\n6. Formatting the hourly forecase bar\n\u003cimg src=\"assets/screenshot_step6.png\"\u003e\n7. Adding hourly weather cards\n\u003cimg src=\"assets/screenshot_step7.gif\"\u003e\n8. Modify UI for large screens\n\u003cimg src=\"assets/screenshot_step8.gif\"\u003e\n\n### Skills Learned\n\n* Advanced UI Design and Implementation\n* Container decoration\n  * Border\n  * BorderRadius\n  * BoxShadow\n  * Background color\n* Text\n  * Custom fonts\n  * fontSize\n  * fontWeight\n  * color\n* AppBar\n  * elevation\n  * color\n  * leading\n  * actions\n* Modify UI for large screens\n* Flutter Web","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fr100-stack%2Fflutter-weekly-series-6-weather-app-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fr100-stack%2Fflutter-weekly-series-6-weather-app-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fr100-stack%2Fflutter-weekly-series-6-weather-app-ui/lists"}