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 回复

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


当然,以下是一个使用 flutter_animated_login 插件创建动画登录界面的示例代码。这个插件可以帮助你快速实现一个带有动画效果的登录界面。

首先,你需要在你的 pubspec.yaml 文件中添加 flutter_animated_login 依赖:

dependencies:
  flutter:
    sdk: flutter
  flutter_animated_login: ^x.y.z  # 请替换为最新版本号

然后运行 flutter pub get 来获取依赖。

接下来,你可以在你的 Dart 文件中使用 FlutterAnimatedLogin 小部件来创建登录界面。以下是一个完整的示例代码:

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

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

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

class LoginScreen extends StatefulWidget {
  @override
  _LoginScreenState createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> {
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
  String _email = '';
  String _password = '';

  void _submit() {
    if (_formKey.currentState?.validate() ?? false) {
      _formKey.currentState?.save();
      // 在这里处理登录逻辑,例如发送网络请求
      print('Email: $_email');
      print('Password: $_password');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Animated Login Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: FlutterAnimatedLogin(
          title: 'Sign In',
          subTitle: 'Enter your credentials below',
          logo: Image.asset('assets/logo.png'), // 使用你自己的logo图片
          formKey: _formKey,
          animationDuration: Duration(milliseconds: 500),
          animationCurve: Curves.easeInOut,
          controller: AnimationController(
            vsync: VsyncController(),
            duration: Duration(milliseconds: 1000),
          )..repeat(reverse: true),
          onLogin: _submit,
          child: Form(
            key: _formKey,
            child: Column(
              children: [
                TextFormField(
                  decoration: InputDecoration(labelText: 'Email'),
                  validator: (value) {
                    if (value == null || value.isEmpty) {
                      return 'Please enter your email';
                    }
                    return null;
                  },
                  onSaved: (value) {
                    _email = value;
                  },
                ),
                SizedBox(height: 16),
                TextFormField(
                  decoration: InputDecoration(labelText: 'Password'),
                  obscureText: true,
                  validator: (value) {
                    if (value == null || value.isEmpty) {
                      return 'Please enter your password';
                    }
                    return null;
                  },
                  onSaved: (value) {
                    _password = value;
                  },
                ),
                SizedBox(height: 24),
                AnimatedLoginButton(
                  onPressed: () {
                    if (_formKey.currentState?.validate() ?? false) {
                      _formKey.currentState?.save();
                      // 触发登录按钮点击事件
                    }
                  },
                  animationDuration: Duration(milliseconds: 300),
                  animationCurve: Curves.easeInOut,
                  child: Text('Login'),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

在这个示例中,我们创建了一个简单的登录界面,包含电子邮件和密码输入框以及一个登录按钮。FlutterAnimatedLogin 小部件用于包装整个表单,并应用动画效果。

请注意以下几点:

  1. Logo:示例中使用了一个 Image.asset('assets/logo.png'),你需要确保在项目的 assets 文件夹中有一个名为 logo.png 的图片文件。
  2. 动画控制:我们创建了一个 AnimationController 来控制动画,但在这个简单示例中,动画是循环播放的。在实际应用中,你可能希望根据用户交互来控制动画的播放。
  3. 表单验证:使用 FormTextFormField 来创建表单,并添加基本的验证逻辑。

你可以根据需要进一步定制和扩展这个示例。

回到顶部