Flutter闪卡学习插件flashcardplus的使用

1. 安装

首先，在 pubspec.yaml 文件中添加 flashcardplus 依赖：

dependencies:
  flashcardplus: ^0.0.1

然后，运行 flutter pub get 来安装依赖。

2. 使用

2.1 普通小部件

这是一个简单的示例，展示了如何创建带有普通小部件的闪卡：

List<Widget> cards = List.generate(
  5,
  (index) => Container(
    color: Colors.blue,
    child: Center(
      child: Text(
        '$index',
        style: TextStyle(fontSize: 60, color: Colors.white),
      ),
    ),
  ),
);

FlashCardPlus(
  cards: cards,
)

2.2 网络图片

如果您想使用网络图片作为闪卡的内容，可以这样做：

List<String> images = [
  'https://gank.io/images/5ba77f3415b44f6c843af5e149443f94',
  'https://gank.io/images/02eb8ca3297f4931ab64b7ebd7b5b89c',
  'https://gank.io/images/31f92f7845f34f05bc10779a468c3c13',
  'https://gank.io/images/b0f73f9527694f44b523ff059d8a8841',
  'https://gank.io/images/1af9d69bc60242d7aa2e53125a4586ad',
];

List<Widget> cards = List.generate(
  images.length,
  (int index) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(16.0),
        boxShadow: [
          BoxShadow(
            offset: Offset(0, 17),
            blurRadius: 23.0,
            spreadRadius: -13.0,
            color: Colors.black54,
          )
        ],
      ),
      child: ClipRRect(
        borderRadius: BorderRadius.circular(16.0),
        child: Image.network(
          images[index],
          fit: BoxFit.cover,
        ),
      ),
    );
  },
);

FlashCardPlus(
  size: Size(400, 600),
  cards: cards,
);

2.3 使用控制器控制闪卡

通过 FlashCardController，您可以更灵活地控制闪卡的行为。以下是一个完整的示例，展示了如何使用控制器：

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

class _MyAppState extends State<MyApp> {
  FlashCardController _controller = FlashCardController();
  List<Widget> cards = [];

  [@override](/user/override)
  void initState() {
    super.initState();
    // 初始化卡片数据
    cards = List.generate(
      5,
      (index) => Container(
        color: Colors.blue,
        child: Center(
          child: Text(
            '$index',
            style: TextStyle(fontSize: 60, color: Colors.white),
          ),
        ),
      ),
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            FlashCardPlus(
              cards: cards,
              leftIcon: ElevatedButton( // 左侧图标
                style: ElevatedButton.styleFrom(
                  fixedSize: Size(52, 52),
                  elevation: 0,
                  primary: Colors.red,
                  shape: CircleBorder(
                    side: BorderSide(width: 0, color: Colors.transparent),
                  ),
                ),
                onPressed: null,
                child: const Icon(
                  Icons.close,
                  color: Colors.black45,
                  size: 32,
                ),
              ),
              rightIcon: const Icon( // 右侧图标
                Icons.favorite,
                color: Colors.pink,
                size: 32,
              ),
              size: Size(360, 480),
              controller: _controller,
              onForward: (index, info) {
                print('向前滑动: $index');
                var offset = 3;
                if (index >= cards.length - offset) {
                  print('加载更多...');
                  List<Widget> addCards = List.generate(
                    3, // 生成或从服务器加载更多卡片
                    (index) => Container(
                      color: Colors.green,
                      child: Center(
                        child: Text(
                          '新卡片 ${cards.length + index}',
                          style: TextStyle(fontSize: 60, color: Colors.white),
                        ),
                      ),
                    ),
                  ).toList();
                  setState(() {
                    cards.addAll(addCards);
                  });
                  _controller.append(addCards); // 追加更多卡片
                }
              },
              onBack: (index, info) {
                print('向后滑动: $index');
              },
              onEnd: () {
                print('结束');
              },
            ),
            SizedBox(height: 40),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: <Widget>[
                OutlineButton(
                  onPressed: () {
                    _controller.back(); // 返回上一张卡片
                  },
                  child: Text('返回'),
                ),
                OutlineButton(
                  onPressed: () {
                    _controller.reset(); // 重置卡片
                  },
                  child: Text('重置'),
                ),
                OutlineButton(
                  onPressed: () {
                    _controller.forward(); // 向前滑动
                  },
                  child: Text('前进'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

2.4 确定滑动方向

您可以监听用户滑动的方向，并根据不同的方向执行不同的操作：

FlashCardPlus(
  cards: cards,
  size: Size(360, 480),
  controller: _controller,
  onForward: (index, info) {
    print('向前滑动: $index');
    print('滑动方向: ${info.direction}');
    if (info.direction == SwipeDirection.Right) {
      print('喜欢');
    } else {
      print('不喜欢');
    }
  },
  onBack: (index, info) {
    print('向后滑动: $index');
  },
  onEnd: () {
    print('结束');
  },
)

2.5 重置为新卡片

如果您想重置闪卡并加载新的卡片，可以使用 reset 方法：

List<Widget> newCards = [];

FlashCardPlusController _controller = FlashCardPlusController();

_controller.reset(cards: newCards);

3. 属性

以下是 FlashCardPlus 的一些常用属性及其说明：

属性名	类型	默认值	描述	是否必填
cards	`List<Widget>`	`null`	渲染的卡片列表	是
size	`Size`	`null`	卡片的大小	否
controller	`FlashCardController`	`null`	卡片控制器	否
onForward	`ForwardCallback`	`null`	向前滑动时的回调函数	否
onBack	`BackCallback`	`null`	向后滑动时的回调函数	否
onEnd	`EndCallback`	`null`	滑动结束时的回调函数	否
lockYAxis	`bool`	`false`	是否锁定 Y 轴手势	否
slideSpeed	`double`	`20`	滑动速度，值越小滑动越慢	否
delaySlideFor	`int`	`500`	下一次滑动前的延迟时间（毫秒），值越小滑动越快	否
leftIcon	`Widget`	`null`	左侧图标，当向右滑动时显示	否
rightIcon	`Widget`	`null`	右侧图标，当向右滑动时显示	否

4. 完整示例 Demo

以下是一个完整的示例，展示了如何在项目中使用 FlashCardPlus 插件：

import 'package:flutter/material.dart';
import 'package:flashcardplus/flashcard_plus.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter FlashCardPlus Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const FlashCardPage(),
    );
  }
}

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

  [@override](/user/override)
  _FlashCardPageState createState() => _FlashCardPageState();
}

class _FlashCardPageState extends State<FlashCardPage> {
  FlashCardController _controller = FlashCardController();
  List<Widget> cards = [];

  [@override](/user/override)
  void initState() {
    super.initState();
    // 初始化卡片数据
    cards = List.generate(
      5,
      (index) => Container(
        color: Colors.blue,
        child: Center(
          child: Text(
            '$index',
            style: TextStyle(fontSize: 60, color: Colors.white),
          ),
        ),
      ),
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('FlashCardPlus Demo'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          FlashCardPlus(
            cards: cards,
            leftIcon: ElevatedButton( // 左侧图标
              style: ElevatedButton.styleFrom(
                fixedSize: Size(52, 52),
                elevation: 0,
                primary: Colors.red,
                shape: CircleBorder(
                  side: BorderSide(width: 0, color: Colors.transparent),
                ),
              ),
              onPressed: null,
              child: const Icon(
                Icons.close,
                color: Colors.black45,
                size: 32,
              ),
            ),
            rightIcon: const Icon( // 右侧图标
              Icons.favorite,
              color: Colors.pink,
              size: 32,
            ),
            size: Size(360, 480),
            controller: _controller,
            onForward: (index, info) {
              print('向前滑动: $index');
              print('滑动方向: ${info.direction}');
              if (info.direction == SwipeDirection.Right) {
                print('喜欢');
              } else {
                print('不喜欢');
              }
              var offset = 3;
              if (index >= cards.length - offset) {
                print('加载更多...');
                List<Widget> addCards = List.generate(
                  3, // 生成或从服务器加载更多卡片
                  (index) => Container(
                    color: Colors.green,
                    child: Center(
                      child: Text(
                        '新卡片 ${cards.length + index}',
                        style: TextStyle(fontSize: 60, color: Colors.white),
                      ),
                    ),
                  ),
                ).toList();
                setState(() {
                  cards.addAll(addCards);
                });
                _controller.append(addCards); // 追加更多卡片
              }
            },
            onBack: (index, info) {
              print('向后滑动: $index');
            },
            onEnd: () {
              print('结束');
            },
          ),
          SizedBox(height: 40),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
              OutlineButton(
                onPressed: () {
                  _controller.back(); // 返回上一张卡片
                },
                child: Text('返回'),
              ),
              OutlineButton(
                onPressed: () {
                  _controller.reset(); // 重置卡片
                },
                child: Text('重置'),
              ),
              OutlineButton(
                onPressed: () {
                  _controller.forward(); // 向前滑动
                },
                child: Text('前进'),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

更多关于Flutter闪卡学习插件flashcardplus的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

yuanlaile 1楼•7 天前

更多关于Flutter闪卡学习插件flashcardplus的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，以下是一个关于如何在Flutter项目中集成和使用flashcardplus插件的代码示例。flashcardplus是一个用于创建和管理闪卡学习应用的Flutter插件。这个示例将展示如何设置基本的闪卡学习界面，并添加一些基本的交互功能。

首先，确保你的Flutter环境已经设置好，并且在你的pubspec.yaml文件中添加flashcardplus依赖：

dependencies:
  flutter:
    sdk: flutter
  flashcardplus: ^最新版本号  # 请替换为实际可用的最新版本号

然后运行flutter pub get来安装依赖。

接下来，我们编写一个简单的Flutter应用，展示如何使用flashcardplus插件。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FlashcardPlus Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: FlashcardScreen(),
    );
  }
}

class FlashcardScreen extends StatefulWidget {
  @override
  _FlashcardScreenState createState() => _FlashcardScreenState();
}

class _FlashcardScreenState extends State<FlashcardScreen> {
  late FlashcardController _controller;

  @override
  void initState() {
    super.initState();
    _controller = FlashcardController(
      deck: [
        Flashcard(front: 'Front 1', back: 'Back 1'),
        Flashcard(front: 'Front 2', back: 'Back 2'),
        Flashcard(front: 'Front 3', back: 'Back 3'),
      ],
      onFlip: (card) {
        print('Flipped card: ${card.front} -> ${card.back}');
      },
      onComplete: () {
        print('All cards have been reviewed.');
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('FlashcardPlus Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: FlashcardPlus(
          controller: _controller,
          builder: (context, state) {
            if (state.isEmpty) {
              return Center(child: Text('No cards to show.'));
            } else if (state.isFlipped) {
              return Text(state.currentCard.back, style: TextStyle(fontSize: 24));
            } else {
              return Text(state.currentCard.front, style: TextStyle(fontSize: 24));
            }
          },
          flipButton: (context, state) {
            return ElevatedButton(
              onPressed: state.canFlip ? () => _controller.flip() : null,
              child: Text(state.isFlipped ? 'Back to Front' : 'Flip Card'),
            );
          },
        ),
      ),
    );
  }
}

在这个示例中，我们做了以下几件事：

初始化FlashcardController：在initState方法中，我们创建了一个FlashcardController实例，并传入了一个包含几个闪卡的列表。同时，我们还设置了onFlip和onComplete回调。
构建UI：在build方法中，我们使用FlashcardPlus组件来显示闪卡。我们通过builder参数来自定义闪卡正面和背面的显示方式，通过flipButton参数来自定义翻转按钮。
处理用户交互：当用户点击翻转按钮时，如果当前状态允许翻转（即不是正在翻转或已经翻转完毕），则调用_controller.flip()方法来翻转闪卡。

这个示例提供了一个基本的框架，你可以根据实际需求进一步扩展和定制，比如添加更多的闪卡、优化UI设计、添加进度跟踪功能等。