flutter天氣預報APP

前言

這是一個使用flutter寫的天氣預報APP，主要使用瞭如下幾個插件，入門級練練手。 dio:網絡請求插件，用於獲取天氣信息 fluttertoast:彈出toast提示信息 shared_preferences:簡單的數據存儲，用於保存設置過的天氣預報信息 intl:日期格式化 項目GitHub地址：d9l_weather

界面

首先蒐集一些天氣預報APP的設計稿，肯定一下本身的界面。看到有不少好看的，可是並不想作的太複雜。因而選擇了一些簡潔的，背景圖也都去掉了。而後在PS裏大概出一個界面，以下：

而後分析一下這個頁面，大主體就是一個Column佈局排列下來，中間穿插Row佈局。詳細的佈局這裏就不寫，能夠查看源碼 home_page.dart 界面堆好以後，再作一個搜索城市的頁面，一個搜索框加列表就能夠了，怎麼簡單怎麼來。頁面經過右上角的設置按鈕進入。

接口

頁面都寫好以後就須要把數據替換成真實數據了，這裏使用了和風天氣的API獲取天氣數據，註冊以後就能使用。可是普通用戶有些接口是不能用的，可是對這個APP來講，可以查到天氣信息以及足夠了。 新建一個dio_client.dart文件，裏面放全部API請求方法，這裏寫成單例模式，以下。

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();
}
複製代碼

在main函數中初始化單例對象

DioClient();
複製代碼

使用方法

DioClient().getRealTimeWeather();
複製代碼

如獲取實時天氣的方法以下：

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

在搜索完一個城市的天氣後，須要把這個城市的id保存在shared_preferences中，這樣關閉app下次再打開的時候才能顯示上一次查詢的城市天氣，或者須要保存多個城市天氣預報的時候，也能夠保存。 保存只須要一行代碼：

SpClient.sp.setString('cid', cid);
複製代碼

shared_preferences的使用也是使用了單例模式，和dio_client.dart同樣

最後

這個項目很簡單，也只是用了不多的東西，主要是練練手吧。也沒太多東西可以介紹的。後面有時間的話會繼續完善，好比加上國際化、使用狀態管理，多城市保存等等。感興趣的能夠關注一下。GitHub給star支持，謝謝！ 最後再放一下本項目的GitHub地址 d9l_weather

其餘

flutter版的文件管理器項目地址

flutter入門widget的使用。帶你認識flutter widgets。根據flutter中文網widgets目錄進行編寫的一個庫。