All Projects → hasancse91 → weather_app_flutter

hasancse91 / weather_app_flutter

Licence: other
This is a sample Flutter Weather Forecast App for Android and iOS. Without using any state management packages.

Programming Languages

dart
5743 projects
HTML
75241 projects
swift
15916 projects

Projects that are alternatives of or similar to weather app flutter

flutter todos
A cross platform todo list app using flutter, sqlite etc. If you read the code, you will understand how to create simple elegant mobile app using Flutter and Dart language.
Stars: ✭ 60 (+100%)
Mutual labels:  ios-app, flutter-apps, flutter-examples
calmly
Calmly is made with flutter to practice meditation to bring headspace and calmness. 😍💆🏼‍♂️
Stars: ✭ 34 (+13.33%)
Mutual labels:  ios-app, flutter-apps, flutter-examples
Manji
Manji is a mobile application built to help people learning Japanese learn about Kanji.
Stars: ✭ 142 (+373.33%)
Mutual labels:  ios-app, flutter-apps, flutter-examples
Awesome-Flutter-Templates
A Huge Collection of Flutter App templates
Stars: ✭ 53 (+76.67%)
Mutual labels:  ios-app, flutter-apps, flutter-examples
Flutter Tasky App
A Flutter Task App
Stars: ✭ 48 (+60%)
Mutual labels:  ios-app, flutter-apps
E Commerce App Ui Flutter
Nice and clean Online Shop app UI by using #Flutter.
Stars: ✭ 965 (+3116.67%)
Mutual labels:  ios-app, flutter-apps
Open Source Flutter Apps
📱 List of open source Flutter applications
Stars: ✭ 1,086 (+3520%)
Mutual labels:  ios-app, flutter-apps
Chatter App
This is a flutter based modern messaging app where users can sign up and log in to chat with their friends, family, colleagues among groups with enriched User-Experience.
Stars: ✭ 80 (+166.67%)
Mutual labels:  ios-app, flutter-apps
Xtimer Flutter App
Flutter timer app
Stars: ✭ 255 (+750%)
Mutual labels:  ios-app, flutter-apps
Flutter gank
Flutter版 干货集中营
Stars: ✭ 60 (+100%)
Mutual labels:  ios-app, flutter-apps
flutter bolg manage
Flutter实战项目,采用Getx框架管理,遵循Material design设计风格,适合您实战参考或练手
Stars: ✭ 373 (+1143.33%)
Mutual labels:  flutter-apps, flutter-examples
Tasks
A clone of Google Tasks app made from scratch with flutter. WIP.
Stars: ✭ 28 (-6.67%)
Mutual labels:  ios-app, flutter-apps
Horoscope App
Horoscope ☯♉♊♋♌♍
Stars: ✭ 20 (-33.33%)
Mutual labels:  ios-app, flutter-apps
Space Curiosity
All space related agregator, built with Flutter - Spark your curiosity!
Stars: ✭ 56 (+86.67%)
Mutual labels:  ios-app, flutter-apps
Our E School
A mobile app created using Flutter Framework for School management.
Stars: ✭ 315 (+950%)
Mutual labels:  ios-app, flutter-apps
Flutter Tetris
a tetris game powered by flutter. 使用flutter开发俄罗斯方块。
Stars: ✭ 1,109 (+3596.67%)
Mutual labels:  ios-app, flutter-apps
flutter dribble login challenge
A flutter animation UI challenge.
Stars: ✭ 51 (+70%)
Mutual labels:  flutter-apps, flutter-examples
Todayx
🌈Flutter App:🎊「今日份的X」(每天推荐一个:图片、诗歌、名言、音乐、乐评、高等数学、两种配色、化学方程式、Github Repo、知乎问题、文章)
Stars: ✭ 128 (+326.67%)
Mutual labels:  ios-app, flutter-apps
Recipe App Flutter Ui
A nice clean recipe app UI using flutter.
Stars: ✭ 138 (+360%)
Mutual labels:  ios-app, flutter-apps
SocialMedia-App
A fully functional social media app built with flutter with multiple features
Stars: ✭ 646 (+2053.33%)
Mutual labels:  flutter-apps, flutter-examples

Basic Flutter (Android + iOS) App (Dart + Dio) - Weather App

This is a very beginning friendly project of Flutter. A simple weather forecast App using Open Weather Map API. I have used StatefulWidget for state management. For network calls I used the popular Flutter package Dio.

Prerequisite

Basic understanding of Dart programming language. Have to familiar with REST API and network calls with HTTP protocol.

Project Description

We will develop a weather forecast Android Application with Flutter. The UI will be as like as above screenshot. There is a DropdownButton with some City name. After selection a city, user need to hit the View Weather button. Then App will send request to Open Weather web API and show the weather information in the UI.

Open Weather API

We will use Open Weather Map API for collecting weather information. To get the real weather information of a city, you need to sign up and get your own APP ID. Otherwise you can test the API with their sample BASE URL and sample APP ID without creating account.

Project Setup

Clone the project and open it using Android Studio. Then create a file config.json inside assets folder. Add baseUrl and appId JSON field inside the parent JSON object.

Use Sample API without creating account

Add below lines at your config.json file. Then run the project. You'll get dummy or static API response from Open Weather API.

{
  "baseUrl": "https://samples.openweathermap.org/data/2.5",
  "appId": "b6907d289e10d714a6e88b30761fae22"
}

Use Real APP ID after sign up and activation of your APP ID

After Sign up at the website collect your own APP ID from their API Keys page. Then add your APP ID in config.json file like below.

{
  "baseUrl": "http://api.openweathermap.org/data/2.5",
  "appId": "<YOUR OWN APP ID>"
}

The BASE URL and APP ID will be fetched from main.dart file and will be stored it in our local configuration file.

Note: The free version of Open Weather API allows maximum 60 API calls per minute.

Run the project

Run flutter pub get to sync the packages. Then run the app to your real device or emulator.

Disclaimer

This is my first project in Flutter. So there are lots of things to improve. It is not guaranteed about the best practices and Flutter convention in this project. Please don't use this project as a reference or as a boilerplate of your other project. For the sake of simplicity, I avoided to use Bloc, GetX etc. Next time I'll create different repositories for them. Feel free to create issues for improvement.Thanks.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].