[movie_app] home_page 'carousel

dev/flutter

[movie_app] home_page 'carousel_slider'

wlrn566 2023. 1. 6. 21:16

Flutter SDK releases

All current Flutter SDK releases, stable, beta, and master.

docs.flutter.dev

플러터 업그레이드를 해볼까 하고 최신 sdk 를 다운 받았다. 압축 풀고 vscode 에 path 경로를 넣어주자

설정 들어가서 flutter sdk 검색하고 Flutter Sdk Paths 에 한 줄 더 적어주면 된다. 폴더명이 동일해서 기존에 있던 경로 복사해서 3.3.10으로 바꿔주었다.

내가 만들 앱을 위해 main.dart 를 정리하고 home.dart 를 만들어 메인 홈 페이지를 제작한다.

carousel_slider | Flutter Package

A carousel slider widget, support infinite scroll and custom child widget.

pub.dev

영화 포스터 이미지들을 상단에 배너처럼 움직이게 하기위해 패키지를 하나 설치한다.

이 pub.dev 페이지에서 내가 필요한 패키지들을 검색하면 된다. 재밌는 것도 설치해서 가지고 놀고 하면 재밌다.

설치방법은 친절하게 다 적혀있다. 그저 flutter pub add ~ 만 하면 된다.

이미지를 사용하기 위해 assets 폴더를 지정해주고 다운받은 이미지를 넣어준다.

이미지는 PixaBay 에서 받았다.

참고로 이미지 폴더를 활성화 하려면 pubspec.yaml 에서 주석을 해제하고 사용해야 한다.

필요한 이미지경로만 넣어줘도 되지만 images 폴더 내의 모든 이미지 파일들을 사용하려고 폴더 경로를 적어주었다.

이미지 위젯 리스트를 만든 다음 indicator 를 나타내기 위해 index 를 선언한다.

다음 Stack 을 이용해 indicator 로 이용할 아이콘을 배치한 후 이미지 인덱스가 변할 때 마다 setState() 로 index를 변경해주며 일치하는 인덱스의 아이콘 일 때 컬러를 변경해주며 나타낸다.

import 'dart:developer';

import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/container.dart';
import 'package:flutter/src/widgets/framework.dart';

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int indicatorIndex = 0;

  @override
  void initState() {
    log("message2");
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    log("message1");
    
    List<Widget> imagePaths = [
      SizedBox(width: MediaQuery.of(context).size.width, child: Image.asset("assets/images/img1.jpg", fit: BoxFit.fitWidth)),
      SizedBox(width: MediaQuery.of(context).size.width, child: Image.asset("assets/images/img2.jpg", fit: BoxFit.fitWidth)),
      SizedBox(width: MediaQuery.of(context).size.width, child: Image.asset("assets/images/img3.jpg", fit: BoxFit.fitWidth)),
    ];
    return Scaffold(
      appBar: AppBar(
        title: Text("Home"),
      ),
      body: Column(
        children: [
          Stack(
            children: [
              CarouselSlider(
                options: CarouselOptions(
                  autoPlay: true,
                  enlargeCenterPage: false, // 사라지는 이미지 효과
                  scrollDirection: Axis.horizontal,
                  viewportFraction: 1.0, // 화면 채우기
                  onPageChanged: (index, reason) {
                    log(indicatorIndex.toString());
                    setState(() {
                      indicatorIndex = index;
                    });
                  },
                ),
                items: imagePaths
              ),
              Positioned(
                bottom: 10,
                right: 0,
                left: 0,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    for (int i=0; i<imagePaths.length; i++)
                      Icon(Icons.circle, color: indicatorIndex == i ? Colors.black : Colors.white)
                  ],
                )
              ),
            ],
          ),
        ],
      ),
    );
  }
}