오공완(with 코드팩토리의 플러터 프로그래밍) #8 (전자액자)

// 이곳에 쓴 내용은 앱 만들기라는 버킷리스트를 달성하기 위해 플러터를 공부하면서 정리하고 있는 내용입니다.

플러터에 대해 아는 것이 거의 없기 때문에 정리하면서 오류가 있을 수 있습니다.

오류를 발견하신 분은 댓글 남겨 주시면 감사하겠습니다.

 

  위젯 생명주기

 

StatelessWidget vs. StatefulWidget(위젯 클래스와 스테이트 클래스로 구성)

-상태변경이 없는 생명주기

-StatefulWidget 생성자의 매개변수가 변경됐을 때 생명주기

-State 자제적으로 build()를 재실행할 때 생명주기

각 내용이 어려움으로 그냥 이런 게 있나 보다 하고 넘어가자.

 

  Timer

 

Timer() : 첫 번째 매개변수는 대기기간 Duration으로 입력, 두 번째 매개변수 실행할 콜백함수 입력

예) Tmer(Duration(seconds: 3), (Timer timer){print('hello')} (3초 후 hello 출력)

Timer.periodic() : 주기적으로 콜백함수 실행

예) Timer.periodic(Duration(seconds: 3), (Timer timer){print('hello')} (3초마다 hello 출력)

 

  이미지 추가, pubspec.yaml, 프로젝트 초기화하기

 

 

  구현하기(Boxfit, 상태바 색깔 변경, 타이머 추가)

 

오류 메시지. 대충 , 하나 더 추가하라는 거 같아서 했더니 된다.

 

BoxFit.

-contain: 부모 위젯에 맞춰 크기 조정. 가로나 세로 중 채울 수 있는 크기만큼 조정, 가로, 세로 비율은 유지

-cover:부모 위젯 전체를 덮는 선에서 최소한 크기로 조절

-fill: 이미지 비율을 무시하고 부모 위젯 이미지 비율로 조절

-none: 원본 이미지 크기와 비율을 그대로 사용

-scaleDown: 이미지를 중앙 정렬하고 부모 위젯이 이미지보다 작으면 이미지 크기를 줄여서 부모 위젯에 맞춤

 

출처: https://api.flutter.dev/flutter/painting/BoxFit.html

 

상태바를 dark와 light으로 했는데, 아예 없을 때와 각각 있을 때 차이점을 전혀 모르겠다.

 

타이머를 추가하려면 statelessWidget에서 statefulWidget으로 바꿔야 한단다. 또, import: 'dart:async'; 추가함.

타이머는 initStat() 함수와 같이 쓴다고..

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

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

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

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

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

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

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

        if(nextPage == null){
          return;
        }

        if(nextPage == 4) {
          nextPage = 0;
        } else{
          nextPage++;
        }
        pageController.animateToPage(
          nextPage,
          duration: Duration(milliseconds: 500),
          curve: Curves.ease,
        );
      },
    );
  }

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

 

 

 

쉼표 때문에 오류가 두 번 있었으나 잘 해결이 되었다.

지난번 책보다는 수월하게 흘러가는 기분이다. 방심은 금물..

 

오늘 공부도 이것으로 끄읏~