Flutter登录认证插件flutter_rive_login的使用

Flutter登录认证插件flutter_rive_login的使用

flutter_rive_login 是一个用于在 Flutter 应用程序中应用带有 .riv 格式文件的登录动画的插件。该插件仅在状态机的输入值为 success, fail 和 hand_up 或它们的组合时使用。该插件将根据在 Rive 网站上找到的不同类型的输入来更新登录动画。

预览

预览

安装

此插件可以在 Pub 上获取：https://pub.dev/packages/flutter_rive_login

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

dependencies:
  flutter_rive_login: latest_version

使用的包

  • rive: latest_version
  • get: latest_version

使用方法

要集成 flutter_rive_login，可以参考示例代码中的 main.dart 文件。

示例代码

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

import 'package:flutter/services.dart';
import 'package:flutter_rive_login/flutter_rive_login.dart';
import 'package:flutter_rive_login_example/list_const.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

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

class _HomePageState extends State<HomePage> {
  var getValue = '';
  int? getIndex;
  String? email;
  String? password;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Rive Login Plugin Demonstration'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            DropdownButton<String>(
              value: getValue.isNotEmpty ? getValue : null,
              items: assetList.map((String value) {
                return DropdownMenuItem<String>(
                  value: value,
                  child: Text(value),
                );
              }).toList(),
              onChanged: (value) {
                setState(() {
                  getValue = value!;
                  getIndex = assetList.indexOf(getValue);
                });
              },
            ),
            MaterialButton(
              color: Colors.green,
              onPressed: () {
                Navigator.of(context).push(MaterialPageRoute(
                  builder: (_) => StateMachineTriggerAnimation(
                    isAsset: true,
                    imageName: "assets/${getValue}.riv",
                    stateMachines: stateMachinesList[getIndex!],
                    boolInputList: boolInputList[getIndex!],
                    doubleInputList: doubleInputList.length > 1
                        ? doubleInputList[getIndex!]
                        : doubleInputList[0],
                    applyPasswordChanges: (value) {
                      checkPassword(value);
                    },
                    buttonColor: Colors.green,
                    buttonTitle: "Submit",
                    emailHint: "Enter Email Address",
                    colors: Colors.black,
                    passwordHint: "Enter Password",
                    applyEmailChanges: (value) {
                      checkEmail(value);
                    },
                    initialsSetAnimations: ['idle', 'look_idle'],
                    title: Text("Simple State Machine"),
                    validate: () {
                      print(email);
                      print(password);
                      Navigator.pop(context);
                    },
                  ),
                ));
              },
              child: Text("Simple State Machine"),
            ),
            MaterialButton(
              color: Colors.green,
              onPressed: () {
                Navigator.of(context).push(MaterialPageRoute(
                  builder: (_) => OneShotAnimationPage(
                    newSetAnimations: boolInputList[getIndex!],
                    initialsSetAnimations: ['idle', 'look_idle'],
                    title: Text("One shot animation"),
                    imageName: "assets/${getValue}.riv",
                    validate: () {
                      print(email);
                      print(password);
                      Navigator.pop(context);
                    },
                    applyPasswordChanges: (value) {
                      checkPassword(value);
                    },
                    buttonColor: Colors.green,
                    emailHint: "Enter Email Address",
                    colors: Colors.black,
                    passwordHint: "Enter Password",
                    applyEmailChanges: (value) {
                      checkEmail(value);
                    },
                    buttonTitle: "Submit",
                    isAsset: true,
                  ),
                ));
              },
              child: Text("One shot animation"),
            ),
            MaterialButton(
              color: Colors.green,
              onPressed: () {
                Navigator.of(context).push(MaterialPageRoute(
                  builder: (_) => CustomAnimationPage(
                    isAsset: true,
                    imageName: "assets/${getValue}.riv",
                    stateMachines: stateMachinesList[getIndex!],
                    boolInputList: boolInputList[getIndex!],
                    doubleInputList: doubleInputList.length > 1
                        ? doubleInputList[getIndex!]
                        : doubleInputList[0],
                    initialsSetAnimations: ['idle', 'look_idle'],
                    buttonColor: Colors.green,
                    applyPasswordChanges: (value) {
                      checkPassword(value);
                    },
                    validate: () {
                      print(email);
                      print(password);
                      Navigator.pop(context);
                    },
                    emailHint: "Enter Email Address",
                    colors: Colors.black,
                    passwordHint: "Enter Password",
                    applyEmailChanges: (value) {
                      checkEmail(value);
                    },
                    buttonTitle: "Submit",
                    title: Text("Custom Animation"),
                  ),
                ));
              },
              child: Text("Custom Animation"),
            ),
          ],
        ),
      ),
    );
  }

  checkEmail(String? value) {
    if (value!.isEmpty) {
      return "Email is required";
    } else {
      setState(() {
        email = value;
      });
    }
  }

  checkPassword(String? value) {
    if (value!.isEmpty) {
      return "Password is required";
    } else {
      setState(() {
        password = value;
      });
    }
  }
}

更多关于Flutter登录认证插件flutter_rive_login的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter登录认证插件flutter_rive_login的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


flutter_rive_login 是一个基于 Rive 动画的 Flutter 登录认证插件，它提供了一个带有动画效果的登录界面。Rive 是一个用于创建交互式动画的工具，通过 flutter_rive_login，你可以在应用中集成一个具有动态效果的登录界面，提升用户体验。

安装

首先，你需要在 pubspec.yaml 文件中添加 flutter_rive_login 依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_rive_login: ^1.0.0 # 请检查最新版本

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

使用步骤

  1. 导入包：
import 'package:flutter_rive_login/flutter_rive_login.dart';
  1. 创建一个 RiveLoginController：
final RiveLoginController _controller = RiveLoginController();
  1. 构建登录界面：
class LoginScreen extends StatelessWidget {
  final RiveLoginController _controller = RiveLoginController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: RiveLogin(
        controller: _controller,
        onLogin: (email, password) {
          // 处理登录逻辑
          print('Email: $email, Password: $password');
          // 你可以在这里调用你的登录API
        },
        onSignUp: (email, password) {
          // 处理注册逻辑
          print('Email: $email, Password: $password');
          // 你可以在这里调用你的注册API
        },
        onForgotPassword: (email) {
          // 处理忘记密码逻辑
          print('Email: $email');
          // 你可以在这里调用你的忘记密码API
        },
      ),
    );
  }
}
  1. 处理登录、注册和忘记密码逻辑：

在 onLogin、onSignUp 和 onForgotPassword 回调中，你可以处理相应的业务逻辑，例如调用 API 进行用户认证。

自定义选项

flutter_rive_login 提供了一些自定义选项，你可以根据需要调整登录界面的外观和行为。

  • background: 设置背景颜色或图片。
  • logo: 设置应用的 logo。
  • buttonColor: 设置按钮颜色。
  • textColor: 设置文本颜色。
RiveLogin(
  controller: _controller,
  onLogin: (email, password) {
    // 处理登录逻辑
  },
  onSignUp: (email, password) {
    // 处理注册逻辑
  },
  onForgotPassword: (email) {
    // 处理忘记密码逻辑
  },
  background: Colors.blue, // 设置背景颜色
  logo: Image.asset('assets/logo.png'), // 设置 logo
  buttonColor: Colors.green, // 设置按钮颜色
  textColor: Colors.white, // 设置文本颜色
);

示例代码

以下是一个完整的示例：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Rive Login Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: LoginScreen(),
    );
  }
}

class LoginScreen extends StatelessWidget {
  final RiveLoginController _controller = RiveLoginController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: RiveLogin(
        controller: _controller,
        onLogin: (email, password) {
          print('Email: $email, Password: $password');
          // 处理登录逻辑
        },
        onSignUp: (email, password) {
          print('Email: $email, Password: $password');
          // 处理注册逻辑
        },
        onForgotPassword: (email) {
          print('Email: $email');
          // 处理忘记密码逻辑
        },
        background: Colors.blue,
        logo: Image.asset('assets/logo.png'),
        buttonColor: Colors.green,
        textColor: Colors.white,
      ),
    );
  }
}
回到顶部