Flutter自定义UI组件插件flutter

Flutter自定义UI组件插件`flutter_shadcnui`的使用

flutter_shadcnui 是一个将 shadcn/ui 库移植到 Flutter 的插件。shadcn/ui 是一个基于 Tailwind CSS 构建的高质量 UI 组件库。通过使用 flutter_shadcnui，开发者可以在 Flutter 应用程序中轻松地集成这些美观且功能丰富的组件。

安装插件

首先，在你的 pubspec.yaml 文件中添加 flutter_shadcnui 依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_shadcnui: ^版本号 # 请替换为最新版本号

然后运行 flutter pub get 来安装依赖。

使用示例

下面是一个简单的示例，展示如何在 Flutter 应用程序中使用 flutter_shadcnui 插件中的 SCUIAccordionItem 和 SCUIAccordionContent 组件。

import 'package:flutter/material.dart';
import 'package:flutter_shadcnui/flutter_shadcnui.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Theme.of(context).colorScheme.inversePrimary,
          title: Text(widget.title),
        ),
        body: const Column(
          children: [
            // 创建一个可展开/折叠的 Accordion Item
            SCUIAccordionItem(
              child: SCUIAccordionTrigger(
                isOpen: true, // 设置为 true 如果 Accordion 初始状态为打开
                child: Text('Accordion Trigger'),
              ),
            ),
            SCUIAccordionContent(
              isOpen: true, // 设置为 true 如果 Accordion 初始状态为打开
              child: Text('Accordion Content'),
            ),
          ],
        ));
  }
}

在这个示例中，我们创建了一个带有可展开/折叠内容的 Accordion 组件。通过设置 isOpen 属性，我们可以控制 Accordion 的初始状态（打开或关闭）。

运行示例

确保你已经正确配置了项目，并且所有依赖项都已安装。运行以下命令来启动应用：

flutter run

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

caililin 1楼

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

flutter_shadcnui 是一个用于 Flutter 的自定义 UI 组件库，灵感来源于 shadcn/ui 的设计风格。它提供了一系列美观且易于使用的 UI 组件，帮助开发者快速构建现代的 Flutter 应用。

安装

首先，你需要在 pubspec.yaml 文件中添加 flutter_shadcnui 依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_shadcnui: ^1.0.0 # 请使用最新版本

然后运行 flutter pub get 来安装依赖。

使用组件

flutter_shadcnui 提供了多种组件，以下是一些常用组件的使用示例。

1. 按钮 (`Button`)

import 'package:flutter/material.dart';
import 'package:flutter_shadcnui/flutter_shadcnui.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter Shadcnui Example')),
        body: Center(
          child: Button(
            onPressed: () {
              print('Button Pressed');
            },
            child: Text('Click Me'),
          ),
        ),
      ),
    );
  }
}

2. 卡片 (`Card`)

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter Shadcnui Example')),
        body: Center(
          child: Card(
            child: Padding(
              padding: EdgeInsets.all(16.0),
              child: Text('This is a card'),
            ),
          ),
        ),
      ),
    );
  }
}

3. 输入框 (`Input`)

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter Shadcnui Example')),
        body: Center(
          child: Padding(
            padding: EdgeInsets.all(16.0),
            child: Input(
              placeholder: 'Enter your name',
            ),
          ),
        ),
      ),
    );
  }
}

4. 对话框 (`Dialog`)

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter Shadcnui Example')),
        body: Center(
          child: Button(
            onPressed: () {
              showDialog(
                context: context,
                builder: (context) => Dialog(
                  title: Text('Dialog Title'),
                  content: Text('This is a dialog content.'),
                  actions: [
                    Button(
                      onPressed: () {
                        Navigator.pop(context);
                      },
                      child: Text('Close'),
                    ),
                  ],
                ),
              );
            },
            child: Text('Open Dialog'),
          ),
        ),
      ),
    );
  }
}

自定义主题

flutter_shadcnui 允许你自定义主题来适应你的应用风格。你可以通过设置 ShadcnTheme 来覆盖默认的主题样式。

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return ShadcnTheme(
      data: ShadcnThemeData(
        primaryColor: Colors.blue,
        secondaryColor: Colors.green,
        // 其他自定义主题属性
      ),
      child: MaterialApp(
        home: Scaffold(
          appBar: AppBar(title: Text('Flutter Shadcnui Example')),
          body: Center(
            child: Button(
              onPressed: () {
                print('Button Pressed');
              },
              child: Text('Click Me'),
            ),
          ),
        ),
      ),
    );
  }
}

Flutter自定义UI组件插件flutter_shadcnui的使用