carousel slider 구현

app/lib/screen/home_screen.dart

@@ -1,3 +1,4 @@
+import 'package:app/widget/carousel_slider.dart';
 import 'package:flutter/material.dart';
 
 import '../model/model_movie.dart';
@@ -13,7 +14,25 @@ class _HomeScreenState extends State<HomeScreen> {
       "keyword": "액션/드라마",
       "poster": "hunt.jpg",
       "like": false,
-    })
+    }),
+    Movie.fromMap({
+      "title": "헌트",
+      "keyword": "액션/드라마",
+      "poster": "hunt.jpg",
+      "like": false,
+    }),
+    Movie.fromMap({
+      "title": "헌트",
+      "keyword": "액션/드라마",
+      "poster": "hunt.jpg",
+      "like": false,
+    }),
+    Movie.fromMap({
+      "title": "헌트",
+      "keyword": "액션/드라마",
+      "poster": "hunt.jpg",
+      "like": false,
+    }),
   ];
   @override
   void initState() {
@@ -22,7 +41,13 @@ class _HomeScreenState extends State<HomeScreen> {
 
   @override
   Widget build(BuildContext context) {
-    return TopBar();
+    return ListView(
+      children: <Widget>[
+        Stack(
+          children: <Widget>[CarouselImage(movies: movies), TopBar()],
+        )
+      ],
+    );
   }
 }
 

app/lib/widget/carousel_slider.dart

@@ -0,0 +1,148 @@
+import 'package:carousel_slider/carousel_slider.dart';
+import 'package:flutter/material.dart';
+import 'package:app/model/model_movie.dart';
+
+class CarouselImage extends StatefulWidget {
+  final List<Movie>? movies;
+  CarouselImage({Key? key, required this.movies}) : super(key: key);
+
+  @override
+  State<CarouselImage> createState() => _CarouselImageState();
+}
+
+class _CarouselImageState extends State<CarouselImage> {
+  List<Movie>? movies;
+  List<Widget>? images;
+  List<String>? keywords;
+  List<bool>? likes;
+  int _currentPage = 0;
+  late String _currentKeyword;
+
+  @override
+  void initState() {
+    super.initState();
+    movies = widget.movies;
+    images = movies?.map((m) => Image.asset('./images/' + m.poster)).toList();
+    keywords = movies?.map((m) => m.keyword).cast<String>().toList();
+    likes = movies?.map((m) => m.like).cast<bool>().toList();
+    _currentKeyword = keywords![0];
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      child: Column(
+        children: [
+          Container(
+            padding: EdgeInsets.all(20),
+          ),
+          CarouselSlider(
+            items: images,
+            options: CarouselOptions(
+              onPageChanged: (index, reason) {
+                setState(
+                  () {
+                    _currentPage = index;
+                    _currentKeyword = keywords![_currentPage];
+                  },
+                );
+              },
+            ),
+          ),
+          Container(
+            padding: EdgeInsets.fromLTRB(0, 10, 0, 3),
+            child: Text(
+              _currentKeyword,
+              style: TextStyle(fontSize: 11),
+            ),
+          ),
+          Container(
+            child: Row(
+                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+                children: <Widget>[
+                  Container(
+                    child: Column(children: <Widget>[
+                      likes![_currentPage]
+                          ? IconButton(
+                              icon: Icon(Icons.check),
+                              onPressed: () {},
+                            )
+                          : IconButton(
+                              onPressed: () {},
+                              icon: Icon(Icons.add),
+                            ),
+                      Text(
+                        "내가 찜한 콘텐츠",
+                        style: TextStyle(fontSize: 11),
+                      ),
+                    ]),
+                  )
+                ]),
+          ),
+          Container(
+            padding: EdgeInsets.only(right: 10),
+            child: TextButton(
+              style: ButtonStyle(
+                backgroundColor: MaterialStateProperty.all(Colors.white),
+              ),
+              onPressed: () {},
+              child: Row(
+                children: <Widget>[
+                  Icon(
+                    Icons.play_arrow,
+                    color: Colors.black,
+                  ),
+                  Padding(
+                    padding: EdgeInsets.all(3),
+                  ),
+                  Text(
+                    "재생",
+                    style: TextStyle(color: Colors.black),
+                  ),
+                ],
+              ),
+            ),
+          ),
+          Container(
+            padding: EdgeInsets.only(right: 10),
+            child: Column(children: [
+              IconButton(
+                onPressed: () {},
+                icon: Icon(Icons.info),
+              ),
+              Text(
+                "정보",
+                style: TextStyle(fontSize: 11),
+              )
+            ]),
+          ),
+          Container(
+            child: Row(
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: makeIndicator(likes!, _currentPage),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+List<Widget> makeIndicator(List list, int _currentPage) {
+  List<Widget> results = [];
+  for (var i = 0; i < list.length; i++) {
+    results.add(
+      Container(
+        width: 8,
+        height: 8,
+        margin: EdgeInsets.symmetric(vertical: 10.0, horizontal: 2.0),
+        decoration: BoxDecoration(
+            shape: BoxShape.circle,
+            color: _currentPage == i
+                ? Color.fromRGBO(255, 255, 255, 0.9)
+                : Color.fromRGBO(255, 255, 255, 0.4)),
+      ),
+    );
+  }
+  return results;
+}

app/pubspec.lock

@@ -15,6 +15,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:

app/pubspec.yaml

@@ -31,6 +31,7 @@ environment:
 dependencies:
   flutter:
     sdk: flutter
+  carousel_slider: ^4.1.1
 
 
   # The following adds the Cupertino Icons font to your application.