[Flutter 3일차] / image_carousel

위젯 생명주기

1. StatelessWidget
   • 상태 없음
   • 다시 그리려면 전체 새로 생성
     -> 고정UI, 아이콘
2. StatefulWidget
   • 상태 있음
   • 값이 바뀌면 화면 자동 변경
     -> 버튼 클릭, API 데이터, 웹뷰 로딩, 입력값

Pubspec.yaml -> 의존성 있는 것들 저장하는 파일

Key

: 위젯을 구분하기위한 아이디
=> list, update할 떄 필요

BuildContext

: 위젯의 위젯 정보, 위치 알려줌

Scaffold

: 기본 뼈대

PageView

➡️ 여러개의 위젯을 단독 페이지로 생성하고 가로 또는 세로 스와이프로 페이지를 넘길 수 있게 하는 위젯

fit:BoxFit.contain -> 이미지가 잘리지 않는 선에서 최대한 크게 늘리기
fit:BoxFit.cover -> 부모 위젯 전체를 덮는 선에서 최소한 크기로 조절
fit:BoxFit.fill-> 이미지의 비율을 무시하고 부모 위젯의 이미지 비율대로 크기를 조절
fit:BoxFit.fitHeight-> 이미지의 비율을 유지한 채로 부모 위젯의 높이에 이미지의 높이를 맞춤
fit:BoxFit.fitWidth-> 이미지의 비율을 유지한 채로 부모 위젯의 높이에 이미지의 넓이를 맞춤
fit:BoxFit.none-> 원본 이미지 크기와 비율을 그대로 사용
fit:BoxFit.scaleDown-> BoxFit.none의 설정에 이미지를 중앙 정렬 + if (부모 위젯 < 이미지) 이미지 크기를 줄임

SystemChrome

: 시스템 UI를 제어하는 클래스 (상태바, 네비게이션바 등)
setSystemUIOverlayStyle()
-> 상태바 스타일 바꾸는 함수
예시 코드) SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);
// 상태바 아이콘을 어둡게 만듬

수업코드

image_carousel
home_screen.dart

import 'package:flutter/material.dart'; //기본 라이브러리
import 'package:flutter/services.dart';
import 'dart:async';

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

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

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

  //initState() 함수 등록
  @override
  void initState() {
    super.initState();

    Timer.periodic(Duration(seconds: 3), (timer) {
      //1. 현재 페이지 가져오기
      int? nextPage = pageController.page?.toInt();
      //2. 페이지 값이 엇을 때 예외처fl
      if (nextPage == null) {
        return;
      }
      //3. 첫 페이지와 마지막 페이지 분기 처리
      if (nextPage == 4) {
        nextPage = 0;
      } else {
        nextPage++;
      }
      //4. 페이지 변경
      pageController.animateToPage(
        nextPage,
        duration: Duration(milliseconds: 500),
        curve: Curves.ease,
      );
    });


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