UI

1. map and toList()

pubspec.yaml

  cupertino_icons: ^1.0.6
  carousel_slider: ^4.2.1
  animate_do: ^3.3.4

main.dart

                         import 'package:flutter/material.dart';
import 'package:b/movie.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return  const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MovieDisplay(),
    );
  }
}

movie.dart

import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
import 'package:b/Model/model.dart';

class MovieDisplay extends StatefulWidget {
  const MovieDisplay({super.key});

  @override
  State<MovieDisplay> createState() => _MovieDisplayState();
}

int current = 0;

class _MovieDisplayState extends State<MovieDisplay> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SizedBox(
        height: MediaQuery.of(context).size.height,
        child: Stack(
          children: [
            // For background image
            Image.network(
              movies[current]['Image'],
              fit: BoxFit.cover,
            ),
            Positioned(
                top: 0,
                left: 0,
                right: 0,
                bottom: 0,
                child: Container(
                  height: MediaQuery.of(context).size.height * 0.33,
                  decoration: BoxDecoration(
                      gradient: LinearGradient(
                          begin: Alignment.bottomCenter,
                          end: Alignment.topCenter,
                          colors: [
                            Colors.grey.shade50.withOpacity(1),
                            Colors.grey.shade50.withOpacity(1),
                            Colors.grey.shade50.withOpacity(1),
                            Colors.grey.shade100.withOpacity(1),
                            Colors.grey.shade100.withOpacity(0.0),
                            Colors.grey.shade100.withOpacity(0.0),
                            Colors.grey.shade100.withOpacity(0.0),
                            Colors.grey.shade100.withOpacity(0.0),
                          ])),
                )),

            Positioned(
              bottom: 5,
              height: MediaQuery.of(context).size.height * 0.7,
              width: MediaQuery.of(context).size.width,
              child: CarouselSlider(
                options: CarouselOptions(
                  height: 550,
                  viewportFraction: 0.7,
                  enlargeCenterPage: true,
                  onPageChanged: (index, reason) {
                    setState(
                          () {
                        current = index;
                      },
                    );
                  },
                ),
                items: movies.map(
                      (movie) {
                    return Builder(
                      builder: (BuildContext context) {
                        return Padding(
                          padding: const EdgeInsets.all(8),
                          child: Container(
                            width: MediaQuery.of(context).size.width,
                            decoration: BoxDecoration(
                              color: Colors.white,
                              borderRadius: BorderRadius.circular(20),
                            ),
                            child: SingleChildScrollView(
                              child: Column(
                                children: [
                                  Container(
                                    height: 350,
                                    width: MediaQuery.of(context).size.width *
                                        0.55,
                                    margin: const EdgeInsets.only(top: 20),
                                    clipBehavior: Clip.hardEdge,
                                    decoration: BoxDecoration(
                                      borderRadius: BorderRadius.circular(20),
                                    ),
                                    child: Image.network(
                                      movie['Image'],
                                      fit: BoxFit.cover,
                                    ),
                                  ),
                                  const SizedBox(
                                    height: 20,
                                  ),
                                  // For movei title
                                  Text(
                                    movie['Title'],
                                    style: const TextStyle(
                                        fontSize: 20,
                                        fontWeight: FontWeight.bold),
                                  ),
                                  const SizedBox(
                                    height: 10,
                                  ),
                                  // for movei director
                                  Text(
                                    movie['Director'],
                                    style: const TextStyle(
                                      fontSize: 16,
                                      color: Colors.black45,
                                    ),
                                  ),
                                  const SizedBox(
                                    height: 20,
                                  ),
                                  AnimatedOpacity(
                                    duration: const Duration(milliseconds: 1000),
                                    // text is shown 1000 milliseconds later after scroll
                                    opacity: current == movies.indexOf(movie)
                                        ? 1.0
                                        : 0.0,
                                    child: Container(
                                      padding: const EdgeInsets.symmetric(
                                          horizontal: 18),
                                      child: Row(
                                        mainAxisAlignment:
                                        MainAxisAlignment.spaceBetween,
                                        children: [
                                          Row(
                                            children: [
                                              const Icon(
                                                Icons.star,
                                                color: Colors.amber,
                                                size: 20,
                                              ),
                                              const SizedBox(
                                                width: 5,
                                              ),
                                              Text(
                                                movie['rating'],
                                                style: const TextStyle(
                                                  fontSize: 15,
                                                  color: Colors.black45,
                                                ),
                                              ),
                                            ],
                                          ),
                                          Row(
                                            children: [
                                              const Icon(
                                                Icons.access_time,
                                                color: Colors.black45,
                                                size: 20,
                                              ),
                                              const SizedBox(
                                                width: 5,
                                              ),
                                              Text(
                                                movie['duration'],
                                                style: const TextStyle(
                                                  fontSize: 15,
                                                  color: Colors.black45,
                                                ),
                                              ),
                                            ],
                                          ),
                                          SizedBox(
                                            width: MediaQuery.of(context)
                                                .size
                                                .width *
                                                0.21,
                                            child: const Row(
                                              children: [
                                                Icon(
                                                  Icons.play_circle,
                                                  color: Colors.black,
                                                  size: 20,
                                                ),
                                                SizedBox(
                                                  width: 5,
                                                ),
                                                Text(
                                                  "Watch",
                                                  style: TextStyle(
                                                    fontSize: 15,
                                                    color: Colors.black45,
                                                  ),
                                                ),
                                              ],
                                            ),
                                          )
                                        ],
                                      ),
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ),
                        );
                      },
                    );
                  },
                ).toList(),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Model/model.dart

final movies = <dynamic>[
  {
    'Title': 'Joker',
    'Image':
    'https://www.tallengestore.com/cdn/shop/products/Joker_-_Put_On_A_Happy_Face_-_Joaquin_Phoenix_-_Hollywood_English_Movie_Poster_3_de5e4cfc-cfd4-4732-aad1-271d6bdb1587.jpg?v=1579504979',
    'Director': 'Direct byTodd Phillips',
    'rating': '5.0',
    'duration': "2h:42m",
  },
  {
    'Title': 'Pathan',
    'Image':'https://www.tallengestore.com/cdn/shop/products/Pathan-ShahRukhKhan-BollywoodHindiMoviePoster_d4846edc-20de-497e-ab2c-07a53e52e268.jpg?v=1675251724',
    'Director': ' Direct by Siddharth Anand',
    'rating': '5.0',
    'duration': "2h:10m",
  },
  {
    'Title': 'Big',
    'Image':'https://images.moviesanywhere.com/b0fa363f331f67556c771350ad0c3d42/688ee7ed-e823-4e4c-9b42-65aac0673d22.jpg',
    'Director': 'Direct by Penny Marshall',
    'rating': '4.6',
    'duration': "1h:45m",
  },
  {
    'Title': 'Joker',
    'Image':'https://www.tallengestore.com/cdn/shop/products/Joker_-_Put_On_A_Happy_Face_-_Joaquin_Phoenix_-_Hollywood_English_Movie_Poster_3_de5e4cfc-cfd4-4732-aad1-271d6bdb1587.jpg?v=1579504979'
    ,
    'Director': 'Direct byTodd Phillips',
    'rating': '5.0',
    'duration': "2h:42m",
  },
  {
    'Title': 'KEVIN & PERRY',
    'Image':'https://resizing.flixster.com/-XZAfHZM39UwaGJIFWKAE8fS0ak=/v3/t/assets/p25555_p_v10_aa.jpg'
    ,
    'Director': 'Direct by Ed Bye',
    'rating': '4.0',
    'duration': "1h:22m",
  }
];