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

发布于 1周前 作者 eggper 来自 Flutter

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

概述

“We Over I Flutter Widgets” 插件是一个包含常用 Flutter 组件的综合库。我们已将所有开发的组件汇集到一个方便的库中，使其易于访问并为每个人带来好处。

目录

组件

以下是该插件中包含的组件列表。您可以访问以下链接了解这些组件的所有变体。

安装

在 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  weoveri_flutter_widgets: ^0.1.3

在 Dart 文件中导入该包：

import 'package:weoveri_flutter_widgets/woi_widgets.dart';

使用

使用方式与 Flutter 的 TextButton 组件类似。例如，使用 WOITextButton 组件的示例如下：

WOITextButton(
  text: '确认',
)

有关所有支持字段及其用法的详细信息，请参阅 API 参考文档。

示例代码

以下是一个完整的示例代码，展示了如何使用 weoveri_flutter_widgets 插件中的不同组件。

import 'package:flutter/material.dart';
import 'package:weoveri_flutter_widgets/graphs/line_graph/data_line_properties.dart';
import 'package:weoveri_flutter_widgets/woi_widgets.dart';

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

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with TickerProviderStateMixin {
  bool switchValue = false;
  int currentIndex = 0;
  int currentStepperIndex = 0;

  void updateCurrentIndex(int index) {
    currentIndex = index;
    setState(() {});
  }

  Widget stepperWidgets() {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        //----------Steppers-------------//
        stepperWidget(),
        stepperButtons(),
      ],
    );
  }

  Widget simpleWidgets() {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        //----------Capsule Button-------------//
        SizedBox(
          width: 250,
          child: WOITextButton(
            text: '提交'.toUpperCase(),
            onTap: () {},
            buttonStyle: WOIButtonStyle(
              prefixWidget: const SizedBox(
                child: Icon(
                  Icons.link,
                  color: Colors.white,
                  size: 20,
                ),
              ),
              textMargin: const EdgeInsets.only(
                left: 8,
              ),
            ),
            textStyle: const TextStyle(
              fontSize: 14,
              color: Colors.white,
            ),
          ),
        ),
        //----------Parallalogram Button-------------//
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            WOIParallalogramButton(
              text: "平行四边形按钮".toUpperCase(),
              tiltSide: TiltSide.right,
              buttonColor: Colors.black,
              onPressed: () {},
              gradient: const LinearGradient(
                colors: [
                  Colors.black,
                  Colors.blue,
                  Colors.green,
                ],
              ),
            ),
          ],
        ),

        //----------Icon Button-------------//
        WOIIconButton(
          size: 45,
          borderRadius: BorderRadius.circular(100),
          backgroundColor: Colors.black,
          border: Border.all(
            color: Colors.red,
            width: 3,
          ),
          child: const Icon(
            Icons.percent,
            color: Colors.white,
          ),
          onTap: () {},
        ),

        //----------Switch Button-------------//
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            WOISwitchButton(
              value: switchValue,
              onChanged: (bool isSelected) {
                switchValue = isSelected;
                setState(() {});
              },
            ),
          ],
        ),
        //----------Radio Buttons-------------//
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            WOIRadioButton(
              isSelected: switchValue,
              onTap: (bool isSelected) {
                switchValue = isSelected;
                setState(() {});
              },
              border: Border.all(
                color: Colors.green,
                width: 2,
              ),
              selectedBorder: Border.all(
                color: Colors.black,
              ),
              selectedFillColor: Colors.black,
              size: 30,
              innerPadding: const EdgeInsets.all(3),
              duration: const Duration(
                milliseconds: 1,
              ),
            ),
          ],
        ),

        //----------CheckBox-------------//
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            WOICheckBox(
              isChecked: switchValue,
              onTap: (bool isSelected) {
                switchValue = isSelected;
                setState(() {});
              },
            ),
          ],
        ),
      ],
    );
  }

  /// 复杂组件组合
  Widget complexWidgets() {
    return SingleChildScrollView(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          //----------Text Field-------------//
          const Padding(
            padding: EdgeInsets.all(20),
            child: WOITextField(
              border: OutlineInputBorder(
                borderSide: BorderSide(
                  color: Color(0xff007EDA),
                ),
                borderRadius: BorderRadius.all(
                  Radius.circular(6),
                ),
              ),
              labelText: '电子邮件地址',
              helperText: '确保它是有效的',
              hintText: '占位符文本',
              prefixIcon: Icon(
                Icons.email_outlined,
                color: Color(0xff007EDA),
              ),
              hintTextStyle: TextStyle(
                color: Color(0xffB6A8A8),
                fontSize: 18,
              ),
            ),
          ),
          //----------TextProgressBar----------//
          SizedBox(
            child: WOITextBar(
              progressValue: 50,
              tiltValue: -5,
              borderRadius: 30,
              textStyle: const TextStyle(
                fontSize: 150,
                fontWeight: FontWeight.bold,
                height: 0,
              ),
              boxBackgroundColor: Colors.grey[300]!,
              fillColor: Colors.blue,
              textColor: Colors.white,
            ),
          ),
          //---------SectionBar---------//
          SizedBox(
            child: WOISectionBar(
              width: 345,
              initialValue: 0,
              sections: const [6, 4, 10, 8],
              currentProgress: 8,
              tiltValue: -5,
              sectionSpacing: 0,
              barBottomPadding: 0,
              prefixAndSuffixText: true,
              borderedSections: true,
              progressIndicatorColor: Colors.white,
              inactiveBarColor: Colors.white,
              activeBarColor: Colors.blue,
              borderColor: Colors.black,
              borderWidth: 3,
            ),
          ),
          //-----------CurvedBar------------//
          curvedBar(),
          //--------CountDownTimerVariation1---------//
          Padding(
            padding: const EdgeInsets.all(20),
            child: WOICountdowns(
              timeInSeconds: 10,
              timerSize: 200,
              timerWidth: 20,
              timerBackgroundColor: Colors.amber[100]!,
              timerFillColor: Colors.amber,
              cooldownTimerBoxDecoration: BoxDecoration(
                color: Colors.grey.shade300,
                borderRadius: BorderRadius.circular(200),
              ),
            ),
          ),
          //--------CountdownTimerVariation2---------//
          const WOICountdownTimer(
            isHoursNeeded: true,
          ),
          //---------LineGraph---------//
          Padding(
            padding: const EdgeInsets.only(
              top: 30,
              bottom: 30,
            ),
            child: WOILineGraph(
              height: 300,
              width: 340,
              heading: const Text(
                '利润',
                style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                textAlign: TextAlign.center,
              ),
              xaxisLabel: const Text(
                '周几',
                style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                textAlign: TextAlign.center,
              ),
              yaxisLabel: const Text(
                '每日利润',
                style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                textAlign: TextAlign.center,
              ),
              leftSpacing: 30,
              bottomSpacing: 50,
              topSpacing: 50,
              yaxisValues: [
                LineProperties(
                  values: const [0.1, 0.2, 0.3, 0.4, 10, 0.6, 0.7, 0.8, 0.1],
                  filledGraph: true,
                  fillColor: Colors.lightBlue.withOpacity(0.1),
                ),
                LineProperties(
                  values: const [1, 2, 3, 8, 20, 9, 7, 8, 1],
                  filledGraph: false,
                  fillColor: Colors.lightBlue.withOpacity(0.1),
                  showDataPoints: true,
                ),
                LineProperties(
                  values: const [9, 9, 9, 9, 9, 9, 9, 9, 9],
                  filledGraph: false,
                  fillColor: Colors.lightBlue.withOpacity(0.1),
                  showDataPoints: false,
                ),
              ],
              xaxisValues: const [1, 2, 3, 4, 5, 6, 'Sun', '', ''],
              dottedYaxis: true,
              xaxisAndTextGap: 20,
              xaxisSeparatorLength: 3,
            ),
          ),
          barGraphAndHistogram(),
        ],
      ),
    );
  }

  /// Stepper Widget
  Widget stepperWidget() {
    return Column(
      children: [
        Padding(
          padding: const EdgeInsets.all(10),
          child: WOIStepper.icons(
            activeStateIndex: currentStepperIndex,
            activeSeparatorWidget: Container(
              height: 2,
              color: Colors.black,
            ),
            iconData: const [
              Icons.home,
              Icons.person,
              Icons.check,
            ],
            completedIconTheme: IconStepperItemStyle(
              boxDecoration: const BoxDecoration(
                color: Colors.black,
                shape: BoxShape.circle,
              ),
              iconThemeData: const IconThemeData(
                color: Colors.white,
              ),
            ),
          ),
        ),
        Padding(
          padding: const EdgeInsets.all(10),
          child: WOIStepper.counterText(
            activeStateIndex: currentStepperIndex,
            activeSeparatorWidget: Container(
              height: 2,
              color: Colors.black,
            ),
            textItemsList: const [
              '步骤1',
              '步骤2',
              '步骤3',
            ],
          ),
        ),
        Padding(
          padding: const EdgeInsets.all(10),
          child: WOIStepper.iconText(
            activeStateIndex: currentStepperIndex,
            activeSeparatorWidget: Container(
              height: 2,
              color: Colors.black,
            ),
            textItemsList: const [
              '步骤1',
              '步骤2',
              '步骤3',
            ],
          ),
        ),
      ],
    );
  }

  /// 按钮来更新步进器状态的值
  Widget stepperButtons() {
    return Padding(
      padding: const EdgeInsets.symmetric(
        horizontal: 20.0,
        vertical: 15,
      ),
      child: Row(
        children: [
          Expanded(
            child: WOITextButton(
              text: "上一步",
              heigth: 50,
              onTap: () {
                if (currentStepperIndex < 0) {
                  return;
                }
                currentStepperIndex--;
                setState(() {});
              },
            ),
          ),
          Container(
            width: 20,
          ),
          Expanded(
            child: WOITextButton(
              text: "下一步",
              heigth: 50,
              onTap: () {
                if (currentStepperIndex >= 3) {
                  return;
                }
                setState(() {
                  currentStepperIndex++;
                });
              },
            ),
          ),
        ],
      ),
    );
  }

  /// 曲线进度条
  Widget curvedBar() {
    int finalValue = 9;
    int curentValue = 5;
    return Padding(
      padding: const EdgeInsets.only(top: 20.0),
      child: WOICurvedBar(
        finalValue: finalValue,
        currentValue: curentValue,
        arcBorders: true,
        arcLength: 0,
        arcDirection: ArcDirection.up,
        rotateCenter: true,
        padding: const EdgeInsets.all(20),
        size: 220,
        backgroundBorderRadius: 50,
        barColor: Colors.grey[300]!,
        fillColor: Colors.blue,
        borderColor: Colors.black,
        backgroundColor: Colors.grey.shade300,
        center: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Padding(
              padding: const EdgeInsets.only(top: 20.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    curentValue.toString(),
                    style: const TextStyle(
                        fontWeight: FontWeight.bold, fontSize: 70),
                  ),
                  const Padding(
                    padding: EdgeInsets.only(bottom: 10),
                    child: Text(
                      '/',
                      style:
                          TextStyle(fontWeight: FontWeight.w200, fontSize: 80),
                    ),
                  ),
                  Text(
                    finalValue.toString(),
                    style: const TextStyle(
                        fontWeight: FontWeight.bold, fontSize: 70),
                  ),
                ],
              ),
            ),
            const Text(
              '签到次数',
              style: TextStyle(fontSize: 16),
            ),
          ],
        ),
      ),
    );
  }

  /// 倒计时定时器变体1
  Widget countDownTimerVariation1() {
    return Padding(
      padding: const EdgeInsets.all(20),
      child: WOICountdowns(
        timeInSeconds: 10,
        timerSize: 200,
        timerWidth: 20,
        timerBackgroundColor: Colors.amber[100]!,
        timerFillColor: Colors.amber,
        cooldownTimerBoxDecoration: BoxDecoration(
          color: Colors.grey.shade300,
          borderRadius: BorderRadius.circular(200),
        ),
      ),
    );
  }

  /// 条形图和直方图
  Widget barGraphAndHistogram() {
    return const Padding(
      padding: EdgeInsets.only(top: 30),
      child: WOIBarGraph(
        height: 300,
        width: 320,
        barPadding: 5,
        yaxisValues: [10.0, -10.8, -0.1],
        xaxisValues: [
          '周一',
          '周二',
          '周三',
          '周四',
          '周五',
          '周六',
          '周日',
        ],
      ),
    );
  }
}

更多关于Flutter自定义组件插件weoveri_flutter_widgets的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter自定义组件插件weoveri_flutter_widgets的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何在Flutter中使用自定义组件插件 weoveri_flutter_widgets 的示例代码。这个示例假定你已经将 weoveri_flutter_widgets 插件添加到了你的 Flutter 项目中。如果还没有添加，可以通过在 pubspec.yaml 文件中添加以下依赖来完成：

dependencies:
  flutter:
    sdk: flutter
  weoveri_flutter_widgets: ^最新版本号  # 请替换为实际发布的最新版本号

然后运行 flutter pub get 来获取依赖。

示例代码

1. 在 main.dart 中使用自定义组件

import 'package:flutter/material.dart';
import 'package:weoveri_flutter_widgets/weoveri_flutter_widgets.dart';  // 导入插件

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Weoveri Flutter Widgets Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Weoveri Flutter Widgets Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // 使用自定义组件示例，这里假设有一个名为 CustomButton 的组件
            CustomButtonExample(),
            // 你可以添加更多的自定义组件示例
          ],
        ),
      ),
    );
  }
}

class CustomButtonExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 假设 CustomButton 是 weoveri_flutter_widgets 插件提供的一个组件
    return WeoveriCustomButton(
      onPressed: () {
        // 按钮点击回调
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text('Custom Button Clicked!')),
        );
      },
      label: Text('Click Me'),
      // 根据插件文档，添加其他可能的属性
    );
  }
}

2. 假设 WeoveriCustomButton 是插件中的一个组件

请注意，实际的组件名称和属性可能会与 WeoveriCustomButton 不同。你需要参考 weoveri_flutter_widgets 插件的官方文档或源代码，以确保使用正确的组件名称和属性。

注意事项

  1. 插件版本：确保你使用的是最新版本的 weoveri_flutter_widgets 插件，因为插件的 API 和组件可能会随着版本更新而变化。

  2. 文档：始终参考插件的官方文档来了解组件的完整 API 和用法。文档通常会提供示例代码和组件的属性说明。

  3. 错误处理：在实际项目中，你可能需要添加适当的错误处理和边界情况处理，以确保应用的健壮性。

  4. 自定义样式：如果插件支持自定义样式，你可以通过传递样式参数来自定义组件的外观。

由于 weoveri_flutter_widgets 是一个假设的插件名称，实际使用时请替换为真实的插件名称和组件。希望这个示例能帮助你开始在 Flutter 项目中使用自定义组件插件！

回到顶部