type: feat

- implement similar movies section
- refactor, extract widgets into new modules

lib/main.dart → lib/app.dart

@@ -1,14 +1,14 @@
 import 'package:flutter/material.dart';
 import 'package:movies_flutter/widgets/home_page.dart';
 
-void main() => runApp(new MyApp());
+void main() => runApp(new CinematicApp());
 
-class MyApp extends StatelessWidget {
+class CinematicApp extends StatelessWidget {
   // This widget is the root of your application.
   @override
   Widget build(BuildContext context) {
     return new MaterialApp(
-      title: 'Flutter Demo',
+      title: 'Cinematic',
       theme: new ThemeData(
         primarySwatch: Colors.blueGrey,
       ),

lib/model/movie.dart

@@ -10,8 +10,10 @@ class Movie {
   List<int> genreIds;
 
   static final String imageUrl = "https://image.tmdb.org/t/p/w500/";
+  static final String imageUrlMedium = "https://image.tmdb.org/t/p/w300/";
 
   String getBackDropUrl() => imageUrl + backdropPath;
+  String getPosterUrl() => imageUrlMedium + posterPath;
 
   int getReleaseYear() =>
       DateTime

lib/util/api_client.dart

@@ -38,6 +38,16 @@ class ApiClient {
         .then((data) => data.map((item) => new Movie.fromJson(item)).toList());
   }
 
+  Future<List<Movie>> getSimilarMovies(int movieId) async {
+    var url = new Uri.https(baseUrl, '3/movie/$movieId/similar', {
+      'api_key': API_KEY,
+    });
+
+    return _getJson(url)
+        .then((json) => json['results'])
+        .then((data) => data.map((item) => new Movie.fromJson(item)).toList());
+  }
+
   Future<List<Actor>> getMovieCredits(int movieId) async {
     var url = new Uri.https(baseUrl, '3/movie/$movieId/credits', {
       'api_key': API_KEY

lib/util/navigator.dart

@@ -0,0 +1,17 @@
+import 'package:flutter/material.dart';
+import 'package:movies_flutter/model/movie.dart';
+import 'package:movies_flutter/widgets/movie_detail/movie_detail.dart';
+
+
+goToMovieDetails(BuildContext context, Movie movie) {
+  Navigator.of(context).push(
+    new PageRouteBuilder(
+        transitionsBuilder: (context, animation, secondaryAnimation,
+            child) =>
+        new FadeTransition(opacity: animation, child: child),
+        pageBuilder: (BuildContext context, Animation animation,
+            Animation secondaryAnimation) {
+          return new MovieDetailWidget(movie);
+        }),
+  );
+}

lib/widgets/home_page.dart

@@ -1,5 +1,5 @@
 import 'package:flutter/material.dart';
-import 'package:movies_flutter/widgets/movie_list.dart';
+import 'package:movies_flutter/widgets/movie_list/movie_list.dart';
 
 
 class HomePage extends StatefulWidget {

lib/widgets/cast_card.dart → lib/widgets/movie_detail/cast_card.dart

@@ -1,7 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:movies_flutter/model/cast.dart';
 import 'package:movies_flutter/util/styles.dart';
-import 'package:movies_flutter/widgets/bottom_gradient.dart';
+import 'package:movies_flutter/widgets/utilviews/bottom_gradient.dart';
 
 
 class CastCard extends StatelessWidget {

lib/widgets/movie_detail/cast_section.dart

@@ -0,0 +1,34 @@
+import 'package:flutter/material.dart';
+import 'package:movies_flutter/model/cast.dart';
+import 'package:movies_flutter/widgets/movie_detail/cast_card.dart';
+
+class CastSection extends StatelessWidget {
+
+  final List<Actor> _cast;
+
+  CastSection(this._cast);
+
+  @override
+  Widget build(BuildContext context) {
+    return new Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: <Widget>[
+        new Text("Cast", style: new TextStyle(color: Colors.white),),
+        new Container(height: 8.0,),
+        new Container(
+          height: 140.0,
+          child: new ListView(
+            scrollDirection: Axis.horizontal,
+            children: _cast.map((Actor actor) =>
+            new Padding(
+              padding: const EdgeInsets.only(right: 8.0),
+              child: new CastCard(actor),
+            )
+            ).toList(),
+          ),
+        )
+      ],
+    );
+  }
+
+}

lib/widgets/meta_section.dart → lib/widgets/movie_detail/meta_section.dart

@@ -10,7 +10,10 @@ class MetaSection extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return new Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
       children: <Widget>[
+        new Text("About", style: new TextStyle(color: Colors.white),),
+        new Container(height: 8.0,),
         _getMetaInfoSection('Original Title', data['original_title']),
         _getMetaInfoSection('Status', data['status']),
         _getMetaInfoSection('Runtime', formatRuntime(data['runtime'])),

lib/widgets/movie_detail.dart → lib/widgets/movie_detail/movie_detail.dart

@@ -3,10 +3,11 @@ import 'package:movies_flutter/model/cast.dart';
 import 'package:movies_flutter/model/movie.dart';
 import 'package:movies_flutter/util/api_client.dart';
 import 'package:movies_flutter/util/styles.dart';
-import 'package:movies_flutter/widgets/bottom_gradient.dart';
-import 'package:movies_flutter/widgets/cast_card.dart';
-import 'package:movies_flutter/widgets/meta_section.dart';
-import 'package:movies_flutter/widgets/text_bubble.dart';
+import 'package:movies_flutter/widgets/utilviews/bottom_gradient.dart';
+import 'package:movies_flutter/widgets/movie_detail/cast_section.dart';
+import 'package:movies_flutter/widgets/movie_detail/meta_section.dart';
+import 'package:movies_flutter/widgets/movie_detail/similar_section.dart';
+import 'package:movies_flutter/widgets/utilviews/text_bubble.dart';
 
 
 class MovieDetailWidget extends StatelessWidget {
@@ -138,41 +139,22 @@ class MovieDetailWidget extends StatelessWidget {
                   },
                 ),
               ),
+            ),
+            new Container(
+              decoration: new BoxDecoration(color: primary),
+              child: new FutureBuilder(
+                future: _apiClient.getSimilarMovies(movie.id),
+                builder: (BuildContext context,
+                    AsyncSnapshot<List<Movie>> snapshot) {
+                  return snapshot.hasData
+                      ? new SimilarSection(snapshot.data)
+                      : new Center(child: new CircularProgressIndicator());
+                },
+              ),
             )
           ]
       ),
     );
   }
 
 }
-
-class CastSection extends StatelessWidget {
-
-  final List<Actor> _cast;
-
-  CastSection(this._cast);
-
-  @override
-  Widget build(BuildContext context) {
-    return new Column(
-      crossAxisAlignment: CrossAxisAlignment.start,
-      children: <Widget>[
-        new Text("Cast", style: new TextStyle(color: Colors.white),),
-        new Container(height: 8.0,),
-        new Container(
-          height: 140.0,
-          child: new ListView(
-            scrollDirection: Axis.horizontal,
-            children: _cast.map((Actor actor) =>
-            new Padding(
-              padding: const EdgeInsets.only(right: 8.0),
-              child: new CastCard(actor),
-            )
-            ).toList(),
-          ),
-        )
-      ],
-    );
-  }
-
-}

lib/widgets/movie_detail/similar_section.dart

@@ -0,0 +1,42 @@
+import 'package:flutter/material.dart';
+import 'package:movies_flutter/model/movie.dart';
+import 'package:movies_flutter/util/navigator.dart';
+
+
+class SimilarSection extends StatelessWidget {
+  final List<Movie> _similarMovies;
+
+  SimilarSection(this._similarMovies);
+
+  @override
+  Widget build(BuildContext context) {
+    return new Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: <Widget>[
+        new Padding(
+          padding: const EdgeInsets.all(16.0),
+          child: new Text(
+            "Similar", style: new TextStyle(color: Colors.white),),
+        ),
+        new Container(
+          height: 300.0,
+          child: new GridView.count(
+            crossAxisCount: 2,
+            childAspectRatio: 1.5,
+            scrollDirection: Axis.horizontal,
+            children: _similarMovies.map((Movie movie) =>
+            new GestureDetector(
+              onTap: () => goToMovieDetails(context, movie),
+              child: new FadeInImage.assetNetwork(
+                image: movie.getPosterUrl(),
+                placeholder: 'assets/placeholder.jpg',
+                height: 150.0,
+                fit: BoxFit.cover,),
+            )
+            ).toList(),
+          ),
+        )
+      ],
+    );
+  }
+}

lib/widgets/movie_list.dart → lib/widgets/movie_list/movie_list.dart

@@ -2,7 +2,7 @@ import 'package:async_loader/async_loader.dart';
 import 'package:flutter/material.dart';
 import 'package:movies_flutter/model/movie.dart';
 import 'package:movies_flutter/util/api_client.dart';
-import 'package:movies_flutter/widgets/movie_list_item.dart';
+import 'package:movies_flutter/widgets/movie_list/movie_list_item.dart';
 
 
 class MovieList extends StatefulWidget {

lib/widgets/movie_list_item.dart → lib/widgets/movie_list/movie_list_item.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:movies_flutter/model/movie.dart';
+import 'package:movies_flutter/util/navigator.dart';
 import 'package:movies_flutter/util/styles.dart';
 import 'package:movies_flutter/util/utils.dart';
 import 'package:movies_flutter/widgets/movie_detail.dart';
@@ -69,16 +70,7 @@ class MovieListItem extends StatelessWidget {
   Widget build(BuildContext context) {
     return new GestureDetector(
       onTap: () {
-        Navigator.of(context).push(
-          new PageRouteBuilder(
-              transitionsBuilder: (context, animation, secondaryAnimation,
-                  child) =>
-              new FadeTransition(opacity: animation, child: child),
-              pageBuilder: (BuildContext context, Animation animation,
-                  Animation secondaryAnimation) {
-                return new MovieDetailWidget(movie);
-              }),
-        );
+        goToMovieDetails(context, movie);
       },
       child: new Card(
         child: new Column(

test/widget_test.dart

@@ -7,12 +7,12 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_test/flutter_test.dart';
 
-import 'package:movies_flutter/main.dart';
+import 'package:movies_flutter/app.dart';
 
 void main() {
   testWidgets('Counter increments smoke test', (WidgetTester tester) async {
     // Build our app and trigger a frame.
-    await tester.pumpWidget(new MyApp());
+    await tester.pumpWidget(new CinematicApp());
 
     // Verify that our counter starts at 0.
     expect(find.text('0'), findsOneWidget);