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,622&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.
CodePudding user response：
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.
CodePudding user response：
**In mainhome screen**
**unwrap carouselSlider that you have done with GestureDetector.**
CarouselSlider(
items: movies.map((e) =>
GestureDetector(
onTap: () => Navigator.push(
context,
MaterialPageRoute(builder: (_) => MovieScreen(movieData:e),),),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
image: DecorationImage(
image: NetworkImage(e.imgUrl),
fit: BoxFit.fitHeight),
),
))
.toList(),),
...
),
**In Movie Screen, make a constructor of type Movie
that receives data from previous screen**
class MovieScreen extends StatefulWidget {
final Movie movieData;
const MovieScreen ({this.movieData});
@override
_MovieScreenState createState() => _MovieScreenState();
}
class _MovieScreenState extends State<MovieScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
**wherever you need data of movie ,use 'widget.movieData.<params you like to show>'**
....
);
}
}