Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 8b31c4e

Browse files
Add movies-page example
1 parent fcdee16 commit 8b31c4e

File tree

3 files changed

+193
-0
lines changed

3 files changed

+193
-0
lines changed

‎assets/screenshots/movies.png

770 KB
Loading[フレーム]

‎lib/pages/movies.dart

Lines changed: 191 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,191 @@
1+
import 'package:carousel_slider/carousel_slider.dart';
2+
import 'package:flutter/material.dart';
3+
4+
class MoviesPage extends StatefulWidget {
5+
const MoviesPage({ Key? key }) : super(key: key);
6+
7+
@override
8+
_MoviesPageState createState() => _MoviesPageState();
9+
}
10+
11+
class _MoviesPageState extends State<MoviesPage> {
12+
CarouselController _carouselController = new CarouselController();
13+
int _current = 0;
14+
15+
List<dynamic> _movies = [
16+
{
17+
'title': 'Black Widow',
18+
'image': 'https://www.moviepostersgallery.com/wp-content/uploads/2020/08/Blackwidow2.jpg',
19+
'description': 'Black Widow'
20+
},
21+
{
22+
'title': 'The Suicide Squad',
23+
'image': 'https://static.wikia.nocookie.net/headhuntersholosuite/images/7/77/Suicide_Squad%2C_The.jpg/revision/latest?cb=20210807172814',
24+
'description': 'The Suicide Squad'
25+
},
26+
{
27+
'title': 'Godzilla Vs Kong',
28+
'image': 'https://pbs.twimg.com/media/EwTsO9CVcAUxoMM?format=jpg&name=large',
29+
'description': 'Godzilla Vs Kong'
30+
}
31+
];
32+
33+
@override
34+
void initState() {
35+
super.initState();
36+
}
37+
38+
@override
39+
Widget build(BuildContext context) {
40+
return Scaffold(
41+
body: Container(
42+
height: MediaQuery.of(context).size.height,
43+
child: Stack(
44+
children: [
45+
Image.network(_movies[_current]['image'], fit: BoxFit.cover),
46+
Positioned(
47+
top: 0,
48+
left: 0,
49+
right: 0,
50+
bottom: 0,
51+
child: Container(
52+
height: MediaQuery.of(context).size.height * 0.3,
53+
decoration: BoxDecoration(
54+
gradient: LinearGradient(
55+
begin: Alignment.bottomCenter,
56+
end: Alignment.topCenter,
57+
colors: [
58+
Colors.grey.shade50.withOpacity(1),
59+
Colors.grey.shade50.withOpacity(1),
60+
Colors.grey.shade50.withOpacity(1),
61+
Colors.grey.shade50.withOpacity(1),
62+
Colors.grey.shade50.withOpacity(0.0),
63+
Colors.grey.shade50.withOpacity(0.0),
64+
Colors.grey.shade50.withOpacity(0.0),
65+
Colors.grey.shade50.withOpacity(0.0),
66+
]
67+
)
68+
),
69+
),
70+
),
71+
Positioned(
72+
bottom: 50,
73+
height: MediaQuery.of(context).size.height * 0.7,
74+
width: MediaQuery.of(context).size.width,
75+
child: CarouselSlider(
76+
options: CarouselOptions(
77+
height: 500.0,
78+
aspectRatio: 16/9,
79+
viewportFraction: 0.70,
80+
enlargeCenterPage: true,
81+
onPageChanged: (index, reason) {
82+
setState(() {
83+
_current = index;
84+
});
85+
},
86+
),
87+
carouselController: _carouselController,
88+
89+
items: _movies.map((movie) {
90+
return Builder(
91+
builder: (BuildContext context) {
92+
return Container(
93+
width: MediaQuery.of(context).size.width,
94+
margin: EdgeInsets.symmetric(horizontal: 5.0),
95+
decoration: BoxDecoration(
96+
color: Colors.white,
97+
borderRadius: BorderRadius.circular(20.0),
98+
),
99+
child: SingleChildScrollView(
100+
child: Column(
101+
children: [
102+
Container(
103+
height: 320,
104+
margin: EdgeInsets.only(top: 30),
105+
clipBehavior: Clip.hardEdge,
106+
decoration: BoxDecoration(
107+
borderRadius: BorderRadius.circular(20),
108+
),
109+
child: Image.network(movie['image'], fit: BoxFit.cover),
110+
),
111+
SizedBox(height: 20),
112+
Text(movie['title'], style:
113+
TextStyle(
114+
fontSize: 16.0,
115+
fontWeight: FontWeight.bold
116+
),
117+
),
118+
// rating
119+
SizedBox(height: 20),
120+
Container(
121+
child: Text(movie['description'], style: TextStyle(
122+
fontSize: 14.0,
123+
color: Colors.grey.shade600
124+
), textAlign: TextAlign.center,
125+
),
126+
),
127+
SizedBox(height: 20),
128+
AnimatedOpacity(
129+
duration: Duration(milliseconds: 500),
130+
opacity: _current == _movies.indexOf(movie) ? 1.0 : 0.0,
131+
child: Container(
132+
padding: EdgeInsets.symmetric(horizontal: 20.0),
133+
child: Row(
134+
mainAxisAlignment: MainAxisAlignment.spaceBetween,
135+
children: [
136+
Container(
137+
child: Row(
138+
children: [
139+
Icon(Icons.star, color: Colors.yellow, size: 20,),
140+
SizedBox(width: 5),
141+
Text('4.5', style: TextStyle(
142+
fontSize: 14.0,
143+
color: Colors.grey.shade600
144+
),)
145+
],
146+
),
147+
),
148+
Container(
149+
child: Row(
150+
children: [
151+
Icon(Icons.access_time, color: Colors.grey.shade600, size: 20,),
152+
SizedBox(width: 5),
153+
Text('2h', style: TextStyle(
154+
fontSize: 14.0,
155+
color: Colors.grey.shade600
156+
),)
157+
],
158+
),
159+
),
160+
Container(
161+
width: MediaQuery.of(context).size.width * 0.2,
162+
child: Row(
163+
children: [
164+
Icon(Icons.play_circle_filled, color: Colors.grey.shade600, size: 20,),
165+
SizedBox(width: 5),
166+
Text('Watch', style: TextStyle(
167+
fontSize: 14.0,
168+
color: Colors.grey.shade600
169+
),)
170+
],
171+
),
172+
),
173+
],
174+
),
175+
),
176+
),
177+
],
178+
),
179+
)
180+
);
181+
},
182+
);
183+
}).toList(),
184+
),
185+
)
186+
],
187+
),
188+
),
189+
);
190+
}
191+
}

‎pubspec.yaml

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,8 @@ dependencies:
4646
bouncing_widget: ^2.0.0
4747
bottom_navy_bar: ^6.0.0
4848
salomon_bottom_bar: ^3.1.0
49+
avatar_glow: ^2.0.2
50+
carousel_slider: ^4.0.0
4951

5052
dev_dependencies:
5153
flutter_test:

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /