Flutter动画登录界面插件rameez_animated_login_screen的使用

Flutter动画登录界面插件rameez_animated_login_screen的使用

特性

这是一个带有动画效果的登录界面。如果你传递一个名为 Test.flr 的 Flare 图像（可以在示例文件夹中找到），它将自动处理动画。

开始使用

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

dependencies:
  rameez_animated_login_screen: ^版本号

然后运行 flutter pub get 来安装包。

使用示例

示例代码可以在 /example 文件夹中找到。以下是使用该插件的基本示例：

import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:rameez_animated_login_screen/login_data.dart';
import 'package:rameez_animated_login_screen/rameez_animated_login_screen.dart';

import 'firstpage.dart';

void main() => runApp(const App());

class App extends StatelessWidget {
  const App({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Login Screen',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const HomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Container(
            decoration: const BoxDecoration(
              image: DecorationImage(
                image: AssetImage("assets/a.jpg"),
                fit: BoxFit.cover,
              ),
            ),
            child: Align(
              alignment: Alignment.center,
              child: RameezAnimatedLoginScreen(
                //flareController: flareController,
                passwordFieldCaretMovement: (Offset globalCaretPosition) {},
                userFieldCaretMovement: (Offset globalCaretPosition) {},
                flareImage: 'assets/Test.flr',
                routeAfterSuccessFulSignIn: () {
                  Navigator.of(context).push(
                    MaterialPageRoute<void>(
                      builder: (BuildContext context) => const Page1(),
                    ),
                  );
                },
                validateUserNameAndPassword: validate,
                defaultAnimation: true,
                passwordLabel: 'Enter Password',
                usernameLabel: 'Enter User Name',
                themeBasedtextColor: Colors.black,
              ),
            )));
  }

  Future<bool> validate(LoginData loginData) {
    print(loginData.password);
    print(loginData.name);
    if (loginData.name == "ram" && loginData.password == "rame") {
      return Future.value(true);
    }
    return Future.value(false);
  }
}

动画效果

下图展示了该登录界面的示例效果：

如何展示示例

额外信息

请提供建议以改进此插件，因为它是我发布的第一个包，我会继续学习和改进。


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

1 回复

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


当然，下面是一个使用 rameez_animated_login_screen 插件来创建 Flutter 动画登录界面的代码示例。这个插件提供了一个具有动画效果的登录界面，非常适合用于提升用户体验。

首先，确保你的 Flutter 项目中已经添加了 rameez_animated_login_screen 依赖。在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flutter:
    sdk: flutter
  rameez_animated_login_screen: ^最新版本号  # 请替换为最新版本号

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

接下来，在你的 Dart 文件中（例如 main.dart），你可以按照以下方式使用 RameezAnimatedLoginScreen 小部件来创建动画登录界面：

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

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

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

class AnimatedLoginScreen extends StatefulWidget {
  @override
  _AnimatedLoginScreenState createState() => _AnimatedLoginScreenState();
}

class _AnimatedLoginScreenState extends State<AnimatedLoginScreen> {
  final _formKey = GlobalKey<FormState>();
  String? _email;
  String? _password;

  void _submit() {
    if (_formKey.currentState!.validate()) {
      _formKey.currentState!.save();
      // 在这里处理登录逻辑，例如调用API
      print('Email: $_email');
      print('Password: $_password');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: RameezAnimatedLoginScreen(
        title: "Login",
        subTitle: "Please enter your credentials",
        formKey: _formKey,
        onSubmit: _submit,
        child: Form(
          key: _formKey,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              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: 20),
              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: 20),
              ElevatedButton(
                onPressed: _formKey.currentState!.validate() ? () => _submit() : null,
                child: Text('Login'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

代码解释：

  1. 依赖导入：首先，我们导入了必要的 Flutter 和 rameez_animated_login_screen 插件。
  2. 应用入口：在 MyApp 类中，我们定义了应用的入口，并设置了主题和主页为 AnimatedLoginScreen。
  3. 登录界面状态管理：在 AnimatedLoginScreen 类中，我们创建了一个有状态的小部件，并定义了一些必要的变量和表单键。
  4. 表单验证和保存：在 _AnimatedLoginScreenState 类中，我们定义了 _submit 方法来处理表单提交和验证。
  5. RameezAnimatedLoginScreen 使用：我们使用了 RameezAnimatedLoginScreen 小部件，并传入了标题、副标题、表单键和提交回调。在 child 属性中，我们定义了实际的表单内容。

这段代码展示了如何使用 rameez_animated_login_screen 插件来创建一个具有动画效果的登录界面，并处理表单验证和提交。希望这对你有所帮助！

回到顶部