[Solved] Problem with passing information/data from one screen to another screen from List

Question

Asked by ArQczeg14 on November 25, 2021 (source).

I made a List with information of movies.

class Movie {
  String imgUrl;
  String title;
  String categories;
  int year;
  String country;
  int length;
  String description;
  List<String> screenshots;

  Movie({
    required this.imgUrl,
    required this.title,
    required this.categories,
    required this.year,
    required this.country,
    required this.length,
    required this.description,
    required this.screenshots,
  });
}

final List<Movie> movies = [
  Movie(
      imgUrl:
          'https://static.posters.cz/image/1300/plakaty/james-bond-no-time-to-die-profile-i114389.jpg',
      title: 'No time to die',
      categories: 'Adventure',
      year: 2021,
      country: 'USA/England',
      length: 183,
      description:
          'James Bond has left active service. His peace is short-lived when Felix Leiter, an old friend from the CIA, turns up asking for help, leading Bond onto the trail of a mysterious villain armed with dangerous new technology.',
      screenshots: [
        'https://i.pinimg.com/originals/fd/5e/1d/fd5e1d8878c402aaba2fb6373e880b1f.webp',
        'https://cdn.mos.cms.futurecdn.net/dNmCDjJT5G76aDKiYphTkF.jpg',
        'https://i.imgur.com/Zm9X4lT.jpg',
        'https://images.complex.com/complex/images/c_fill,f_auto,g_center,w_1200/fl_lossy,pg_1/knie3z7uwe3inyua5kft/no-time-to-die-04'
      ]),
  Movie(
      imgUrl:
          'https://i.pinimg.com/originals/4b/5d/90/4b5d903464d54b247674d2f75c126cb4.jpg',
      title: 'Moana',
      categories: 'Family, Kids',
      year: 2016,
      country: 'USA',
      length: 103,
      description:
          'On the Polynesian island of Motunui, the inhabitants worship the goddess Te Fiti, who brought life to the ocean, using a stone as her heart and the source of her power. Maui, the shape-shifting demigod and master of sailing, steals the heart to give humanity the power of creation. However, Te Fiti disintegrates, and Maui is attacked by Te Ka, a volcanic demon, losing both his magical giant fishhook and the heart to the depths. A millennium later, Moana, daughter of Motunui\'s chief Tui, is chosen by the ocean to return the heart to Te Fiti. However, Tui arrives and takes Moana away, causing her to lose the heart. Tui and Moana\'s mother, Sina, try to keep her away from the ocean to prepare her for ascension as the island\'s chief.',
      screenshots: [
        'https://i0.wp.com/www.nerdsandbeyond.com/wp-content/uploads/2016/10/Screen-Shot-2016-10-17-at-2.14.24-PM.png?fit=1576%2C622&ssl=1',
        'http://www.fortsandfairies.com/wp-content/uploads/2016/11/Moana-8.jpg',
        'https://ilarge.lisimg.com/image/14155381/1118full-moana-screenshot.jpg',
      ]),
]

Also I made a Carosuel with this images. When you tap those photos, I wanted to navigate to new screen (details of movies).

class MainHome extends StatefulWidget {
  @override
  _MainHomeState createState() => _MainHomeState();
}

class _MainHomeState extends State<MainHome> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Navbar(),
          Container(
            width: MediaQuery.of(context).size.width - 60,
            child: ListView(
              children: <Widget>[
                SizedBox(
                  height: 50,
                ),
                HeadMenu(),
                SizedBox(
                  height: 20,
                ),
                GestureDetector(
                  onTap: () => Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (_) => MovieScreen(),
                    ),
                  ),
                  child: CarouselSlider(
                    items: movies
                        .map((e) => Container(
                              decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(10),
                                image: DecorationImage(
                                    image: NetworkImage(e.imgUrl),
                                    fit: BoxFit.fitHeight),
                              ),
                            ))
                        .toList(),
                    options: CarouselOptions(
                      height: 450,
                      viewportFraction: 0.65,
                      autoPlay: true,
                      autoPlayInterval: Duration(seconds: 3),
                      autoPlayAnimationDuration: Duration(milliseconds: 800),
                      autoPlayCurve: Curves.fastOutSlowIn,
                      enlargeCenterPage: true,
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

And now I'm stuck with this problem. How I can get information from List I made above? I want to make something like, I tap one movie and I want to get this image/information to another screen. How I can pass information through these screens?

There ia code from second screen:

class MovieScreen extends StatefulWidget {
  @override
  _MovieScreenState createState() => _MovieScreenState();
}

class _MovieScreenState extends State<MovieScreen> {
  final String photo =   'https://images.complex.com/complex/images/c_fill,f_auto,g_center,w_1200/fl_lossy,pg_1/knie3z7uwe3inyua5kft/no-time-to-die-04';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: ListView(
        children: [
          Stack(
            children: [
              Container(
                transform: Matrix4.translationValues(0, -50, 0),
                width: double.infinity,
                child: Hero(
                  tag: photo,
                  child: ClipShadowPath(
                    clipper: CircularClipper(),
                    shadow: Shadow(blurRadius: 20),
                    child: Image(
                      height: 400,
                      image: NetworkImage(photo),
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  IconButton(
                    padding: EdgeInsets.only(left: 20),
                    onPressed: () => Navigator.pop(context),
                    icon: Icon(Icons.arrow_back),
                    iconSize: 30,
                  ),
                  IconButton(
                    padding: EdgeInsets.only(right: 20),
                    onPressed: () => Navigator.pop(context),
                    icon: Icon(Icons.favorite_outline),
                    iconSize: 30,
                    color: Colors.red,
                  ),
                ],
              ),
            ],

      ),
    );
  }
}

Now I made displaying image for one Image from network link but I want to make it dynamic. Thanks for help.

Answer

Question answered by Oussama B (source).

class MovieScreen extends StatefulWidget {
  //add these two lines
  final String photo;
  // required this.photo  is called a named parameter and you can add as many as you want
  const MovieScreen({Key? key, required this.photo}) : super(key: key);
  @override
  _MovieScreenState createState() => _MovieScreenState();
}

now you can access the photo variable with widget.photo

example:

Image(
    height: 400,
    image: NetworkImage(widget.photo),
    fit: BoxFit.cover,
  ),

now all what is left is to pass the argument to your class like this //Note you should change your gestore detector where it is inside the carousel like this

CarouselSlider(
                items: movies
                    .map((e) => GestureDetector(
              onTap: () => Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (_) => MovieScreen(),
                ),
              ),
              child: Container(
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(10),
                            image: DecorationImage(
                                image: NetworkImage(e.imgUrl),
                                fit: BoxFit.fitHeight),
                          ),
                        )))
                    .toList(),
                options: CarouselOptions(
                  height: 450,
                  viewportFraction: 0.65,
                  autoPlay: true,
                  autoPlayInterval: Duration(seconds: 3),
                  autoPlayAnimationDuration: Duration(milliseconds: 800),
                  autoPlayCurve: Curves.fastOutSlowIn,
                  enlargeCenterPage: true,
                ),
              ),
            

I encourage you to read This for more details and a better understanding.

Good Luck.

DART FLUTTER LIST NAVIGATION
SHARE: