create widget discover movies

lib/main.dart

@@ -38,11 +38,12 @@ class App extends StatelessWidget {
         ),
       ],
       child: MaterialApp(
-        title: 'Flutter Demo',
+        title: 'Movie DB',
         theme: ThemeData(
           primarySwatch: Colors.blue,
         ),
         home: const MoviePage(),
+        debugShowCheckedModeBanner: false,
       ),
     );
   }

lib/movie/pages/movie_page.dart

@@ -1,46 +1,224 @@
+import 'package:carousel_slider/carousel_slider.dart';
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
+import 'package:yt_flutter_movie_db/movie/models/movie_model.dart';
 import 'package:yt_flutter_movie_db/movie/providers/movie_get_discover_provider.dart';
+import 'package:yt_flutter_movie_db/widget/image_widget.dart';
 
 class MoviePage extends StatelessWidget {
   const MoviePage({super.key});
 
   @override
   Widget build(BuildContext context) {
+    return Scaffold(
+      body: CustomScrollView(
+        slivers: [
+          SliverAppBar(
+            title: Row(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                Padding(
+                  padding: const EdgeInsets.all(8.0),
+                  child: CircleAvatar(
+                    backgroundColor: Colors.transparent,
+                    child: Image.asset(
+                      'assets/images/logo.png',
+                    ),
+                  ),
+                ),
+                const Text('Movie DB'),
+              ],
+            ),
+            centerTitle: true,
+            backgroundColor: Colors.white,
+            foregroundColor: Colors.black,
+          ),
+          SliverToBoxAdapter(
+            child: Padding(
+              padding: const EdgeInsets.all(16.0),
+              child: Row(
+                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                children: [
+                  const Text(
+                    'Discover Movies',
+                    style: TextStyle(
+                      fontWeight: FontWeight.bold,
+                      fontSize: 18.0,
+                    ),
+                  ),
+                  OutlinedButton(
+                    onPressed: () {},
+                    style: OutlinedButton.styleFrom(
+                      foregroundColor: Colors.black,
+                      shape: const StadiumBorder(),
+                      side: const BorderSide(
+                        color: Colors.black54,
+                      ),
+                    ),
+                    child: const Text('See All'),
+                  )
+                ],
+              ),
+            ),
+          ),
+          const WidgetDiscoverMovie(),
+        ],
+      ),
+    );
+  }
+}
+
+class WidgetDiscoverMovie extends StatefulWidget {
+  const WidgetDiscoverMovie({super.key});
+
+  @override
+  State<WidgetDiscoverMovie> createState() => _WidgetDiscoverMovieState();
+}
+
+class _WidgetDiscoverMovieState extends State<WidgetDiscoverMovie> {
+  @override
+  void initState() {
     WidgetsBinding.instance.addPostFrameCallback((_) {
       context.read<MovieGetDiscoverProvider>().getDicover(context);
     });
+    super.initState();
+  }
 
-    return Scaffold(
-      appBar: AppBar(
-        title: const Text('Movie DB'),
-      ),
-      body: Consumer<MovieGetDiscoverProvider>(
+  @override
+  Widget build(BuildContext context) {
+    return SliverToBoxAdapter(
+      child: Consumer<MovieGetDiscoverProvider>(
         builder: (_, provider, __) {
           if (provider.isLoading) {
-            return const Center(
-              child: CircularProgressIndicator(),
+            return Container(
+              margin: const EdgeInsets.symmetric(horizontal: 16.0),
+              height: 300.0,
+              width: double.infinity,
+              decoration: BoxDecoration(
+                color: Colors.black26,
+                borderRadius: BorderRadius.circular(12),
+              ),
             );
           }
 
           if (provider.movies.isNotEmpty) {
-            return ListView.builder(
-              itemBuilder: (context, index) {
+            return CarouselSlider.builder(
+              itemCount: provider.movies.length,
+              itemBuilder: (_, index, __) {
                 final movie = provider.movies[index];
-
-                return ListTile(
-                  title: Text(movie.title),
-                  subtitle: Text(movie.overview),
-                );
+                return ItemMovie(movie);
               },
+              options: CarouselOptions(
+                height: 300.0,
+                viewportFraction: 0.8,
+                reverse: false,
+                autoPlay: true,
+                autoPlayCurve: Curves.fastOutSlowIn,
+                enlargeCenterPage: true,
+                scrollDirection: Axis.horizontal,
+              ),
             );
           }
 
-          return const Center(
-            child: Text('Not Found Discover Movies'),
+          return Container(
+            margin: const EdgeInsets.symmetric(horizontal: 16.0),
+            height: 300.0,
+            width: double.infinity,
+            decoration: BoxDecoration(
+              color: Colors.black26,
+              borderRadius: BorderRadius.circular(12),
+            ),
+            child: const Center(
+              child: Text(
+                'Not found discover movies',
+                style: TextStyle(
+                  color: Colors.black45,
+                ),
+              ),
+            ),
           );
         },
       ),
     );
   }
 }
+
+class ItemMovie extends Container {
+  final MovieModel movie;
+
+  ItemMovie(this.movie, {super.key});
+
+  @override
+  Clip get clipBehavior => Clip.hardEdge;
+
+  @override
+  Decoration? get decoration => BoxDecoration(
+        borderRadius: BorderRadius.circular(12),
+      );
+
+  @override
+  Widget? get child => Stack(
+        children: [
+          ImageNetworkWidget(
+            imageSrc: '${movie.backdropPath}',
+            height: 300.0,
+            width: double.infinity,
+          ),
+          Container(
+            height: 300.0,
+            width: double.infinity,
+            decoration: const BoxDecoration(
+              gradient: LinearGradient(
+                begin: Alignment.topCenter,
+                end: Alignment.bottomCenter,
+                colors: [
+                  Colors.transparent,
+                  Colors.black87,
+                ],
+              ),
+            ),
+          ),
+          Positioned(
+            bottom: 16.0,
+            left: 16.0,
+            right: 16.0,
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                ImageNetworkWidget(
+                  imageSrc: '${movie.posterPath}',
+                  height: 160,
+                  width: 100,
+                  radius: 12,
+                ),
+                const SizedBox(height: 8),
+                Text(
+                  movie.title,
+                  style: const TextStyle(
+                    fontSize: 16.0,
+                    color: Colors.white,
+                    fontWeight: FontWeight.bold,
+                  ),
+                ),
+                const SizedBox(height: 8),
+                Row(
+                  children: [
+                    const Icon(
+                      Icons.star_rounded,
+                      color: Colors.amber,
+                    ),
+                    Text(
+                      '${movie.voteAverage} (${movie.voteCount})',
+                      style: const TextStyle(
+                        fontSize: 16.0,
+                        color: Colors.white,
+                      ),
+                    ),
+                  ],
+                ),
+              ],
+            ),
+          ),
+        ],
+      );
+}

lib/widget/image_widget.dart

@@ -0,0 +1,39 @@
+import 'package:flutter/material.dart';
+import 'package:yt_flutter_movie_db/app_constants.dart';
+
+class ImageNetworkWidget extends StatelessWidget {
+  const ImageNetworkWidget({
+    super.key,
+    required this.imageSrc,
+    required this.height,
+    required this.width,
+    this.radius = 0.0,
+  });
+
+  final String imageSrc;
+  final double height;
+  final double width;
+  final double radius;
+
+  @override
+  Widget build(BuildContext context) {
+    return ClipRRect(
+      borderRadius: BorderRadius.circular(radius),
+      child: Image.network(
+        '${AppConstants.imageUrlW500}$imageSrc',
+        height: height,
+        width: width,
+        fit: BoxFit.cover,
+        errorBuilder: (_, __, ___) {
+          return SizedBox(
+            height: height,
+            width: width,
+            child: const Icon(
+              Icons.broken_image_rounded,
+            ),
+          );
+        },
+      ),
+    );
+  }
+}

pubspec.lock

@@ -29,6 +29,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "2.1.0"
+  carousel_slider:
+    dependency: "direct main"
+    description:
+      name: carousel_slider
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "4.1.1"
   characters:
     dependency: transitive
     description:

pubspec.yaml

@@ -17,6 +17,7 @@ dependencies:
   dio: ^4.0.6
   provider: ^6.0.4
   dartz: ^0.10.1
+  carousel_slider: ^4.1.1
 
 dev_dependencies:
   flutter_test:
@@ -27,9 +28,8 @@ dev_dependencies:
 flutter:
   uses-material-design: true
 
-  # assets:
-  #   - images/a_dot_burr.jpeg
-  #   - images/a_dot_ham.jpeg
+  assets:
+    - assets/images/
 
   # fonts:
   #   - family: Schyler