flutter weather forecast APP

Foreword

This is a written using flutter weather forecast APP, the main use of the following plug-ins, entry-level practice your hand. dio: Plug a network request for access to weather information fluttertoast: toast message pops up shared_preferences: simple data storage for storing setting off weather forecast information intl: Date Format GitHub project Address: d9l_weather

interface

First, collect some weather forecast APP design draft, determine your own interface. See a lot of good-looking, but do not want to be too complicated. Thus some simple selected, the background image are also removed. Then there is probably a PS interface, as follows:

Then analyze this page, it is a large body of Column layout arrangement down, interspersed Row layout. Details of the layout here is not to write, you can view the source code home_page.dart after a good interface stack, do a search page of the city, plus a list of search box on it, how simple how to. Page enter via the Settings button in the upper right corner.

interface

After the pages are written on the need to replace the data into real data, and is used here and wind weather the API to get weather data, it can be used after registration. But some common user interfaces can not be used, but for the APP, the weather information can be found and sufficient. Create a new dio_client.dartfile, which put all API request methods, a singleton written here, is as follows.

class DioClient {
  factory DioClient() => _getInstance();
  static DioClient get instance => _getInstance();
  static DioClient _instance; // 单例对象

  static DioClient _getInstance() {
    if (_instance == null) {
      _instance = DioClient._internal();
    }
    return _instance;
  }

  DioClient._internal();
}
复制代码

Singleton object initializing main function

DioClient();
复制代码

Instructions

DioClient().getRealTimeWeather();
复制代码

Get real-time weather as follows:

  Future<RealTimeWeather> getRealTimeWeather(String cid) async {
    String url = rootUrl + '/now';

    try {
      Response response = await Dio().get(url, options: options, queryParameters: {
        'location': cid, // 查询的城市id
        'key': key,
      });
// 根据API返回的参数定义的model
      RealTimeWeather realTimeWeather;
      realTimeWeather = RealTimeWeather.fromJson(response.data['HeWeather6'].first);
      if (realTimeWeather.status.contains('permission')) {
        return realTimeWeather;
      }

      realTimeWeather.basic = Basic.fromJson(realTimeWeather.mBasic);
      realTimeWeather.update = Update.fromJson(realTimeWeather.mUpdate);
      realTimeWeather.now = Now.fromJson(realTimeWeather.mNow);
      return realTimeWeather;
    } catch (e) {
      print('getRealTimeWeather error= $e');
      return null;
    }
  }
复制代码

shared_preferences

After a complete search of the city weather, the city needs to idsave the shared_preferencescity weather, so next time you close the app open on time in order to display a query, or need to save more cities weather forecast, it can also be saved . Save only need one line of code:

SpClient.sp.setString('cid', cid);
复制代码

shared_preferencesUse is the use of a single-mode embodiment, and dio_client.dartthe same

At last

This project is very simple, with just a few things, mainly to practice your hand now. Too many things can not be described. Behind time, then will continue to improve, for example, coupled with internationalization, the use of state management, multi-city save more. Interested can look at. GitHub to star support, thank you! Finally came alive again at GitHub address the project d9l_weather

other

flutter version of the File Manager Project Address

Use flutter entry widget. You know with flutter widgets. Be a library prepared pursuant to flutter Chinese network widgets directory.