Lesson 2: Planets-Flutter: creating a Planet card

Author: sergiandreplace

assets/img/mars.png

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'home_page_body.dart';
 
 class HomePage extends StatelessWidget {
 
@@ -8,6 +9,9 @@ class HomePage extends StatelessWidget {
       body: new Column(
         children: <Widget>[
           new GradientAppBar("treva"),
+          new HomePageBody(),
+          new HomePageBody(),
+          new HomePageBody(),
         ],
       ),
     );

lib/ui/home/home_page.dart

@@ -0,0 +1,9 @@
+import 'package:flutter/material.dart';
+import 'planet_row.dart';
+
+class HomePageBody extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return new PlanetRow();
+  }
+}

lib/ui/home/home_page_body.dart

@@ -0,0 +1,50 @@
+import 'package:flutter/material.dart';
+
+class PlanetRow extends StatelessWidget {
+
+  final planetThumbnail = new Container(
+    margin: new EdgeInsets.symmetric(
+      vertical: 16.0
+    ),
+    alignment: FractionalOffset.centerLeft,
+    child: new Image(
+      image: new AssetImage("assets/img/mars.png"),
+      height: 92.0,
+      width: 92.0,
+    ),
+  );
+
+  final planetCard = new Container(
+    height: 124.0,
+    margin: new EdgeInsets.only(left: 46.0),
+    decoration: new BoxDecoration(
+      color: new Color(0xFF333366),
+      shape: BoxShape.rectangle,
+      borderRadius: new BorderRadius.circular(8.0),
+      boxShadow: <BoxShadow>[
+        new BoxShadow(
+          color: Colors.black12,
+          blurRadius: 10.0,
+          offset: new Offset(0.0, 10.0),
+        ),
+      ],
+    ),
+  );
+
+  @override
+  Widget build(BuildContext context) {
+    return new Container(
+      height: 120.0,
+      margin: const EdgeInsets.symmetric(
+        vertical: 16.0,
+        horizontal: 24.0,
+      ),
+      child: new Stack(
+        children: <Widget>[
+          planetCard,
+          planetThumbnail,
+        ],
+      )
+    );
+  }
+}

lib/ui/home/planet_row.dart

@@ -21,38 +21,10 @@ flutter:
   # the Icons class.
   uses-material-design: true
 
-  # To add assets to your application, add an assets section, like this:
-  # assets:
-  #  - images/a_dot_burr.jpeg
-  #  - images/a_dot_ham.jpeg
-
-  # An image asset can refer to one or more resolution-specific "variants", see
-  # https://flutter.io/assets-and-images/#resolution-aware.
-
-  # For details regarding adding assets from package dependencies, see
-  # https://flutter.io/assets-and-images/#from-packages
-  
-  # To add custom fonts to your application, add a fonts section here,
-  # in this "flutter" section. Each entry in this list should have a
-  # "family" key with the font family name, and a "fonts" key with a
-  # list giving the asset and other descriptors for the font. For
-  # example:
-  # fonts:
-  #   - family: Schyler
-  #     fonts:
-  #       - asset: fonts/Schyler-Regular.ttf
-  #       - asset: fonts/Schyler-Italic.ttf
-  #         style: italic
-  #   - family: Trajan Pro
-  #     fonts:
-  #       - asset: fonts/TrajanPro.ttf
-  #       - asset: fonts/TrajanPro_Bold.ttf
-  #         weight: 700
-  #
-  # For details regarding fonts from package dependencies, 
-  # see https://flutter.io/custom-fonts/#from-packages
   fonts:
     - family: Poppins
       fonts:
         - asset: assets/fonts/Poppins-SemiBold.ttf
-          weight: 600
+          weight: 600
+  assets:
+      - assets/img/mars.png