Recently, I spent two weeks of weekends and off work time diving into Flutter. After briefly learning the basic widgets, I was ready to practice my skills with a project. What project is practical, there is no lack of technology, at that time is to write a weather APP, so jianyue weather was born.
Simplicity is not simple, richness is not complex
The simple design of the Flutter Weather project provides real-time, multi-day, 24-hour, typhoon track and life index services, including location, deletion and search.
As a practical project of FLUTTER, it includes state management, network request, data cache, custom view, custom animation, tripartite statistics, event management and other technical points, which are practical and rich.
experience
Click the download link to download it
Or scan the QR code directly to experience first
Function is introduced
Currently, the following functions are supported
- Automatic positioning
- Add & Delete cities
- Real-time information
- 24 hour & multi day forecast
- Rich life index
- The typhoon path
- Background Gaussian blur
- Rich and varied weather background effects
- One key for daysBe a child of the weather
Here’s a warning
One key for days
The weather background effect is divided into three layers:
- Background color layer. Gradient effect from top to bottom
- The clouds. There is only one kind of picture, and different changes are made to its displacement, quantity and dyeing to achieve different effects
- Rain and snow. We did a separate animation for rain and snow. It was cool.
Currently supports up to 12 different weather types, including: sunny, cloudy, overcast, small heavy rain, small heavy snow, fog, haze, floating dust, in order to better, in about the page has the upper corner to add the entrance to switch weather types, real-time view different background effects under different weather. Here is a GIF to show the effect, in view of the limitations of GIF itself, may blur the low frame, please download APK to experience.
Technology is introduced
Although this project is simple, it covers a number of FLUTTER technical points, which can meet the needs of daily development of small projects.
In fact, it only took two weekends to get started with Flutter and complete the project. The code was written in a bit of a rush, and a lot of packaging and some drawing logic still have a lot of room for optimization. I will spare time to optimize a wave later.
Roughly arrange its technical points:
- Network requests & data caching
- Autonavi SDK and automatic positioning
- Customize views, animations, and widgets
- Tripartite statistical access, plug-in access
- State management, data transfer between pages and across pages
- Screen adaptation, common component encapsulation
From the project, you can see a lot of charts, including the air quality and humidity ratio arc chart, sunrise and sunset arc chart, and 24 hours & multi-day line chart. In fact, the principle of drawing with Android is very similar, including the interface design is also similar. There are also canvas canvas and paint brushes, which make writing easier.
With the Android drawing foundation, it’s really fast to write, and it takes less than a day. You load the data and draw from the data you get. I’ll talk about the logic of this drawing separately later on.
Tripartite library dependencies
The reason why Fluter is so popular and the development efficiency is so high is that in addition to Google as the backer, it is also the active open source community. Pub. dev provides many stable and diverse plug-ins, saving unnecessary development time, and making choices according to their actual situation. Combined with the Alfred tool on Mac, it’s a handy search.
Similarly, jianyue weather project also cited many dependent plug-ins, hereby note and thank you.
| The plug-in name | Plugin instructions |
|---|---|
| flutter_bloc | Not to mention, very powerful, as a novice no longer need to worry about data sharing and updating |
| shared_preferences | It’s very common to persist data |
| dio | Of course, network requests cannot be separated from a good network framework, and the project only uses basic GET requests |
| amap_location_fluttify | Autonavi positioning plug-in, although there are pits, but meet the basic requirements |
| location_permissions | Determine whether a plug-in has been applied for |
| event_bus | Event updates |
| flutter_slidable | Powerful sideslip plug-in |
| umeng_analytics_plugin | Ameng statistics plug-in |
| flutter_screenutil | Screen adaptation tool plug-in |
| modal_bottom_sheet | At the bottom of the popup window |
| path_drawing | To draw the dotted line path |
| url_launcher | Universal jump tool |
| package_info | Get package information |
conclusion
If you want to implement Flutter on Android, click the button and update the logic of the TextView, first create the XML layout, then initialize the View in Java code and add click events to the Button. Then you need separate variables to hold state updates, and finally update the TextView’s value when the variables change.
The core of a Flutter is a widget. Many functions are encapsulated in widgets. If you want to implement this function in a Flutter, you only need to create two widgets. Subsequent View updates can be completely ignored, similar to Android’s Databinding.
However, since they’re all widgets, you’ll find that if you write all your pages in one file, the nested graphics will definitely crash you. So you have to break down the functionality, keep the logic as minimal as possible, and make the code very readable and maintainable. There are plug-ins, although the community plug-ins have been quite rich, but there are still some needs to find the right plug-in, which requires the majority of developers, actively burning open source blood, to contribute their own results for the community.
In general, the development efficiency is really improved a lot, because the pit time is short, the principle and performance did not have a detailed study, so it may lead to a bit one-sided view, but I will try to make up the knowledge point behind.
Thank you
Weather data comes from Cloud Cloud technology
The location function comes from Amap
Statistics from Ameng statistics
Weather Icon from Ali Icon