4.4 写WeatherWidget的UI布局
在Scaffold
中添加body
的属性,来写UI的布局,如下:
class WeatherState extends State{
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
body: new Stack(
fit: StackFit.expand,
children: [
new Image.asset(“images/weather_bg.jpg”,fit: BoxFit.fitHeight,),
new Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
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: [
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: ^