[flutter10] Image Carousel

Image Carousel

📌 Timer 사용법
📌 이미지 사용법
📌 PageView 사용법
📌 map() 함수 실전
📌 initState(), dispose() 실전
📌 상태바 테마 변경

✔️ Timer

Timer란❓
지정한 시간이 지난 뒤 한번 또는 주기적으로 무언가를 실행할 수 있게 해준다.

- Timer

import 'dart:async';

void main() {
  Timer(
  	//첫번째 파라미터에 기간 입력
    Duration(seconds: 10),
    //두번째 파라미터에 실행할 함수 입력
    () {
      print('10초 뒤 실행한다.');
    },
  );
}

이렇게 DartPad로 확인해 봤는데 실제로 콘솔창에 10초 뒤에 내용이 뜬다.

- periodic

import 'dart:async';

void main() {
//periodic 생성자를 사용하면 반복이 가능하다.
  Timer.periodic(
    Duration(seconds: 10),
    (Timer timer) {
      print('10초 뒤에 실행한다');
    }
  );
}

이것도 DartPad로 해보니 10초마다 console창에 내용이 출력된다.

✔️ 이미지 출력하기

예전에 이미지 출력하는 방법을 포스팅 해놨음!

✔️ PageView()

스와이퍼를 만들어 주는 위젯이다.

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView(
        children: [
          Image.asset(
              'asset/img/image_1.jpeg'
          ),
          Image.asset(
              'asset/img/image_2.jpeg'
          ),
          Image.asset(
              'asset/img/image_3.jpeg'
          ),
          Image.asset(
              'asset/img/image_4.jpeg'
          ),
          Image.asset(
              'asset/img/image_5.jpeg'
          ),
        ],
      )
    );
  }
}

이렇게 코드를 작성했을 때 이미지를 넘기면 다음 이미지가 보이는 스와이퍼가 완성된다. 그런데 파일명이 숫자만 다르니 코드를 수정해 본다.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: PageView(
      children: [1, 2, 3, 4, 5]
          .map((e) => Image.asset(
                'asset/img/image_$e.jpeg',
                fit: BoxFit.cover,
                //이 파라미터를 넣어 주면 이미지가 화면에 꽉 차게된다.
              ))
          .toList(),
    ));
  }

map함수를 사용하여 이미지를 뿌려준다.