Flutter實戰(一)寫一個天氣查詢的APP
先上效果圖;
程式碼github地址:github.com/koudle/GDG_…
1.建立工程
在Android Studio中,File
-> New
->New Flutter Project
-> Flutter Application
建立完工程後,有三個目錄
android
:Android工程的目錄
ios
:iOS工程的目錄
lib
: Flutter工程的目錄
其中android、ios下的檔案我們都不動,我們只改動lib目錄下的dart檔案。
2.執行Flutter工程
- 連線手機
- 這裡不建議用模擬器,因為模擬器在用GPU渲染時可能會出問題,導致圖片渲染不出來。
- 然後按
Run
在手機上把程式跑起來。
3.天氣API介面申請
註冊地址console.heweather.com/register
註冊完後,再看API文件 www.heweather.com/documents
demo這裡用的是,獲取當天天氣情況的API:www.heweather.com/documents/a…
用的請求URL如下:
https://free-api.heweather.com/s6/weather/now?location=廣州&key=******
4.介面編寫
在建立的工程裡,有個main.dart
裡面有一段顯示介面的程式碼如下:
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: `Flutter Demo`,
theme: ThemeData(
// This is the theme of your application.
//
// Try running your application with "flutter run". You`ll see the
// application has a blue toolbar. Then, without quitting the app, try
// changing the primarySwatch below to Colors.green and then invoke
// "hot reload" (press "r" in the console where you ran "flutter run",
// or press Run > Flutter Hot Reload in a Flutter IDE). Notice that the
// counter didn`t reset back to zero; the application is not restarted.
primarySwatch: Colors.blue,
),
home: MyHomePage(title: `Flutter Demo Home Page`),
);
}
}
其中home
就是要顯示的介面,這裡我們要把MyHomePage
換成我們自己的。
4.1 建立WeatherWidget
通過 new
-> Dart File
在lib目錄下建立WeatherWidget
class WeatherWidget extends StatefulWidget{
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return new WeatherState();
}
}
class WeatherState extends State<WeatherWidget>{
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
);
}
}
建立完後,在main.dart
中將home
改為WeatherWidget
,如下:
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: `Flutter Demo`,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: WeatherWidget(),
);
}
4.2 HotReload
在寫UI的工程中,我們可以用到Flutter的hot reload的特性,寫佈局的時候,按ctrl+s
或cmd+s
就可以在手機上實時看到介面的變化。
這個功能很好用。
4.3新增圖片資源
Flutter可以新增不同的資源,例如圖片、文字、配置檔案、靜態資料等。
新增資源時,需要在pubspec.yaml
檔案中的flutter
屬性下新增assets
,並標明要新增資源的路徑,例如,我們要加入指定的圖片時,可以這麼寫:
flutter:
assets:
- assets/my_icon.png
- assets/background.png
如果要新增的資源太多,也可以新增資料夾,例如:
flutter:
assets:
- assets/
在本demo中,要新增一個背景圖,我們在工程的根目錄下建立images
目錄,將背景圖放在images
目錄下,然後在pubspec.yaml
中新增:
flutter:
# The following line ensures that the Material Icons font is
# included with your application, so that you can use the icons in
# the material Icons class.
uses-material-design: true
assets:
- images/
4.4 寫WeatherWidget的UI佈局
在Scaffold
中新增body
的屬性,來寫UI的佈局,如下:
class WeatherState extends State<WeatherWidget>{
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
body: new Stack(
fit: StackFit.expand,
children: <Widget>[
new Image.asset("images/weather_bg.jpg",fit: BoxFit.fitHeight,),
new Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
new Container(
width: double.infinity,
margin: EdgeInsets.only(top: 40.0),
child: new Text(
"廣州市",
textAlign: TextAlign.center,
style: new TextStyle(
color: Colors.white,
fontSize: 30.0,
),
),
),
new Container(
width: double.infinity,
margin: EdgeInsets.only(top: 100.0),
child: new Column(
children: <Widget>[
new Text(
"20 °",
style: new TextStyle(
color: Colors.white,
fontSize: 80.0
)),
new Text(
"晴",
style: new TextStyle(
color: Colors.white,
fontSize: 45.0
)),
new Text(
"溼度 80%",
style: new TextStyle(
color: Colors.white,
fontSize: 30.0
),
)
],
),
)
],
)
],
),
);
}
}
按ctrl+s
,在手機上就可以看到寫好的UI,但這時候的資料是寫死的,下來看如何通過http獲取資料。
5.通過http獲取資料
要通過http資料,我們首先要新增http的依賴庫,在pubspec.yaml
中的dependencies
新增如下:
dependencies:
flutter:
sdk: flutter
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^0.1.2
http: ^0.12.0
然後在當前工程目錄下執行以下命令列:
$ flutter packages get
或者在Android Stuido 開啟pubspec.yaml
檔案,點選上面的packages get
這裡操作的意義是,拉取http的庫。
5.1 建立WeatherData類
通過 new
-> Dart File
在lib目錄下建立WeatherData
class WeatherData{
String cond; //天氣
String tmp; //溫度
String hum; //溼度
WeatherData({this.cond, this.tmp, this.hum});
factory WeatherData.fromJson(Map<String, dynamic> json) {
return WeatherData(
cond: json[`HeWeather6`][0][`now`][`cond_txt`],
tmp: json[`HeWeather6`][0][`now`][`tmp`]+"°",
hum: "溼度 "+json[`HeWeather6`][0][`now`][`hum`]+"%",
);
}
factory WeatherData.empty() {
return WeatherData(
cond: "",
tmp: "",
hum: "",
);
}
}
5.2 資料獲取
class WeatherState extends State<WeatherWidget>{
WeatherData weather = WeatherData.empty();
WeatherState(){
_getWeather();
}
void _getWeather() async{
WeatherData data = await _fetchWeather();
setState((){
weather = data;
});
}
Future<WeatherData> _fetchWeather() async{
final response = await http.get(`https://free-api.heweather.com/s6/weather/now?location=廣州&key=ebb698e9bb6844199e6fd23cbb9a77c5`);
if(response.statusCode == 200){
return WeatherData.fromJson(json.decode(response.body));
}else{
return WeatherData.empty();
}
}
@override
Widget build(BuildContext context) {
...
}
}
5.3 將之前寫死的資料換成WeatherData
...
child: new Column(
children: <Widget>[
new Text(
weather?.tmp,
style: new TextStyle(
color: Colors.white,
fontSize: 80.0
)),
new Text(
weather?.cond,
style: new TextStyle(
color: Colors.white,
fontSize: 45.0
)),
new Text(
weather?.hum,
style: new TextStyle(
color: Colors.white,
fontSize: 30.0
),
)
],
),
...
至此這款天氣查詢的APP實現了一個顯示城市、溫度、天氣、溼度的介面,但是這個介面只有一個顯示的功能,沒有任何可互動的地方,寫下篇文章繼續完善查詢天氣的APP的功能。
歡迎加入學習交流群;964557053。進群可免費領取一份最新技術大綱和Android進階資料。請備註csdn
相關文章
- Flutter實戰1 --- 寫一個天氣查詢的APPFlutterAPP
- Flutter實戰2 — 寫一個天氣查詢的APPFlutterAPP
- Flutter實戰(二)寫一個天氣查詢的APPFlutterAPP
- Flutter實戰2 --- 寫一個天氣查詢的APPFlutterAPP
- Flutter實戰4 -- 天氣查詢APP重構之狀態管理(InheritedWidget)FlutterAPP
- Flutter實戰5 -- 天氣查詢APP重構之狀態管理(ScopedModel)FlutterAPP
- Flutter+Mobx實戰,寫一個App應用FlutterAPP
- [Python實戰]Python製作天氣查詢軟體Python
- python天氣查詢Python
- flutter天氣預報APPFlutterAPP
- 開源一個天氣APP Build with React NativeAPPUIReact Native
- 天氣預報查詢 API 提供個性化的天氣服務的設計思路API
- Python實現天氣查詢功能(外加Excel技巧)PythonExcel
- 編寫一個 SQL 查詢來實現分數排名。SQL
- springboot應用查詢城市天氣Spring Boot
- 查詢天氣預報網站網站
- 命令列查詢天氣的正確方式命令列
- 我用 Flutter Gemini 寫了一個水貼 APPFlutterAPP
- 天氣預報查詢 API + AI 等於王炸(一大波天氣預報查詢 API 應用場景更新了)APIAI
- 一週時間編寫你的第二個 Flutter APPFlutterAPP
- [譯] 寫一個完整的 Flutter App 是什麼感覺FlutterAPP
- 各種免費好用的api,含天氣查詢、IP查詢、物流查詢等API
- 北京實時公交查詢——Flutter 入坑實戰Flutter
- React實戰之React+Redux實現一個天氣預報小專案ReactRedux
- Flutter 入門與實戰(三十三):手寫一個持久化的 CookieManagerFlutter持久化Cookie
- Flutter實踐:天氣預報Flutter
- React + Redux + Redux-thunk + Semantic-UI-React 實現一個簡單天氣AppReactReduxUIAPP
- vue例項+axios-天氣查詢VueiOS
- Flutter入門與實戰(一):我的第一個 Flutter 應用之旅Flutter
- 利用Flutter寫一個跨平臺的果核APP(0)——介紹FlutterAPP
- 寫一個“特殊”的查詢構造器 – (二、第一條語句)
- 通過Azure bot framework composer 設計一個AI對話機器人bot(查詢天氣)FrameworkAI機器人
- 寫一個“特殊”的查詢構造器 – (四、條件查詢:複雜條件)
- 一個前端碼農的 Flutter 實戰經驗前端Flutter
- 記一個實用的sql查詢語句SQL
- Flutter Weather天氣模組實現Flutter
- Flutter混合App實戰FlutterAPP
- MyBatis初級實戰之五:一對一關聯查詢MyBatis