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

custom_widgets_2

这个包包含了一组在任何Flutter项目中都不可或缺的自定义组件。这些组件旨在提供易于处理的功能并增强用户体验。

包含的组件

• CustomElevatedButton: 一个具有多种样式选项的可定制按钮组件。
• CustomTextField: 一个具有验证和输入格式化等附加功能的自定义文本字段组件。
• CustomText: 一个带有文本的自定义Text组件。
• CustomDropDownButton: 一个多下拉项的自定义下拉按钮组件。
• CustomSteper: 一个步骤指示器的自定义组件。
• CustomCachNetwork: 一个用于显示网络图片的缓存网络组件。
• CustomDivider: 一个用于显示分隔线的自定义组件。
• ContainerSadow: 一个带阴影效果的容器组件。
• sh: 一个具有高度的SizedBox组件。
• sw: 一个具有宽度的SizedBox组件。

安装

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

dependencies:
  custom_widgets_2: <last version>

将<last version>替换为在pub.dev上可用的最新版本。

然后运行以下命令来安装包：

flutter pub get

使用

在你的Dart代码中导入包：

import 'package:custom_widgets_2/custom_widgets_2.dart';

现在，你可以在Flutter应用中使用这些自定义组件了。这里是一个如何使用CustomElevatedButton组件的例子：

CustomElevatedButton(
  onPressed: () {
    // 添加你的按钮点击逻辑
  },
  child: CustomText(text:"点击我"),
  color: Colors.blue,
),

请参阅每个组件的文档以获取详细的使用说明和自定义选项。

贡献

欢迎对这个包进行贡献！如果你遇到任何问题或有任何改进建议，请随时在GitHub上提交一个问题或拉取请求。

许可证

该包遵循GNU通用公共许可证。

示例代码

下面是使用custom_widgets_2包的一个完整示例：

import 'package:custom_widgets_2/custom_widgets_2.dart';
import 'package:flutter/material.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(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: false,
      ),
      debugShowCheckedModeBanner: false,
      home: const MyHomePage(),
    );
  }
}

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

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Align(
        alignment: Alignment.bottomCenter,
        child: ContainerShadow(
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height / 1.1,
          padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 10),
          margin: const EdgeInsets.symmetric(horizontal: 10, vertical: 10),
          child: SingleChildScrollView(
            child: Column(
              children: [
                const CustomText(
                  text: "自定义文本",
                  color: Colors.purple,
                  fontSize: 22,
                ),
                10.sh,
                const CustomTextField(
                  labelText: '自定义文本表单字段',
                  hintText: "提示文本",
                  hintStyle: TextStyle(fontSize: 15),
                  labelAlign: TextAlign.start,
                  labelTextSize: 16,
                  fillColor: Colors.amber,
                  inputBorder: OutlineInputBorder(),
                  enabledBorder: OutlineInputBorder(),
                ),
                10.sh,
                CustomElevatedButton(
                  onPressed: () {
                    ScaffoldMessenger.of(context).showSnackBar(
                      const SnackBar(
                        content: CustomText(
                          text: '自定义提升按钮',
                        ),
                      ),
                    );
                  },
                  color: Colors.green,
                  borderRadius: BorderRadius.circular(3),
                  child: const CustomText(
                    text: "自定义提升按钮",
                    color: Colors.white,
                  ),
                ),
                10.sh,
                const Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        CustomDivider(
                          isHor: false,
                          height: 145,
                          thickness: 5,
                        ),
                        RotatedBox(
                            quarterTurns: 1,
                            child: Text('垂直分割线')),
                      ],
                    ),
                    Column(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text('水平分割线'),
                        CustomDivider(
                          thickness: 5,
                          width: 160,
                        ),
                      ],
                    ),
                  ],
                ),
                10.sh,
                CustomDropDownButton(
                  items: const [1, 2, 3],
                  hintText: '选择',
                  newValue: selectValue,
                  onChanged: (value) {
                    setState(() {
                      selectValue = value;
                    });
                  },
                  itemColor: Colors.black,
                  labelColor: Colors.black,
                  labelText: "自定义下拉框",
                  fillColor: Colors.green,
                  inputBorder: const OutlineInputBorder(),
                  enabledBorder: const OutlineInputBorder(),
                ),
                10.sh,
                SizedBox(
                  height: MediaQuery.of(context).size.height / 12.5,
                  child: CustomSteper(
                    size: MediaQuery.of(context).size.width / 10,
                    notActiveColor: Colors.black.withOpacity(.2),
                    activeColor: Colors.green,
                    padding: EdgeInsets.zero,
                    shrinkWrap: false,
                    direction: Axis.horizontal,
                    currentStep: 0,
                    labelText: '自定义步骤指示器',
                    steps: stepOne(0),
                  ),
                ),
                10.sh,
                SizedBox(
                  width: MediaQuery.of(context).size.width,
                  child: const CustomText(
                    text: '自定义网络图片',
                    textAlign: TextAlign.start,
                  ),
                ),
                const CustomCacheNetwork(
                  url: 'https://th.bing.com/th/id/OIG4.LgUj9FIjzUbdTSMn0mRg',
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

  var selectValue;

  stepOne(int activeStep) => List.generate(
      3,
      (index) => activeStep >= index
          ? const StepWidget()
          : Text((index + 1).toString())).toList();
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const Icon(
      Icons.check,
      color: Colors.white,
    );
  }
}