Flutter滑动卡片效果插件slimy_card_plus的使用

Flutter滑动卡片效果插件slimy_card_plus的使用

SlimyCard - Animated Flutter Package

SlimyCard 提供了一种美丽的黏液动画效果，将一个卡片分成两个不同的卡片，一个在顶部，另一个在底部。你可以在这两个独立的卡片中放置任何自定义小部件。

如何安装此插件

1. 添加依赖

在你的 Flutter 应用的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  slimy_card_plus: ^1.0.0

2. 安装插件

你可以通过命令行来安装插件：

flutter pub get

或者，如果你的编辑器支持，也可以直接从编辑器中安装。

如何使用此插件

1. 导入插件

在 Dart 代码中导入插件：

import 'package:slimy_card_plus/slimy_card.dart';

2. 使用插件

创建一个 ListView，并在其子组件中使用 SlimyCard：

ListView(
  children: <Widget>[
    SlimyCard(),
  ],
);

3. 自定义插件

你可以根据需要自定义 SlimyCard，通过使用以下参数：

ListView(
  children: <Widget>[
    SlimyCard(
      color: Colors.red,
      width: 200,
      topCardHeight: 400,
      bottomCardHeight: 200,
      borderRadius: 15,
      topCardWidget: myWidget01(),
      bottomCardWidget: myWidget02(),
      slimeEnabled: true,
    ),
  ],
),

myWidget01 和 myWidget02 是你希望分别显示在顶部卡片和底部卡片中的自定义小部件。

实际截图

如何获取此插件的状态

你可以通过将 SlimyCard 包裹在一个 StreamBuilder 中来实时获取此插件的状态：

StreamBuilder(
  initialData: false,
  stream: slimyCard.stream, // SlimyCard 的流
  builder: (BuildContext context, AsyncSnapshot snapshot) {
    return ListView(
      children: <Widget>[
        SlimyCard(
          color: Colors.red,
          width: 200,
          topCardHeight: 400,
          bottomCardHeight: 200,
          borderRadius: 15,
          topCardWidget: myWidget01(),
          bottomCardWidget: myWidget02(),
          slimeEnabled: true,
        ),
      ],
    );
  },
),

snapshot.data 将包含实时状态。

插件中的状态变更

SlimyCard 也支持状态变更，例如：

SlimyCard(
  topCardWidget: topCardWidget((snapshot.data)
      ? 'assets/images/rock_aggresive.jpg'
      : 'assets/images/rock_calm.jpg'),
),

在上面的代码中，snapshot.data 包含了 SlimyCard 的状态，并且根据该状态更新 UI。

示例代码

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:slimy_card_plus/slimy_card.dart';

void main() {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarColor: Colors.transparent,
    statusBarIconBrightness: Brightness.dark,
    systemNavigationBarColor: Colors.white,
    systemNavigationBarIconBrightness: Brightness.dark,
    systemNavigationBarDividerColor: Colors.transparent,
  ));
  SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        scaffoldBackgroundColor: Colors.white,
        fontFamily: 'Poppins',
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  [@override](/user/override)
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: StreamBuilder(
        initialData: false,
        stream: slimyCard.stream, // SlimyCard 的流
        builder: (BuildContext context, AsyncSnapshot snapshot) {
          return ListView(
            padding: EdgeInsets.zero,
            children: <Widget>[
              SizedBox(height: 100),

              // SlimyCard 被调用在这里。
              SlimyCard(
                topCardWidget: topCardWidget((snapshot.data)
                    ? 'assets/images/rock_aggresive.jpg'
                    : 'assets/images/rock_calm.jpg'),
                bottomCardWidget: bottomCardWidget(),
              ),
            ],
          );
        },
      ),
    );
  }

  // 这个小部件将作为顶部卡片的小部件传递。
  Widget topCardWidget(String imagePath) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Container(
          height: 70,
          width: 70,
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(15),
            image: DecorationImage(image: AssetImage(imagePath)),
            boxShadow: [
              BoxShadow(
                color: Colors.black.withOpacity(0.1),
                blurRadius: 20,
                spreadRadius: 1,
              ),
            ],
          ),
        ),
        SizedBox(height: 15),
        Text(
          'The Rock',
          style: TextStyle(color: Colors.white, fontSize: 20),
        ),
        SizedBox(height: 15),
        Text(
          'He asks, what your name is. But!',
          style: TextStyle(
              color: Colors.white.withOpacity(0.8),
              fontSize: 12,
              fontWeight: FontWeight.w500),
        ),
        SizedBox(height: 10),
      ],
    );
  }

  // 这个小部件将作为底部卡片的小部件传递。
  Widget bottomCardWidget() {
    return Text(
      'It doesn\'t matter \nwhat your name is.',
      style: TextStyle(
        color: Colors.white,
        fontSize: 12,
        fontWeight: FontWeight.w500,
      ),
      textAlign: TextAlign.center,
    );
  }
}