Modify UI, format code.

fwrhine · Nov 22, 2020 · c095b05 · c095b05
1 parent d5d4fe4
commit c095b05
Showing 1 changed file with 83 additions and 66 deletions.
diff --git a/lib/main.dart b/lib/main.dart
@@ -6,12 +6,10 @@ import 'dart:convert';
 
 String apiKey = "142286faa5bd8ccf1ae8df60bef70179";
 
-void main () => runApp(
-  MaterialApp(
-    title: "Weather App",
-    home: Home(),
-  )
-);
+void main() => runApp(MaterialApp(
+      title: "Weather App",
+      home: Home(),
+    ));
 
 class Home extends StatefulWidget {
   @override
@@ -21,15 +19,16 @@ class Home extends StatefulWidget {
 }
 
 class _HomeState extends State<Home> {
-
   var temp;
   var description;
   var currently;
   var humidity;
   var windSpeed;
 
-  Future getWeather () async {
-    http.Response response = await http.get("http://api.openweathermap.org/data/2.5/weather?q=Brisbane&units=metric&appid=" + apiKey);
+  Future getWeather() async {
+    http.Response response = await http.get(
+        "http://api.openweathermap.org/data/2.5/weather?q=Brisbane&units=metric&appid=" +
+            apiKey);
     var results = jsonDecode(response.body);
     setState(() {
       this.temp = results['main']['temp'];
@@ -49,84 +48,102 @@ class _HomeState extends State<Home> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      body: Column(
-        children: <Widget>[
-          Container(
-            height: MediaQuery.of(context).size.height / 3,
-            width: MediaQuery.of(context).size.width,
-            color: Color(0xFF2189b5),
-            child: Column(
+        body: Column(children: <Widget>[
+      Container(
+          height: MediaQuery.of(context).size.height / 1.5,
+          width: MediaQuery.of(context).size.width,
+          decoration: BoxDecoration(
+              gradient: LinearGradient(
+                  begin: Alignment.bottomLeft,
+                  end: Alignment.topRight,
+                  colors: [Colors.yellow, Colors.pink])),
+          // color: Color(0xFFff9C19),
+          child: Column(
               mainAxisAlignment: MainAxisAlignment.center,
               crossAxisAlignment: CrossAxisAlignment.center,
               children: <Widget>[
                 Padding(
-                  padding: EdgeInsets.only(bottom: 10.0),
-                  child: Text(
-                    "Brisbane",
-                    style: TextStyle(
-                      color: Colors.white,
-                      fontSize: 20.0,
-                      fontWeight: FontWeight.w600
-                    )
-                  ),
-                ),
-                Text(
-                  temp != null ? (temp.toInt().round()).toString() + "\u00B0C" : "Loading",
-                  style: TextStyle(
-                    color: Colors.white,
-                    fontSize: 40.0,
-                    fontWeight: FontWeight.w600
-                  )
+                  padding: EdgeInsets.only(bottom: 15.0, top: 100.0),
+                  child: Icon(Icons.cloud, color: Colors.white, size: 50.0),
                 ),
                 Padding(
-                  padding: EdgeInsets.only(top: 10.0),
-                  child: Text(
-                      currently != null ? currently.toString() : "Loading",
+                  padding: EdgeInsets.only(bottom: 10.0),
+                  child: Text("Brisbane",
                       style: TextStyle(
                           color: Colors.white,
-                          fontSize: 14.0,
-                          fontWeight: FontWeight.w600
-                      )
-                  ),
+                          fontSize: 22.0,
+                          fontWeight: FontWeight.w400)),
                 ),
-              ]
-            )
-          ),
-          Expanded(
-            child: Padding(
-              padding: EdgeInsets.all(20.0),
+                Text(
+                    temp != null
+                        ? (temp.toInt().round()).toString() + "\u00B0C"
+                        : "",
+                    style: TextStyle(
+                        color: Colors.white,
+                        fontSize: 50.0,
+                        fontWeight: FontWeight.w400)),
+              ])),
+      Expanded(
+          child: Padding(
+              padding: EdgeInsets.only(left: 20.0, right: 20.0),
               child: ListView(
                 children: <Widget>[
                   ListTile(
-                    leading: FaIcon(FontAwesomeIcons.thermometerHalf),
-                    title: Text("Temperature"),
-                    trailing: Text(temp != null ? (temp.toInt().round()).toString()  + "\u00B0C" : "Loading"),
+                    dense: true,
+                    leading: Container(
+                      width: 30,
+                      alignment: Alignment.center,
+                      child: FaIcon(FontAwesomeIcons.thermometerHalf),
+                    ),
+                    title:
+                        Text("Temperature", style: TextStyle(fontSize: 16.0)),
+                    trailing: Text(
+                        temp != null
+                            ? (temp.toInt().round()).toString() + "\u00B0C"
+                            : "",
+                        style: TextStyle(fontSize: 16.0)),
                   ),
                   ListTile(
-                    leading: FaIcon(FontAwesomeIcons.cloud),
-                    title: Text("Weather"),
-                    trailing: Text(description != null ? description.toString().capitalizeFirstofEach : "Loading"),
+                    leading: Container(
+                      width: 30,
+                      alignment: Alignment.center,
+                      child: FaIcon(FontAwesomeIcons.cloud),
+                    ),
+                    title: Text("Weather", style: TextStyle(fontSize: 16.0)),
+                    trailing: Text(
+                        description != null
+                            ? description.toString().capitalizeFirstofEach
+                            : "",
+                        style: TextStyle(fontSize: 16.0)),
                   ),
                   ListTile(
-                    leading: FaIcon(FontAwesomeIcons.sun),
-                    title: Text("Humidity"),
-                    trailing: Text(humidity != null ? humidity.toString() : "Loading"),
+                    leading: Container(
+                      width: 30,
+                      alignment: Alignment.center,
+                      child: FaIcon(FontAwesomeIcons.sun),
+                    ),
+                    title: Text("Humidity", style: TextStyle(fontSize: 16.0)),
+                    trailing: Text(humidity != null ? humidity.toString() : "",
+                        style: TextStyle(fontSize: 16.0)),
                   ),
                   ListTile(
-                    leading: FaIcon(FontAwesomeIcons.wind),
-                    title: Text("Wind Speed"),
-                    trailing: Text(windSpeed != null ? windSpeed.toString() : "Loading"),
+                    leading: Container(
+                      width: 30,
+                      alignment: Alignment.center,
+                      child: FaIcon(FontAwesomeIcons.wind),
+                    ),
+                    title: Text("Wind Speed", style: TextStyle(fontSize: 16.0)),
+                    trailing: Text(
+                        windSpeed != null ? windSpeed.toString() : "",
+                        style: TextStyle(fontSize: 16.0)),
                   )
                 ],
-              )
-            )
-          )
-        ]
-      )
-    );
+              )))
+    ]));
   }
 }
 
 extension CapExtension on String {
-  String get capitalizeFirstofEach => this.split(" ").map((str) => capitalize(str)).join(" ");
-}
+  String get capitalizeFirstofEach =>
+      this.split(" ").map((str) => capitalize(str)).join(" ");
+}