前言
這是一個使用flutter寫的天氣預報APP，主要使用了以下幾個外掛，入門級練練手。
dio:網路請求外掛，用於獲取天氣資訊
fluttertoast:彈出toast提示資訊
shared_preferences:簡單的資料儲存，用於儲存設定過的天氣預報資訊
intl:日期格式化
專案GitHub地址：d9l_weather
介面
首先蒐集一些天氣預報APP的設計稿，確定一下自己的介面。看到有很多好看的，但是並不想做的太複雜。於是選擇了一些簡潔的，背景圖也都去掉了。然後在PS裡大概出一個介面，如下：
介面
頁面都寫好之後就需要把資料替換成真實資料了，這裡使用了和風天氣的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