refact(Widgets): Center genre chips in movie container

Signed-off-by: arafaysaleem <a.rafaysaleem@gmail.com>
arafaysaleem · Jun 10, 2021 · adf1376 · adf1376
1 parent 8411dbe
commit adf1376
Show file tree

Hide file tree

Showing 4 changed files with 124 additions and 113 deletions.
diff --git a/lib/views/widgets/common/custom_chips_list.dart b/lib/views/widgets/common/custom_chips_list.dart
@@ -31,31 +31,34 @@ class CustomChipsList extends StatelessWidget {
   Widget build(BuildContext context) {
     return SizedBox(
       height: chipHeight,
-      child: ListView.separated(
-        physics: physics,
-        scrollDirection: Axis.horizontal,
-        itemCount: chipContents.length,
-        separatorBuilder: (ctx, i) => SizedBox(width: chipGap),
-        itemBuilder: (ctx, i) => Container(
-          width: chipWidth,
-          padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 3),
-          decoration: BoxDecoration(
-            color: backgroundColor,
-            borderRadius: const BorderRadius.all(Radius.circular(20)),
-            border: Border.all(color: borderColor, width: borderWidth),
-          ),
-          child: Center(
-            child: Text(
-              chipContents[i],
-              style: TextStyle(
-                color: contentColor,
-                fontSize: fontSize,
-                height: 1,
-                fontWeight: fontWeight
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          for(var i = 0; i < chipContents.length; i++)
+            Padding(
+              padding: EdgeInsets.only(left: i == 0 ? 0 : chipGap),
+              child: Container(
+                width: chipWidth,
+                padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 3),
+                decoration: BoxDecoration(
+                  color: backgroundColor,
+                  borderRadius: const BorderRadius.all(Radius.circular(20)),
+                  border: Border.all(color: borderColor, width: borderWidth),
+                ),
+                child: Center(
+                  child: Text(
+                    chipContents[i],
+                    style: TextStyle(
+                        color: contentColor,
+                        fontSize: fontSize,
+                        height: 1,
+                        fontWeight: fontWeight
+                    ),
+                  ),
+                ),
               ),
-            ),
-          ),
-        ),
+            )
+        ],
       ),
     );
   }

diff --git a/lib/views/widgets/movie_details/movie_details_column.dart b/lib/views/widgets/movie_details/movie_details_column.dart
@@ -34,13 +34,10 @@ class MovieDetailsColumn extends HookWidget {
         const SizedBox(height: 15),
 
         //Genres
-        SizedBox(
-          width: 210,
-          child: CustomChipsList(
-            chipHeight: 26,
-            chipGap: 9,
-            chipContents: movie.genreNames.sublist(0, 3),
-          ),
+        CustomChipsList(
+          chipHeight: 26,
+          chipGap: 9,
+          chipContents: movie.genreNames.sublist(0, 3),
         ),
 
         const SizedBox(height: 15),

diff --git a/lib/views/widgets/movies/movie_carousel.dart b/lib/views/widgets/movies/movie_carousel.dart
@@ -16,13 +16,8 @@ import '../../../providers/movies_provider.dart';
 //Router
 import '../../../routes/app_router.gr.dart';
 
-//Placeholders
-import '../../skeletons/movie_poster_placeholder.dart';
-
 //Widgets
-import '../common/custom_network_image.dart';
-import '../common/custom_text_button.dart';
-import 'movie_overview_column.dart';
+import 'white_movie_container.dart';
 
 class MoviesCarousel extends StatefulHookWidget {
   final PageController backgroundImageController;
@@ -51,7 +46,7 @@ class __MoviesCarouselState extends State<MoviesCarousel> {
       carouselController: CarouselController(),
       options: getCarouselOptions(),
       itemCount: movies.length,
-      itemBuilder: (ctx, i, _) => _MovieContainer(
+      itemBuilder: (ctx, i, _) => WhiteMovieContainer(
         isCurrent: _currentIndex == i,
         movie: movies[i],
         onViewDetails: () {
@@ -89,78 +84,3 @@ class __MoviesCarouselState extends State<MoviesCarousel> {
     );
   }
 }
-
-class _MovieContainer extends HookWidget {
-  const _MovieContainer({
-    Key? key,
-    required this.isCurrent,
-    required this.movie,
-    required this.onViewDetails,
-  }) : super(key: key);
-
-  final MovieModel movie;
-  final bool isCurrent;
-  final VoidCallback onViewDetails;
-
-  @override
-  Widget build(BuildContext context) {
-    return AnimatedContainer(
-      duration: Constants.defaultAnimationDuration,
-      curve: Curves.fastOutSlowIn,
-      decoration: BoxDecoration(
-        color: isCurrent ? Colors.white : Colors.white54,
-        borderRadius: const BorderRadius.only(
-          topLeft: Radius.circular(30),
-          topRight: Radius.circular(30),
-        ),
-      ),
-      margin: const EdgeInsets.symmetric(horizontal: 10),
-      padding: const EdgeInsets.fromLTRB(20, 20, 20, Constants.bottomInsetsLow),
-      child: LayoutBuilder(
-        builder: (ctx, constraints) => Column(
-          children: [
-            //Poster image
-            CustomNetworkImage(
-              imageUrl: movie.posterUrl,
-              height: constraints.minHeight * 0.58,
-              fit: BoxFit.fill,
-              onTap: onViewDetails,
-              placeholder: MoviePosterPlaceholder(
-                height: constraints.minHeight * 0.58,
-              ),
-              errorWidget: MoviePosterPlaceholder(
-                height: constraints.minHeight * 0.58,
-              ),
-            ),
-
-            const SizedBox(height: 10),
-
-            //Movie details and button
-            if (isCurrent) ...[
-              MovieOverviewColumn(movie: movie),
-
-              const Spacer(),
-
-              //View Details Button
-              CustomTextButton(
-                color: Constants.scaffoldColor,
-                child: const Center(
-                  child: Text(
-                    "VIEW DETAILS",
-                    style: TextStyle(
-                      color: Colors.white,
-                      fontSize: 15,
-                      letterSpacing: 0.7,
-                      fontWeight: FontWeight.w600,
-                    ),
-                  ),
-                ),
-                onPressed: onViewDetails,
-              ),
-            ]
-          ],
-        ),
-      ),
-    );
-  }
-}
diff --git a/lib/views/widgets/movies/white_movie_container.dart b/lib/views/widgets/movies/white_movie_container.dart
@@ -0,0 +1,91 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+
+//Helper
+import '../../../helper/utils/constants.dart';
+
+//Models
+import '../../../models/movie_model.dart';
+
+//Placeholders
+import '../../skeletons/movie_poster_placeholder.dart';
+
+//Widgets
+import '../common/custom_network_image.dart';
+import '../common/custom_text_button.dart';
+import 'movie_overview_column.dart';
+
+class WhiteMovieContainer extends HookWidget {
+  const WhiteMovieContainer({
+    Key? key,
+    required this.isCurrent,
+    required this.movie,
+    required this.onViewDetails,
+  }) : super(key: key);
+
+  final MovieModel movie;
+  final bool isCurrent;
+  final VoidCallback onViewDetails;
+
+  @override
+  Widget build(BuildContext context) {
+    return AnimatedContainer(
+      duration: Constants.defaultAnimationDuration,
+      curve: Curves.fastOutSlowIn,
+      decoration: BoxDecoration(
+        color: isCurrent ? Colors.white : Colors.white54,
+        borderRadius: const BorderRadius.only(
+          topLeft: Radius.circular(30),
+          topRight: Radius.circular(30),
+        ),
+      ),
+      margin: const EdgeInsets.symmetric(horizontal: 10),
+      padding: const EdgeInsets.fromLTRB(20, 20, 20, Constants.bottomInsetsLow),
+      child: LayoutBuilder(
+        builder: (ctx, constraints) => Column(
+          children: [
+            //Poster image
+            CustomNetworkImage(
+              imageUrl: movie.posterUrl,
+              height: constraints.minHeight * 0.58,
+              fit: BoxFit.fill,
+              onTap: onViewDetails,
+              placeholder: MoviePosterPlaceholder(
+                height: constraints.minHeight * 0.58,
+              ),
+              errorWidget: MoviePosterPlaceholder(
+                height: constraints.minHeight * 0.58,
+              ),
+            ),
+
+            const SizedBox(height: 10),
+
+            //Movie details and button
+            if (isCurrent) ...[
+              MovieOverviewColumn(movie: movie),
+
+              const Spacer(),
+
+              //View Details Button
+              CustomTextButton(
+                color: Constants.scaffoldColor,
+                child: const Center(
+                  child: Text(
+                    "VIEW DETAILS",
+                    style: TextStyle(
+                      color: Colors.white,
+                      fontSize: 15,
+                      letterSpacing: 0.7,
+                      fontWeight: FontWeight.w600,
+                    ),
+                  ),
+                ),
+                onPressed: onViewDetails,
+              ),
+            ]
+          ],
+        ),
+      ),
+    );
+  }
+}