[flutter] 플러터 shimmer를 이용한 웹뷰 애니메이션 구현하기

11 Dec 2023

flutter

플러터로 웹뷰를 표현하고 싶지만 단순한 정적인 화면보다는 더 생동감 있게 표현하고 싶다면, shimmer 애니메이션을 이용할 수 있습니다. Shimmer 애니메이션은 콘텐츠가 로딩 중임을 시각적으로 나타내는데 사용됩니다.

이번 포스트에서는 플러터에서 webview_flutter 패키지를 사용하여 웹페이지를 렌더링하고, 그 위에 shimmer 애니메이션을 추가하여 화면을 더 동적으로 만드는 방법을 알아보겠습니다.

1. webview_flutter 패키지 설치

먼저, webview_flutter 패키지를 플러터 프로젝트에 추가합니다. pubspec.yaml 파일에 아래와 같이 패키지를 추가합니다.

dependencies:
  webview_flutter: ^2.0.13

그리고 터미널에서 아래 명령어를 실행하여 패키지를 설치합니다.

flutter pub get

2. 웹뷰 및 Shimmer 애니메이션 구현

다음으로, webview_flutter 패키지를 사용하여 웹뷰를 추가합니다. 그 후에 shimmer 패키지를 이용하여 shimmer 애니메이션을 구현합니다. 아래의 코드는 이 과정을 구현한 예시입니다.

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Webview with Shimmer Animation"),
        ),
        body: WebViewShimmer(),
      ),
    );
  }
}

class WebViewShimmer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        WebView(
          initialUrl: 'https://www.example.com',
          javascriptMode: JavascriptMode.unrestricted,
        ),
        Shimmer.fromColors(
          baseColor: Colors.grey[300],
          highlightColor: Colors.grey[100],
          child: Container(
            color: Colors.white,
          ),
        )
      ],
    );
  }
}

위 코드에서는 webview_flutter 패키지를 사용하여 웹뷰를 추가하고, shimmer 패키지를 이용하여 shimmer 애니메이션을 구현했습니다.

결과

위의 코드를 실행하면, 사용자가 웹페이지를 로딩하는 동안에는 shimmer 애니메이션이 보여집니다. 웹페이지 로딩이 완료되면 shimmer 애니메이션이 사라지고 웹페이지 컨텐츠가 나타납니다.

이와 같이 webview_flutter와 shimmer 패키지를 활용하여 플러터 앱에서 웹뷰와 shimmer 애니메이션을 함께 사용할 수 있습니다.

참고문헌: