Flutter页面切换动画插件flutter_liquid_swipe的使用

简介

Flutter Liquid Swipe 是一个 Flutter 插件，可以让你在应用程序中添加液态滑动引导页。这是对 Luke Pighetti 的实现的一个分支。

截图

安装

要安装 flutter_liquid_swipe 插件，请按照以下步骤操作：

1. 打开你的终端或命令提示符。
2. 运行以下命令来安装插件：

   flutter pub add flutter_liquid_swipe
   

3. 一旦插件安装完成，你可以在你的 Flutter 项目中导入它：

   import 'package:flutter_liquid_swipe/flutter_liquid_swipe.dart';
   

4. 你现在可以开始在 Flutter 项目中使用 flutter_liquid_swipe 插件了。

示例

以下是一个简单的示例，展示了如何使用 flutter_liquid_swipe 插件创建一个具有液态滑动效果的引导页。

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

void main() {
  runApp(const LiquidSwipeApp());
}

class LiquidSwipeApp extends StatelessWidget {
  const LiquidSwipeApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(home: LiquidSwipeOnboarding());
  }
}

class LiquidSwipeOnboarding extends StatefulWidget {
  const LiquidSwipeOnboarding({super.key});

  [@override](/user/override)
  State<LiquidSwipeOnboarding> createState() => _LiquidSwipeOnboardingState();
}

class _LiquidSwipeOnboardingState extends State<LiquidSwipeOnboarding> {
  final _key = GlobalKey<LiquidSwipeState>();

  LiquidSwipeState? get liquidSwipeController => _key.currentState;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: LiquidSwipe(
        key: _key,
        children: [
          // 第一页
          FlutterLiquidSwipeCard(
            onTapName: () {},
            onSkip: () {},
            name: "Transcribe",
            action: "Skip",
            title: "SpeakEasy",
            subtitle: "Empowering Communication",
            body: "Revolutionize the way you interact with the world",
            buttonColor: Colors.black,
            titleStyle: TextStyle(
              fontSize: 20,
              color: Colors.grey.shade700,
            ),
            subtitleStyle: TextStyle(
              fontSize: 23,
              color: Colors.grey.shade900,
            ),
            bodyStyle: TextStyle(
              fontSize: 18,
              color: Colors.green.shade400,
            ),
            gradient: const LinearGradient(
              colors: [Colors.white, Colors.white],
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
            ),
            child: ClipRRect(
              borderRadius: BorderRadius.circular(10),
              child: Image.network("https://picsum.photos/300/200"),
            ),
          ),
          // 第二页
          FlutterLiquidSwipeCard(
            onTapName: () => liquidSwipeController?.previous(),
            onSkip: () {},
            name: "Back",
            action: "Done",
            title: "Cutting Edge Technology",
            subtitle: "With an Effortless Experience",
            body: "Our innovative speech-to-text solution offers precise transcription",
            buttonColor: Colors.white,
            titleStyle: const TextStyle(
              fontSize: 20,
              color: Colors.black,
            ),
            subtitleStyle: TextStyle(
              fontSize: 23,
              color: Colors.grey.shade400,
            ),
            bodyStyle: TextStyle(
              fontSize: 18,
              color: Colors.white.withOpacity(0.8),
            ),
            gradient: const LinearGradient(
              colors: [Colors.grey, Colors.green],
              begin: Alignment.topRight,
              end: Alignment.bottomLeft,
            ),
            child: ClipRRect(
              borderRadius: BorderRadius.circular(10),
              child: Image.network("https://picsum.photos/350/200"),
            ),
          ),
        ],
      ),
    );
  }
}