Flutter动画登录界面插件flutter_animated_login的使用
Flutter动画登录界面插件flutter_animated_login的使用
简介
flutter_animated_login 是一个Flutter包,用于创建带有动画效果的登录界面。该插件支持通过电话/邮箱OTP、密码以及社交登录选项进行登录,并且包含了一个国家代码选择器的电话号码输入框。
安装
要使用此插件,请运行以下命令:
flutter pub add flutter_animated_login
或者,在你的 pubspec.yaml 文件中添加以下依赖:
dependencies:
flutter_animated_login: ^<latest_version>
如果你想要使用最新的开发版本,可以使用 git 语法:
dependencies:
flutter_animated_login:
git:
url: git://github.com/rvndsngwn/flutter_animated_login.git
ref: main
使用方法
创建 FlutterAnimatedLogin 小部件
你可以通过创建一个 FlutterAnimatedLogin 小部件并传递必要的参数来使用该插件。以下是一个完整的示例代码:
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_animated_login/flutter_animated_login.dart';
void main() {
runApp(const MyApp());
}
// 使用 ValueNotifier 来管理主题模式
ValueNotifier<bool> isDark = ValueNotifier<bool>(true);
class MyApp extends StatelessWidget {
const MyApp({super.key});
[@override](/user/override)
Widget build(BuildContext context) {
return ValueListenableBuilder(
valueListenable: isDark,
builder: (context, value, child) => MaterialApp(
title: 'Flutter Animated Login',
// 根据 isDark 的值切换主题模式
themeMode: value ? ThemeMode.dark : ThemeMode.light,
// 设置主题样式
theme: ThemeData.light(),
darkTheme: ThemeData.dark(),
debugShowCheckedModeBanner: false,
home: Scaffold(
floatingActionButton: FilledButton(
onPressed: () => isDark.value = !isDark.value,
child: value
? const Text("Login with OTP")
: const Text("Login with Password"),
),
body: FlutterAnimatedLogin(
// 根据 isDark 的值切换登录类型
loginType: value ? LoginType.password : LoginType.otp,
onLogin: (loginData) async {
// 模拟登录请求
final result = await Future.delayed(
const Duration(seconds: 2),
() => '',
);
// 隐藏键盘
SystemChannels.textInput.invokeMethod('TextInput.hide');
// 结束自动填充上下文
TextInput.finishAutofillContext();
return result;
},
loginConfig: const LoginConfig(
logo: FlutterLogo(size: 100), // 登录页面的Logo
title: 'Mohesu Enterprise', // 登录页面的标题
subtitle: 'Let\'s Sign In', // 登录页面的副标题
),
providers: [
LoginProvider(
icon: Icons.reddit, // 社交登录图标
label: 'Reddit', // 社交登录标签
callback: () async {
return ""; // 社交登录回调
},
),
LoginProvider(
icon: Icons.apple,
label: 'Apple',
callback: () async {
return "";
},
),
LoginProvider(
icon: Icons.facebook,
label: 'Facebook',
callback: () async {
return "";
},
),
],
),
),
),
);
}
}
更多关于Flutter动画登录界面插件flutter_animated_login的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复


