Flutter UI组件插件fidooo_ui的使用

特性

通过这个库，你可以创建：

按钮
自定义容器
自定义文本
自定义文本输入框
自定义日期选择器

开始使用

在你的项目的 pubspec.yaml 文件中添加以下依赖（并运行 flutter pub get）：

dependencies:
  fidooo_ui: ^0.0.25

然后在你的Dart代码中引入以下包：

import 'package:fidooo_ui/custom_widgets/custom_button.dart';
import 'package:fidooo_ui/custom_widgets/custom_container.dart';
import 'package:fidooo_ui/constants/size_constants.dart';
import 'package:flutter/material.dart';

使用示例

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

import 'package:fidooo_ui/constants/size_constants.dart';
import 'package:fidooo_ui/custom_widgets/custom_button.dart';
import 'package:fidooo_ui/custom_widgets/custom_container.dart';
import 'package:fidooo_ui/custom_widgets/custom_text.dart';
import 'package:fidooo_ui/custom_widgets/custom_text_field.dart';
import 'package:fidooo_ui/custom_widgets/custom_text_field_calendar.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: 'Fidooo UI Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          // 自定义按钮
          FRaisedButton(
            child: const Text("Hola"),
            onPressed: () {},
          ),
          const SizedBox(height: SizeConstants.margin), // 间距
          
          // 自定义容器
          const FContainer(
            color: FColors.apieBusiness,
            borderRadius: 5,
            child: Text("Fidooo dev"),
          ),
          const SizedBox(height: SizeConstants.margin),

          // 自定义文本
          const FText("Hola, como estas <b>Bold</b> dev"),
          const SizedBox(height: SizeConstants.margin),

          // 带有自定义样式的文本
          const FText(
            "Hola, como estas <c>Custom Style</c> dev <c1>Custom Style1</c11> dev",
            customStyle: TextStyle(fontSize: 25, color: FColors.apieBusiness),
            customStyle1: TextStyle(fontSize: 18, fontStyle: FontStyle.italic),
          ),
          const SizedBox(height: SizeConstants.margin),

          // 自定义文本输入框
          FTextField(
            textinputType: TextInputType.multiline,
            title: 'Prueba',
            controller: TextEditingController(),
            maxLines: 3,
            minLines: 2,
          ),
          const SizedBox(height: SizeConstants.margin),

          // 自定义日期选择器
          FCustomTextFieldCalendar(
            title: 'Fecha',
            showCalendar: true,
            controller: TextEditingController(),
            initialDate: DateTime.now(),
            firstDate: DateTime(2010),
            lastDate: DateTime(2030),
          ),
          const SizedBox(height: 300),
        ],
      ),
    );
  }
}

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

sinazl 1楼

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

当然，以下是一个关于如何使用Flutter UI组件插件fidooo_ui的代码案例。假设你已经将fidooo_ui插件添加到你的pubspec.yaml文件中，并且已经运行了flutter pub get。

首先，确保你的pubspec.yaml文件包含以下依赖项：

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

然后，你可以在你的Flutter应用中使用fidooo_ui提供的UI组件。以下是一个简单的示例，展示了如何使用fidooo_ui中的一些组件：

import 'package:flutter/material.dart';
import 'package:fidooo_ui/fidooo_ui.dart'; // 导入fidooo_ui包

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

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Fidooo UI Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // 使用Fidooo UI的按钮组件
            FidoooButton(
              text: 'Click Me',
              onPressed: () {
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text('Button Clicked!')),
                );
              },
              color: Colors.blue,
              textColor: Colors.white,
            ),
            SizedBox(height: 20),
            
            // 使用Fidooo UI的输入框组件
            FidoooTextField(
              labelText: 'Enter your name',
              hintText: 'Name',
              onChanged: (value) {
                print('Input: $value');
              },
            ),
            SizedBox(height: 20),
            
            // 使用Fidooo UI的复选框组件
            FidoooCheckbox(
              value: true, // 初始值
              onChanged: (newValue) {
                print('Checkbox value: $newValue');
              },
              label: Text('Accept Terms'),
            ),
            SizedBox(height: 20),
            
            // 使用Fidooo UI的卡片组件
            FidoooCard(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text(
                    'Card Content',
                    style: TextStyle(fontSize: 20),
                  ),
                ],
              ),
              elevation: 4,
              margin: EdgeInsets.all(16),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们展示了如何使用fidooo_ui提供的几个UI组件：

FidoooButton：一个自定义按钮组件，可以设置文本、点击事件、颜色和文本颜色。
FidoooTextField：一个自定义文本输入框组件，可以设置标签文本、提示文本和输入改变时的回调函数。
FidoooCheckbox：一个自定义复选框组件，可以设置初始值和值改变时的回调函数。
FidoooCard：一个自定义卡片组件，可以设置子组件、阴影高度和边距。

请注意，fidooo_ui的具体组件和API可能会根据版本的不同而有所变化，因此请参考fidooo_ui的官方文档以获取最新和最准确的信息。如果你在实际使用过程中遇到问题，也可以查阅该插件的GitHub仓库或相关社区获取帮助。