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

概述

my_widgets 是一个由 Bilal MurtaZa 创建的Flutter包，提供了多种可复用的组件、工具函数、对话框和服务，旨在简化Flutter应用开发中的常见任务。该包允许开发者通过一行代码实现复杂功能。

特性

• 提供常用的可复用组件如 Btn, Txt, Input, Dialogs, Dates 等。
• 自定义对话框如 OverlayLoading 和 DialogForPage。
• 工具函数包括共享偏好设置 (Pref)、日期格式化 (Dates) 和HTTP请求 (HttpCalls)。
• 支持用户通过内置函数更改整个应用程序的颜色。

开始使用

设置应用程序颜色

在 main() 函数之前调用以下代码来设置颜色方案：

WidgetsFlutterBinding.ensureInitialized();

String prdBaseURL = 'https://xvz/api/'; // 可选
String stgBaseURL = 'https://xvz/api/'; // 可选
await pSetSettings(
    primaryColor: Colors.blueAccent,
    secondaryColor: Colors.white,
    defaultImage: 'assets/images/avatar.png',
    defImageIsAsset: true,
    baseUrlLive: prdBaseURL,
    baseUrlTest: stgBaseURL,
    isLive: false,
    defaultRadius: Siz.defaultRadius,
    defaultBtnHeight: Siz.defaultBtnHeight,
    txtInputHasBorder: true,
    txtInputHasLabel: true,
    txtInputHasLabelOnTop: true,
    txtInputHasLabelWithStar: false,
    txtInoutDefaultContentPadding: const EdgeInsets.symmetric(horizontal: 10),
    fontWeight: FontWeight.w600,
    defaultFontSize: Siz.body17,
    localization: 'ar',
    onHttpCallError: callHttpError
);
runApp(const MyApp());
runMain();

使用共享偏好设置

如果需要使用共享偏好设置，请确保在 pSetSettings 之前调用 Pref.getPref()：

await Pref.getPref();
pSetSettings();
runMain();

本地化日期

若需本地化日期，请在 pSetSettings 之前调用 Dates.initializeDateFormat()：

await Dates.initializeDateFormat();
pSetSettings();
runMain();

示例 Demo

以下是完整的示例代码，展示如何使用 my_widgets 包中的组件和功能：

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:my_widgets/dialogs/dialogs.dart';
import 'package:my_widgets/my_widgets.dart';
import 'package:my_widgets/utils/pref.dart';
import 'package:my_widgets/widgets/btn.dart';
import 'package:my_widgets/widgets/input.dart';
import 'package:my_widgets/widgets/txt.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Pref.getPref();

  String stgBaseURL = 'https://xvz/api/';
  await pSetSettings(
      primaryColor: Colors.blueAccent,
      secondaryColor: Colors.white,
      defaultImage: 'assets/images/avatar.png',
      defImageIsAsset: true,
      baseUrlLive: stgBaseURL,
      baseUrlTest: stgBaseURL,
      isLive: false,
      defaultRadius: 8.0,
      defaultBtnHeight: 45.0,
      txtInputHasBorder: true,
      txtInputHasLabel: true,
      txtInputHasLabelOnTop: true,
      txtInputHasLabelWithStar: false,
      txtInoutDefaultContentPadding: const EdgeInsets.symmetric(horizontal: 10),
      fontWeight: FontWeight.w600,
      defaultFontSize: 17.0,
      localization: 'ar',
      onHttpCallError: callHttpError);

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('My Widgets Example'),
        ),
        body: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final TextEditingController inputController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(30.0),
      child: ListView(
        children: [
          Txt('Hello World!', textColor: Colors.blue, hasBold: true),
          SizedBox(height: 20),
          TxtFormInput(
            controller: inputController,
            hintText: 'Enter text here',
            hasBorder: true,
            radius: 8.0,
          ),
          SizedBox(height: 20),
          BtnSF(
            text: 'Show Dialog',
            onPressed: () {
              Dialogs.showCustomDialog(body: Center(child: Text('This is a dialog')));
            },
            bgColor: Colors.green,
          ),
        ],
      ),
    );
  }
}

callHttpError(dynamic error, response, bool? defaultResponse) {
  print('Error occurred: $error');
}

Android 和 iOS 配置

URL Launcher 配置

Android

在 AndroidManifest.xml 中添加以下查询：

<queries>
    <intent>
        <action android:name="android.intent.action.VIEW" />
        <data android:scheme="sms" />
    </intent>
    <intent>
        <action android:name="android.intent.action.VIEW" />
        <data android:scheme="tel" />
    </intent>
    <intent>
        <action android:name="android.intent.action.VIEW" />
        <data android:scheme="http" />
    </intent>
    <intent>
        <action android:name="android.intent.action.VIEW" />
        <data android:scheme="https" />
    </intent>
    <intent>
        <action android:name="android.intent.action.SEND" />
        <data android:mimeType="*/*" />
    </intent>
</queries>

iOS

在 info.plist 中添加以下条目：

<key>LSApplicationQueriesSchemes</key>
<array>
    <string>sms</string>
    <string>tel</string>
    <string>http</string>
    <string>https</string>
</array>