Flutter自定义组件插件dlwidgets的使用

DlWidgets

DlWidgets 是一个 Flutter 库，旨在通过提供一系列有用的可定制组件来简化开发过程。

特性

• 设计组件：减少开发密码文本字段和普通文本字段的时间。所有组件都是预先构建好的。

安装

要在您的 Flutter 项目中使用 DlWidgets，您需要将其作为依赖项添加到 pubspec.yaml 文件中：

dependencies:
  dl_widgets: ^1.0.0

然后，运行以下命令以获取包：

flutter pub get

使用

将 DlWidgets 包导入到您的 Dart 文件中：

import 'package:dl_widgets/dl_widgets.dart';

现在，您可以开始使用 DlWidgets 库了。以下是一个如何使用其中一个组件的示例：

登录页面演示

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

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

  [@override](/user/override)
  State<LoginPage> createState() => _State();
}

class _State extends State<LoginPage> {

  String? token;
  String? emailError;
  String? passwordError;
  String? tickerMessage;
  TickerType? tickerType;

  [@override](/user/override)
  void dispose() {
    // TODO: 实现 dispose 方法
    textEditingController.dispose();
    passwordController.dispose();
    super.dispose();
  }

  Future login(String email, String password, BuildContext context) async {
    token = "Make an API CALL for getting";
    setState(() {
      if(token != null) {
        ScaffoldMessenger.of(context).showSnackBar(const SnackBar(
            content: Text("Authenticated")
        ));
        tickerMessage = "Authenticated";
        tickerType = TickerType.success;
      } else {
        showDialog(context: context, builder: (context) => DlAlertDialog(dlAlertDialogImpl: alertDialog, showDialogFlag: showDialogF));
        ScaffoldMessenger.of(context).showSnackBar(const SnackBar(
            content: Text("Invalid user")
        ));
        tickerMessage = "Invalid user";
        tickerType = TickerType.error;
      }
    });
  }

  TextEditingController textEditingController = TextEditingController();
  TextEditingController passwordController = TextEditingController();
  late DlTextFormFieldImpl emailField;
  late DlAlertDialogImpl alertDialog;
  late DlTextFormFieldImpl passWordField;
  
  [@override](/user/override)
  void initState() {
    alertDialog = DlAlertDialogImpl(
      title: Text("Invalid User"),
      content: Text("Not allowed"),
      positiveAction: ElevatedButton(onPressed:(){}, child: Text("Yes")),
      negativeAction: ElevatedButton(onPressed:(){}, child: Text("No")),
      backgroundColor: Colors.white,
      shape: DialogShape.curved
    );

    emailField = DlTextFormFieldImpl(
      textEditingController, 
      (value) {
        setState(() {
          emailField.errorText = null;
          passWordField.errorText = null;
        });
      }, 
      emailError, 
      "Email"
    );
    passWordField = DlTextFormFieldImpl(
      textEditingController, 
      (value) {
        setState(() {
          emailField.errorText = null;
          passWordField.errorText = null;
        });
      }, 
      passwordError, 
      "Password"
    );
    
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Padding(padding: EdgeInsets.symmetric(vertical: MediaQuery.of(context).size.height / 5), child:
          SingleChildScrollView(
              physics: const BouncingScrollPhysics(),
              child: Center(child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Padding(padding: EdgeInsets.symmetric(horizontal: MediaQuery.of(context).size.width / 3), child: DlCardView(
                    child:  Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        DlTextFormField(isCenter: false, activeColor: Colors.blue, isPassword: false, input: emailField),
                        DlTextFormField(isCenter: false, activeColor: Colors.blue, isPassword: true, input: passWordField),
                        tickerType != null ? DlTicker(textInfo: tickerMessage ?? "", tickerType: tickerType) : Container()
                      ],
                    ),
                  )),
                  DlButton(buttonName: "Login", size: ButtonSize.small, onPressed: () {
                    setState(() {
                      if (emailField.textFieldController.text.isEmpty) {
                        emailField.errorText = "Email must not be empty";
                      }
                      if (passWordField.textFieldController.text.isEmpty) {
                        passWordField.errorText = "Password must not be empty";
                      }
                    });
                    login(emailField.textFieldController.text, passWordField.textFieldController.text, context);
                  }, buttonColor: Colors.blue),
                  Center(
                      child: Padding(padding: const EdgeInsets.all(24), child: GestureDetector(onTap: () {
                        Navigator.push(context, MaterialPageRoute(builder: (context) => const SignUpPage()));
                      }, child: const Text("Sign up", maxLines: 1, style: TextStyle(color: Colors.blue)),),
                      ))
                ],
              )))),
        ],
      ),
    );
  }
}