Flutter实用工具插件kd_utils的使用

Flutter实用工具插件kd_utils的使用

kd_utils 是一个帮助开发者在 Flutter 中快速和流畅地进行开发的实用工具库。它包含了许多有用的 widget 和方法，可以提高开发效率。

开始使用

首先，你需要将 kd_utils 添加到你的项目依赖中。你可以在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  kd_utils: ^x.x.x

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

导入库

在你的 Dart 文件中导入 kd_utils 库：

import 'package:kd_utils/kd_utils.dart';

时间戳转换

kd_utils 提供了方便的方法来处理日期和时间。例如，你可以将时间戳转换为 DateTime 对象。

final DateTime date = timeStampToDateTime("1694160861");
print(date); // 输出: 2023-09-08 13:44:21.000

final weekDay = getWeekDay(1, short: true);
print(weekDay); // 输出: Mon

日期选择器

kd_utils 还提供了日期选择器 DatePickerView，可以方便地让用户选择日期。

DatePickerView(
  currentDate: DateTime.now(),
  startDate: DateTime.now().subtract(Duration(days: 50)),
  endDate: DateTime.now().add(Duration(days: 50)),
  weekday: TextStyle(fontSize: 12, fontWeight: FontWeight.bold),
  decoration: BoxDecoration(borderRadius: BorderRadius.circular(10)),
  onDateClick: (selectedDate) {
    print(selectedDate);
  },
),

验证码输入框

kd_utils 还提供了一个验证码输入框 OTPView，用于快速实现验证码输入功能。

OTPView(
  otpCount: 5,
  style: OTPStyle(
      cursorColor: Colors.green,
      maxHeight: 60,
      inputBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(8),
        borderSide: BorderSide(
          color: Colors.green,
          width: 3,
        ),
      ),
      isDense: true,
      space: 20),
  onSubmit: (otp) {
    log(otp.toString());
  },
  controller: TextEditingController(),
)

扩展方法

kd_utils 还提供了一些扩展方法，可以在 Widget 和 BuildContext 上使用。

Widget 扩展方法

200.height,

10.width,

Context 扩展方法

ThemeData themeData = context.theme;

EdgeInsets padding = context.viewPadding;

Size screenSize = context.screenSize;

double screenWidth = context.screenWidth;

double screenHeight = context.screenHeight;

完整示例

以下是一个完整的示例，展示了如何在 Flutter 应用中使用 kd_utils。

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('kd_utils 示例'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              DatePickerView(
                currentDate: DateTime.now(),
                startDate: DateTime.now().subtract(Duration(days: 50)),
                endDate: DateTime.now().add(Duration(days: 50)),
                weekday: TextStyle(fontSize: 12, fontWeight: FontWeight.bold),
                decoration: BoxDecoration(borderRadius: BorderRadius.circular(10)),
                onDateClick: (selectedDate) {
                  print(selectedDate);
                },
              ),
              SizedBox(height: 20.height),
              OTPView(
                otpCount: 5,
                style: OTPStyle(
                    cursorColor: Colors.green,
                    maxHeight: 60,
                    inputBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(8),
                      borderSide: BorderSide(
                        color: Colors.green,
                        width: 3,
                      ),
                    ),
                    isDense: true,
                    space: 20),
                onSubmit: (otp) {
                  log(otp.toString());
                },
                controller: TextEditingController(),
              ),
            ],
          ),
        ),
      ),
    );
  }
}