finished the code for phase two

MarkTechson · Feb 20, 2020 · 5cad9b2 · 5cad9b2
1 parent 6620127
commit 5cad9b2
Show file tree

Hide file tree

Showing 3 changed files with 120 additions and 45 deletions.
diff --git a/lib/main.dart b/lib/main.dart
@@ -1,4 +1,7 @@
+import 'dart:convert';
+
 import 'package:flutter/material.dart';
+import 'package:http/http.dart' as http;
 
 void main() => runApp(MyApp());
 
@@ -13,16 +16,38 @@ class MyApp extends StatelessWidget {
   }
 }
 
-class MyHomePage extends StatelessWidget {
+class MyHomePage extends StatefulWidget {
   MyHomePage({Key key}) : super(key: key);
 
+  @override
+  _MyHomePageState createState() => _MyHomePageState();
+}
+
+class _MyHomePageState extends State<MyHomePage> {
+  Future populateUsers;
+
+  Future requestData() async {
+    // request the data
+    var response = await http.get('https://kindler-app.herokuapp.com/users');
+
+    if (response.statusCode == 200) {
+      return jsonDecode(response.body);
+    }
+  }
+
+  @override
+  void initState() {
+    super.initState();
+    populateUsers = requestData();
+  }
+
   @override
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(
         backgroundColor: Colors.white,
         title: Text(
-          'Kindler 🔥',
+          'Kindler I CARE ABOUT YOU 🔥',
           style: TextStyle(
             fontSize: 24.0,
             color: Colors.red,
@@ -31,50 +56,85 @@ class MyHomePage extends StatelessWidget {
         centerTitle: true,
         elevation: .2,
       ),
-      body: Column(
-        crossAxisAlignment: CrossAxisAlignment.center,
-        children: <Widget>[
-          Image.network('https://randomuser.me/api/portraits/lego/4.jpg'),
-          Text("Hi, I'm Bex, 22"),
-          Row(
-            mainAxisAlignment: MainAxisAlignment.center,
-            children: <Widget>[
-              Container(
-                height: 100.0,
-                width: 100.0,
-                decoration: new BoxDecoration(
-                  shape: BoxShape.circle,
-                  border: new Border.all(
-                      color: Color.fromRGBO(200, 200, 200, .5),
-                      width: 12.0,
-                      style: BorderStyle.solid),
-                ),
-                child: Icon(
-                  Icons.close,
-                  color: Colors.red,
-                  size: 50.0,
-                ),
+      body: FutureBuilder(
+        future: populateUsers,
+        builder: (context, snapshot) {
+          if (snapshot.hasData) {
+            return ListView.builder(
+                itemCount: snapshot.data.length,
+                itemBuilder: (_, i) {
+                  var data = snapshot.data[i];
+              return FriendCard(
+                name: data['name'],
+                tag: data['tag'],
+                photo: data['photo'],
+              );
+            });
+          }
+
+          return Text('Loading...');
+        },
+      ),
+    );
+  }
+}
+
+class FriendCard extends StatelessWidget {
+  final String name;
+  final String tag;
+  final String photo;
+
+  FriendCard({
+    key,
+    this.name,
+    this.tag,
+    this.photo,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: <Widget>[
+        Image.network(photo),
+        Text(tag),
+        Row(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: <Widget>[
+            Container(
+              height: 100.0,
+              width: 100.0,
+              decoration: new BoxDecoration(
+                shape: BoxShape.circle,
+                border: new Border.all(
+                    color: Color.fromRGBO(200, 200, 200, .5),
+                    width: 12.0,
+                    style: BorderStyle.solid),
               ),
-              Container(
-                width: 100.0,
-                height: 100.0,
-                decoration: new BoxDecoration(
-                  shape: BoxShape.circle,
-                  border: new Border.all(
-                      color: Color.fromRGBO(200, 200, 200, .5),
-                      width: 12.0,
-                      style: BorderStyle.solid),
-                ),
-                child: Icon(
-                  Icons.favorite,
-                  color: Colors.greenAccent,
-                  size: 50.0,
-                ),
+              child: Icon(
+                Icons.close,
+                color: Colors.red,
+                size: 50.0,
               ),
-            ],
-          )
-        ],
-      ),
+            ),
+            Container(
+              width: 100.0,
+              height: 100.0,
+              decoration: new BoxDecoration(
+                shape: BoxShape.circle,
+                border: new Border.all(
+                    color: Color.fromRGBO(200, 200, 200, .5),
+                    width: 12.0,
+                    style: BorderStyle.solid),
+              ),
+              child: Icon(
+                Icons.favorite,
+                color: Colors.greenAccent,
+                size: 50.0,
+              ),
+            ),
+          ],
+        )
+      ],
     );
   }
 }
diff --git a/pubspec.lock b/pubspec.lock
@@ -46,6 +46,20 @@ packages:
     description: flutter
     source: sdk
     version: "0.0.0"
+  http:
+    dependency: "direct main"
+    description:
+      name: http
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.12.0+4"
+  http_parser:
+    dependency: transitive
+    description:
+      name: http_parser
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "3.1.3"
   matcher:
     dependency: transitive
     description:
@@ -143,4 +157,4 @@ packages:
     source: hosted
     version: "2.0.8"
 sdks:
-  dart: ">=2.2.2 <3.0.0"
+  dart: ">=2.4.0 <3.0.0"
diff --git a/pubspec.yaml b/pubspec.yaml
@@ -19,6 +19,7 @@ environment:
 dependencies:
   flutter:
     sdk: flutter
+  http: 0.12.0+4
 
   # The following adds the Cupertino Icons font to your application.
   # Use with the CupertinoIcons class for iOS style icons.