[flutter] 리퀴드 스와이프를 이용한 스플래시 화면 디자인

18 Dec 2023

flutter

이번 포스트에서는 Flutter 앱의 스플래시 화면에 리퀴드 스와이프 효과를 추가하는 방법에 대해 알아보겠습니다. 이런 효과는 앱을 더욱 동적으로 보이게 하며 사용자들에게 시각적으로 더 흥미로운 경험을 제공할 수 있습니다.

리퀴드 애니메이션 패키지 설치

먼저, liquid_swipe 패키지를 설치해야 합니다. 이 패키지를 사용하면 리퀴드 스와이프 효과를 손쉽게 구현할 수 있습니다.

dependencies:
  liquid_swipe: ^1.5.0

터미널에서 다음 명령어를 실행하여 패키지를 설치합니다.

flutter pub get

리퀴드 스와이프 구현

다음으로는 liquid_swipe 패키지를 사용하여 리퀴드 스와이프 효과를 구현합니다. 아래 예제 코드는 세 개의 화면으로 이루어진 스플래시 화면에 리퀴드 스와이프 효과를 추가한 것입니다.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final pages = [
      Container(color: Colors.blue, child: Center(child: Text('Page 1'))),
      Container(color: Colors.green, child: Center(child: Text('Page 2'))),
      Container(color: Colors.orange, child: Center(child: Text('Page 3'))),
    ];

    return MaterialApp(
      home: Scaffold(
        body: LiquidSwipe(
          pages: pages,
        ),
      ),
    );
  }
}

위의 코드를 실행하면, 최초 실행 시에 리퀴드 스와이프로 세 개의 페이지가 화면에 표시됩니다. 사용자는 화면을 스와이프하여 다음 화면으로 전환할 수 있습니다.

이제 여러분도 Flutter 앱의 스플래시 화면에 동적이고 흥미로운 리퀴드 스와이프 효과를 추가할 수 있습니다. 번거로운 설치 과정 없이 liquid_swipe 패키지를 사용하여 간단히 구현할 수 있으니, 여러분의 앱에 적용해보시기 바랍니다.

더욱 자세한 내용은 liquid_swipe 패키지 공식 문서를 참고하시기 바랍니다.