상세 컨텐츠

본문 제목

11. image-carousel(flutter)

Flutter(Dart 포함)

by 본투비곰손 2023. 9. 22. 22:28

본문

728x90

프로젝트의 asset 추가 시 pubspec.yaml의 파일에 등록 후 Pub get를 눌러 적용한다.

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

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

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  Timer? timer;
  PageController controller = PageController(
    initialPage: 0,
  );
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    timer = Timer.periodic(Duration(seconds: 4), (timer) {
      int currentPage = controller.page!.toInt();
      int nextPage = currentPage + 1;

      if (nextPage > 4) {
        nextPage = 0;
      }
      controller.animateToPage(
        nextPage,
        duration: Duration(milliseconds: 400),
        curve: Curves.linear,
      );
    });
  }

  @override
  void dispose() {
    controller.dispose();
    if (timer != null) {
      timer!.cancel();
    }
    // TODO: implement dispose
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);
    return Scaffold(
      body: PageView(
        controller: controller,
        children: [1, 2, 3, 4, 5]
            .map((e) => Image.asset(
                  'asset/img/image_$e.jpeg',
                  fit: BoxFit.cover,
                ))
            .toList(),
      ),
    );
  }
}

728x90

'Flutter(Dart 포함)' 카테고리의 다른 글

10-2. StatefulWidget (flutter)  (0) 2023.09.20
10-1. StatefulWidget (flutter)  (0) 2023.09.19
9. Web view (flutter)  (0) 2023.09.18
8. Row 와 Column (flutter)  (0) 2023.09.15
7. Splash Screen (flutter)  (0) 2023.09.14

관련글 더보기