[Flutter] 일정 시간 주기로 움직이는 광고 배너

일정 시간 주기로 움직이는 광고 배너 예제

PageView 와 Timer.periodic() 를 통해 이를 구현할 수 있습니다. 아래는 인스타와 같이 사진이 일정 주기로 스와이프 되는 코드입니다. 아래의 코드를 조금만 수정하면 해당 기능을 구현할 수 있습니다.

 

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

void main() {
  runApp(const MyApp(
    title: 'Flutter Demo',
  ));
}

class MyApp extends StatelessWidget {

  final String title;

  const MyApp({super.key, required this.title});

  @override
  Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);

    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: title,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomeScreen(title: 'YW Project'),
    );
  }
}

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key, required this.title});

  final String title;

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

class _HomeScreenState extends State<HomeScreen> {
  PageController controller = PageController();

  @override
  void initState() {
    super.initState();

    Timer.periodic(const Duration(seconds: 3), (timer) {
      int? nextPage = controller.page?.toInt();

      if (nextPage == null) {
        return;
      }
      if (nextPage >= 4) {
        nextPage = 0;
      } else {
        nextPage++;
      }

      controller.animateToPage(
        nextPage,
        duration: const Duration(milliseconds: 500),
        curve: Curves.ease,
      );
    });
  }

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