background image

Author: sergiandreplace

lib/model/planets.dart

@@ -6,9 +6,10 @@ class Planet {
   final String gravity;
   final String description;
   final String image;
+  final String picture;
 
   const Planet({this.id, this.name, this.location, this.distance, this.gravity,
-    this.description, this.image});
+    this.description, this.image, this.picture});
 }
 
 List<Planet> planets = [
@@ -20,6 +21,7 @@ List<Planet> planets = [
     gravity: "3.711 m/s ",
     description: "Lorem ipsum...",
     image: "assets/img/mars.png",
+    picture: "https://www.nasa.gov/sites/default/files/thumbnails/image/pia21723-16.jpg"
   ),
   const Planet(
     id: "2",
@@ -29,6 +31,7 @@ List<Planet> planets = [
     gravity: "3.711 m/s ",
     description: "Lorem ipsum...",
     image: "assets/img/neptune.png",
+    picture: "https://www.nasa.gov/sites/default/files/styles/full_width_feature/public/images/110411main_Voyager2_280_yshires.jpg"
   ),
   const Planet(
     id: "3",
@@ -38,6 +41,7 @@ List<Planet> planets = [
     gravity: "3.711 m/s ",
     description: "Lorem ipsum...",
     image: "assets/img/moon.png",
+    picture: "https://farm5.staticflickr.com/4086/5052125139_43c31b7012.jpg"
   ),
   const Planet(
     id: "4",
@@ -47,6 +51,7 @@ List<Planet> planets = [
     gravity: "3.711 m/s ",
     description: "Lorem ipsum...",
     image: "assets/img/earth.png",
+    picture: "https://www.nasa.gov/sites/default/files/styles/full_width_feature/public/thumbnails/image/iss042e340851_1.jpg"
   ),
   const Planet(
     id: "5",
@@ -56,5 +61,6 @@ List<Planet> planets = [
     gravity: "3.711 m/s ",
     description: "Lorem ipsum...",
     image: "assets/img/mercury.png",
+    picture: "https://c1.staticflickr.com/9/8105/8497927473_2845ae671e_b.jpg"
   ),
 ];

lib/ui/detail/detail_page.dart

@@ -1,6 +1,5 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_planets_tutorial/model/planets.dart';
-import 'package:flutter_planets_tutorial/ui/text_style.dart';
 
 
 class DetailPage extends StatelessWidget {
@@ -11,22 +10,33 @@ class DetailPage extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    print(planet.picture);
     return new Scaffold(
       body: new Container(
-        color: const Color(0xFF736AB7),
         constraints: new BoxConstraints.expand(),
-        child: new Column(
-          mainAxisAlignment: MainAxisAlignment.center,
+        color: new Color(0xFF736AB7),
+        child: new Stack (
           children: <Widget>[
-            new Text(
-              planet.name,
-              style: Style.headerTextStyle,
+            new Container(
+              child: new Image.network(planet.picture,
+                fit: BoxFit.cover,
+                height: 300.0,
+              ),
+              constraints: new BoxConstraints.expand(height: 295.0),
             ),
-            new Hero(tag: "planet-hero-${planet.id}",
-              child: new Image.asset(
-                  planet.image,
-                  width: 96.0,
-                  height: 96.0,
+            new Container(
+              margin: new EdgeInsets.only(top: 190.0),
+              height: 110.0,
+              decoration: new BoxDecoration(
+                gradient: new LinearGradient(
+                  colors: <Color>[
+                    new Color(0x00736AB7),
+                    new Color(0xFF736AB7)
+                  ],
+                  stops: [0.0, 0.9],
+                  begin: const FractionalOffset(0.0, 0.0),
+                  end: const FractionalOffset(0.0, 1.0),
+                ),
               ),
             )
           ],