[flutter] 전자액자 만들기

ㅁ 들어가며

ㅇ  코드팩토리의 플러터 프로그래밍 책을 보며 실습한 내용을 정리하였다.

ㅇ 8장 전자액자를 만드는 과정을 정리하였습니다.

ㅇ 소스는 이곳

 

ㅁ StatelessWidget과 StatefulWidget

StatelessWidget: 상태가 없는 위젯, 클래스를 한 번 생성하고 나면 속성을 변경할 수 없는 상태이다.

StatefulWidget: 위젯 내부에서 자체적으로 재실행해야 하는 상황을 위해 탄생.

 

ㅁ image_carousel 프로젝트 생성 

 

 

ㅁ 샘플 이미지 세팅

 ㅇ 에셋에 필요한 이미지를 asset 폴더에 저장하고 flutter에게 인식시켜줘야한다.

 ㅇ pubspec.yaml에 assets라는 키로 asset/img 폴더를 선언한다.

 ㅇ 변경사항 반영을 위해 put get을 클릭한다.

 

ㅁ Screen 세팅 및 Page View 구현하기

 ㅇ 화면 소스코드 정리를 위해 Screen 폴더와 home_screen.dart 파일 생성

 

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  // Page View 구현하기
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView(
        children: [1,2,3,4,5]
            .map(
                (number) => Image.asset('asset/img/image_$number.jpeg'),
        ).toList(),
      ),
    );
  }
}

 ㅇ pageView를 위한 5개 children을 map으로 생성한다.

 

ㅁ BoxFit 설정 속성

 

- contain: 이미지 안잘리게 최대한 늘리거나 축소함.

 

- scaleDown: 이미지 안잘리게 최대한 가로세로 맞추어 축소.  확대는 하지 않음.

 

- cover: 빈공간 없이 꽉 채우기, 이미지 짤릴 수 있음.

 

- fill: 화면 전체를 늘려 채우기

 

- fillHeight: 높이만 맞춤

 

- fitWidth:  넓이만 맞춤

 

- none: 이미지 비율대로 보여줌

 

참조: https://api.flutter.dev/flutter/painting/BoxFit.html

 

 

ㅁ 상태바 색상 변경

  @override
  Widget build(BuildContext context) {
    // 상태바 색상 변경
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);
.......

 

 

ㅁ 타이머 추가

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

// StatefulWidget 바꾸기
class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

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

class _HomeScreenState extends State<HomeScreen> {

  // 타이머 추가
  @override
  void initState() {
    super.initState(); // 부모 initState를 실행한다

    Timer.periodic(
      Duration(seconds: 3),
      (timer) {
        print('start timer!');
      },
    );
  }

 ㅇ 3초마다 로그가 나타난다.

 

ㅁ page 컨트롤러 생성 및 에니메이션 적용

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

// StatefulWidget 바꾸기
class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

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

class _HomeScreenState extends State<HomeScreen> {

  // page 컨트롤러 생성
  final PageController pageController = PageController();

  // 타이머 추가
  @override
  void initState() {
    super.initState(); // 부모 initState를 실행한다

    Timer.periodic(
      Duration(seconds: 3),
      (timer) {

        int? nextPage = pageController.page?.toInt();

        // 페이지 null 예외처리
        if (nextPage == null){
          return;
        }

        // 로테이션 로직
        if (nextPage == 4) {
          nextPage=0;
        } else {
          nextPage++;
        }

        // 페이지 전환 에니메이션 적용
        pageController.animateToPage(
          nextPage, 
          duration: Duration(microseconds: 500), 
          curve: Curves.ease,);
      },
    );
  }

  // Page View 구현하기
  @override
  Widget build(BuildContext context) {
    // 상태바 색상 변경
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);

    return Scaffold(
      body: PageView(
        controller: pageController, // PageController 주입
        children: [1,2,3,4,5]
            .map(
                (number) => Image.asset(
                  'asset/img/image_$number.jpeg',
                  fit: BoxFit.cover,
                ),
        ).toList(),
      ),
    );
  }
}

 ㅇ page 컨트롤러 생성하여 PageView에 주입하는 이유는 final로 선언하여 initState에서도 값을 참조할 수 있도록 한다.

 ㅇ pageController.animateToPage에 에니메이션을 적용하였다.

 

ㅁ 함께 보면 좋은 사이트

ㅇㅇ flutter cookbook - Animate a page route transition

  ㄴ 플루터 쿡북 중 페이지 경로 전환 애니메이션

ㅇ codelabs- 첫 번째 Flutter 앱

  ㄴ 환경을 잡고 테스트를 해보기 좋은 튜토리얼