Flutter工具集插件obm_tools的使用

Getting started（开始使用）

Installing（安装）

在您的pubspec.yaml文件中添加以下内容：

dependencies:
  obm_tools: ^latest

Import（导入）

import 'package:obm_tools/obm_tools.dart';

Usage（使用）

get screen size（获取屏幕尺寸）

// 获取屏幕高度
double height = ScreenSize(context).height;

// 获取屏幕宽度
double width = ScreenSize(context).width;

get time by timezone（按时区获取时间）

getTimeZone() {
    Timer.periodic(const Duration(seconds: 1), (timer) async {
        DateTime dateTime = await ObmTools().getDateTime(timeZone ?? "Asia/Jakarta");
        setState(() {
            time = DateFormat("yyyy-MM-dd HH:mm:ss").format(dateTime);
        });
    });
}

get connectifity（检查网络连接）

Future<bool> checkConnection() async {
    var connectivityResult = await ObmTools().connection();
    setState(() {
      connections = connectivityResult!.name;
    });
    // connectivityResult.name = "wifi" / "mobile"
    switch (connectivityResult!.name) {
      case "mobile":
        return true;
      case "wifi":
        return true;
      default:
        return false;
    }
}

get ip address（获取IP地址）

getIp() async {
    var ip = await ObmTools().getIpAddress();
    setState(() {
      ipAddress = ip;
    });
}

Custom Text Form Field widget and Email Validator（自定义文本表单字段和电子邮件验证器）

ObmTextFormField(
    controller: emailController,
    autoFocus: false,
    textInputAction: TextInputAction.next,
    keyboardType: TextInputType.emailAddress,
    labelText: "Email",
    validator: (input) {
    if (input!.isEmpty) {
        return "Input your email";
    } else {
        // 邮件验证
        if (!(EmailValidator.validate(input))) {
        return "Input your valid Email";
        } else {
        return null;
        }
    }
    },
    prefixIcon: const Icon(
    Icons.account_circle_outlined,
    color: Colors.black,
    ),
    hintText: "Email",
),

Custom Text Form Field with currency formater（带货币格式的自定义文本表单字段）

ObmTextFormField(
    controller: currencyController,
    autoFocus: false,
    isCurrency: true,
    prefixText: currencyController.text.isEmpty ? '' : 'Rp ',
    currencyCodeZone: "id_ID",
    textInputAction: TextInputAction.next,
    keyboardType: TextInputType.number,
    labelText: "Amount Money",
    validator: (input) {
    if (input!.isEmpty) {
        return "Input your amount money";
    } else {
        return null;
    }
    },
    hintText: "Rp 1.500.000",
),

Custom Button（自定义按钮）

ObmButton(
    buttonLabel: "Submit",
    buttonWidth: double.infinity,
    buttonColor: Colors.orange,
    borderRadius: 5.0,
    press: () {
    submit();
    },
),

示例代码

以下是完整的示例代码，展示了如何使用obm_tools插件。

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:obm_tools/obm_tools.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Obm Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const ObmPage(),
    );
  }
}

class ObmPage extends StatefulWidget {
  const ObmPage({super.key});

  [@override](/user/override)
  State<ObmPage> createState() => _ObmPageState();
}

class _ObmPageState extends State<ObmPage> {
  String? time;
  String? timeZone;
  String? connections;
  bool? connected;
  String? ipAddress;
  List<MultiLevelString> myItems = [
    MultiLevelString(level1: "1"),
    MultiLevelString(level1: "2"),
    MultiLevelString(
      level1: "3",
      subLevel: [
        MultiLevelString(level1: "sub3-1"),
        MultiLevelString(level1: "sub3-2"),
      ],
    ),
    MultiLevelString(level1: "4")
  ];
  MultiLevelString selectedItems = MultiLevelString(level1: "1");

  GlobalKey<FormState> formkey = GlobalKey<FormState>();
  TextEditingController emailController = TextEditingController();
  TextEditingController currencyController = TextEditingController();

  [@override](/user/override)
  void initState() {
    setState(() {
      timeZone = "Asia/Jakarta";
    });
    initialApp();
    super.initState();
  }

  initialApp() async {
    getTimeZone();
    Timer.periodic(const Duration(milliseconds: 1), (timer) async {
      var connect = await checkConnection();
      setState(() {
        connected = connect;
      });
    });

    getIp();
  }

  // 获取时间
  getTimeZone() {
    Timer.periodic(const Duration(seconds: 1), (timer) async {
      DateTime dateTime = await ObmTools().getDateTime(timeZone ?? "Asia/Jakarta");
      setState(() {
        time = DateFormat("yyyy-MM-dd HH:mm:ss").format(dateTime);
      });
    });
  }

  // 检查网络连接
  Future<bool> checkConnection() async {
    var connectivityResult = await ObmTools().connection();
    setState(() {
      connections = connectivityResult!.name;
    });
    switch (connectivityResult!.name) {
      case "mobile":
        return true;
      case "wifi":
        return true;
      default:
        return false;
    }
  }

  // 获取IP地址
  getIp() async {
    var ip = await ObmTools().getIpAddress();
    setState(() {
      ipAddress = ip;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.all(20.0),
            child: Center(
              child: Form(
                key: formkey,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    // 显示时区
                    SizedBox(
                      width: double.infinity,
                      child: Text(
                        "TIME ZONE : ${timeZone ?? "..."}",
                        textAlign: TextAlign.center,
                        style: const TextStyle(fontSize: 20.0),
                      ),
                    ),
                    // 显示当前时间
                    SizedBox(
                      width: double.infinity,
                      child: Text(
                        time ?? "...",
                        textAlign: TextAlign.center,
                        style: const TextStyle(fontSize: 20.0),
                      ),
                    ),
                    const SizedBox(height: 20.0),
                    // 显示网络状态图标
                    Icon(
                      connected ?? false ? Icons.wifi_outlined : Icons.wifi_off_outlined,
                      size: 50.0,
                      color: connected ?? false ? Colors.green : Colors.red,
                    ),
                    const SizedBox(height: 10.0),
                    // 显示网络连接类型
                    SizedBox(
                      width: double.infinity,
                      child: Text(
                        "Connection : ${connections ?? "..."}",
                        textAlign: TextAlign.center,
                        style: const TextStyle(fontSize: 20.0),
                      ),
                    ),
                    const SizedBox(height: 10.0),
                    // 显示IP地址
                    SizedBox(
                      width: double.infinity,
                      child: Text(
                        "IP Address : ${ipAddress ?? "..."}",
                        textAlign: TextAlign.center,
                        style: const TextStyle(fontSize: 20.0),
                      ),
                    ),
                    const SizedBox(height: 20.0),
                    // 自定义文本表单字段（电子邮件）
                    ObmTextFormField(
                      controller: emailController,
                      autoFocus: false,
                      textInputAction: TextInputAction.next,
                      keyboardType: TextInputType.emailAddress,
                      labelText: "Email",
                      validator: (input) {
                        if (input!.isEmpty) {
                          return "Input your email";
                        } else {
                          if (!(EmailValidator.validate(input))) {
                            return "Input your valid Email";
                          } else {
                            return null;
                          }
                        }
                      },
                      prefixIcon: const Icon(Icons.account_circle_outlined, color: Colors.black),
                      hintText: "Email",
                    ),
                    const SizedBox(height: 20.0),
                    // 带货币格式的自定义文本表单字段
                    ObmTextFormField(
                      controller: currencyController,
                      autoFocus: false,
                      isCurrency: true,
                      prefixText: currencyController.text.isEmpty ? '' : 'Rp ',
                      currencyCodeZone: "id_ID",
                      textInputAction: TextInputAction.next,
                      keyboardType: TextInputType.number,
                      labelText: "Amount Money",
                      validator: (input) {
                        if (input!.isEmpty) {
                          return "Input your amount money";
                        } else {
                          return null;
                        }
                      },
                      hintText: "Rp 1.500.000",
                    ),
                    const SizedBox(height: 20.0),
                    // 自定义提交按钮
                    ObmButton(
                      buttonLabel: "Submit",
                      buttonWidth: double.infinity,
                      buttonColor: Colors.orange,
                      borderRadius: 5.0,
                      press: () {
                        submit();
                      },
                    ),
                    const SizedBox(height: 20.0),
                    // 下拉搜索框
                    ObmDropDownSearch<MultiLevelString>(
                      items: myItems,
                      labelText: "",
                      showSearchBox: true,
                      hintColor: Colors.black12,
                      fontColor: Colors.black,
                      onChanged: (value) {
                        setState(() {
                          selectedItems = value!;
                        });
                      },
                      validator: (input) {
                        if (input == null) {
                          return "Select your choice";
                        } else {
                          return null;
                        }
                      },
                      selectedItem: selectedItems,
                      itemAsString: (MultiLevelString u) => u.level1,
                    ),
                  ],
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }

  submit() {
    if (formkey.currentState!.validate()) {}
  }
}

class MultiLevelString {
  final String level1;
  final List<MultiLevelString> subLevel;
  bool isExpanded;

  MultiLevelString({
    this.level1 = "",
    this.subLevel = const [],
    this.isExpanded = false,
  });

  MultiLevelString copy({
    String? level1,
    List<MultiLevelString>? subLevel,
    bool? isExpanded,
  }) =>
      MultiLevelString(
        level1: level1 ?? this.level1,
        subLevel: subLevel ?? this.subLevel,
        isExpanded: isExpanded ?? this.isExpanded,
      );

  [@override](/user/override)
  String toString() => level1;
}

更多关于Flutter工具集插件obm_tools的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

ionicwang 1楼

更多关于Flutter工具集插件obm_tools的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

obm_tools 是一个 Flutter 插件，旨在为开发者提供一系列实用的工具和功能，以简化开发流程并提高效率。以下是如何使用 obm_tools 插件的基本指南。

1. 安装插件

首先，你需要在 pubspec.yaml 文件中添加 obm_tools 插件的依赖项。

dependencies:
  flutter:
    sdk: flutter
  obm_tools: ^1.0.0  # 请确保使用最新版本

然后，运行以下命令来安装依赖项：

flutter pub get

2. 导入插件

在你的 Dart 文件中导入 obm_tools 插件：

import 'package:obm_tools/obm_tools.dart';

3. 使用插件中的工具

obm_tools 插件可能包含多种工具和功能，以下是可能包含的一些示例功能：

3.1 网络请求工具

假设插件中提供了一个简单的网络请求工具：

void fetchData() async {
  var response = await OBMHttp.get('https://api.example.com/data');
  print(response.body);
}

3.2 数据存储工具

插件可能还提供了本地数据存储的功能：

void saveData() async {
  await OBMStorage.saveString('key', 'value');
}

void readData() async {
  String value = await OBMStorage.readString('key');
  print(value);
}

3.3 常用工具函数

插件中可能还包含一些常用的工具函数，例如：

void checkNetwork() async {
  bool isConnected = await OBMUtils.isNetworkAvailable();
  print(isConnected ? 'Connected' : 'Not connected');
}

4. 运行示例

你可以在你的应用中调用这些工具函数来测试它们的功能。例如：

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('OBM Tools Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              fetchData();
              saveData();
              readData();
              checkNetwork();
            },
            child: Text('Run Tools'),
          ),
        ),
      ),
    );
  }
}