[flutter] 플러터 shimmer를 사용한 기업 로고 애니메이션 예시

11 Dec 2023

flutter

이 예제에서는 플러터로 shimmer 애니메이션을 사용하여 기업 로고를 보여주는 간단한 데모를 만들어볼 것입니다.

1. 기업 로고 이미지 가져오기

먼저, 사용할 기업 로고 이미지를 가져옵니다. 예를 들어, Google의 로고 이미지를 사용할 수 있습니다. 가져온 이미지는 앱 프로젝트의 assets 폴더에 저장합니다.

2. Shimmer 플러그인 설치

pubspec.yaml 파일의 dependencies 섹션에 shimmer 플러그인을 추가합니다.

dependencies:
  shimmer: ^1.1.2

그리고 터미널에서 아래 명령을 실행하여 플러그인을 설치합니다.

flutter pub get

3. 코드 작성

다음으로, 기업 로고를 shimmer 애니메이션으로 보여줄 LogoAnimation 위젯을 작성합니다.

import 'package:flutter/material.dart';
import 'package:shimmer/shimmer.dart';

class LogoAnimation extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Shimmer.fromColors(
      baseColor: Colors.grey[300],
      highlightColor: Colors.grey[100],
      child: Image.asset('assets/google_logo.png'),
    );
  }
}

4. 애니메이션 사용

마지막으로, LogoAnimation 위젯을 앱 화면에 추가하여 shimmer 애니메이션을 사용합니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('로고 애니메이션'),
        ),
        body: Center(
          child: LogoAnimation(),
        ),
      ),
    );
  }
}

위의 코드를 실행하면, 기업 로고 이미지가 shimmer 효과와 함께 부드럽게 표시될 것입니다.

이것으로 shimmer를 사용한 기업 로고 애니메이션 예시를 마칩니다.

참고 자료

shimmer 플러그인