[프로젝트][Front] lottie 활용해서 home 화면 생성하기

5월 부터는 개인 프로젝트를 완성하는데 좀 더 시간을 써볼까 한다!
그동안 안드로이드 어플을 너무 만들어 보고 싶었기에,
간단한 쇼핑몰 어플을 만들어 볼까 한다.

현재 대략적인 ui는 전부 짜둔 상태이고, 우선 학기중에는 간단한 흐름을 위주로 먼저 만들고(시간 부족으로 예외처리까지는 구현을 못할 것 같은 느낌이다..) 방학중에 확장해서 내가 해보고 싶었던 기능 전부 넣어서 만들어 볼까 한다.

아마 내 첫 풀스택 프로젝트가 되지 않을까 싶다(그치만 백엔드 부분에 좀더 치중된)
그럼 시작!

home 화면 생성하기

우선 앱 첫단 화면을 만들어야 한다.
나의 경우는 lottie를 이용해서 움직이는 아이콘을 넣어보고자 한다.

lottie 활용하기

lottie 설치

우선 lottie를 설치해야 한다.

flutter pub add lottie

https://pub.dev/packages/lottie
다음 사이트에 나온대로 설치를 진행한다.

lottie 파일 설정

그 다음에는 lottie 파일 설정을 진행해야 한다.
적당히 lottie를 모아둘 파일을 하나 만들고
그 경로를 perspect.yaml에 추가한다.

lottie 사용

class _homeState extends State<home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Lottie.asset(
          "assets/lottie/loading.json",
          width: 500,
          height: 500,
        ),
      ),
    );
  }
}

lottie는 다음과 같이 사용한다.
Lottie.asset 내부에 lottie 경로를 넣고, 사이즈를 조정하면 된다.

• 왜인지 내가 고르는 lottie들이 전부 깨져서...알맞은거 찾느라 시간을 너무 낭비했다. 문제가 대체 뭘까ㅠ

사이즈 설정

모든 요소들은 폰 사이즈에 맞춰서 만들어 져야 하기 때문에, 상대 크기를 가져야 한다. 이를 위해서 sizeUtil을 생성한다.

/*
상대 크기 지정을 위해 screenSize 얻어오는 클래스 지정
 */
class ScreenSizeUtil {
  static Size screenSize(BuildContext context) {
    MediaQueryData mediaQuery = MediaQuery.of(context);
    return mediaQuery.size;
  }

  static double screenWidth(BuildContext context) {
    return screenSize(context).width;
  }

  static double screenHeight(BuildContext context) {
    return screenSize(context).height;
  }
}

그리고 다음과 같이 상대적인 사이즈에 맞춰 크기를 설정할 수 있다.

@override
  Widget build(BuildContext context) {
    double screenHeight = ScreenSizeUtil.screenHeight(context);
    double screenWidth = ScreenSizeUtil.screenWidth(context);
    
    return Scaffold(
      body: Center(
        child: Lottie.asset(
          "assets/lottie/loading.json",
          width: screenWidth * 0.5,
          height: screenWidth * 0.5,
        ),
      ),
    );
  }

지정한 utils 클래스를 불러서 내부의 screenHeight 등으로 크기를 가져와서 사용한다.

타이머 설정

@override
  void initState() {
    super.initState();
    Timer(const Duration(seconds: 5), () {
      LoginHome();
    });
  }

main 홈에서 일정 시간이 지나면 다음 페이지로 이동해야 한다. 다음과 같이 timer를 설정해주면 된다.