Flutter Shadcn UI 使用教程

最新推荐文章于 2025-04-11 10:51:23 发布

何灿前Tristan

最新推荐文章于 2025-04-11 10:51:23 发布

阅读量636

点赞数 16

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00187/article/details/141212446

Flutter Shadcn UI 使用教程

flutter-shadcn-uishadcn-ui ported in Flutter. Awesome UI components for Flutter, fully customizable.项目地址:https://gitcode.com/gh_mirrors/fl/flutter-shadcn-ui

项目介绍

Flutter Shadcn UI 是一个将 Shadcn UI 组件移植到 Flutter 的开源项目。该项目提供了丰富且高度可定制的 UI 组件，适用于 Flutter 开发。通过使用这些组件，开发者可以快速构建出美观且功能丰富的用户界面。

项目快速启动

安装依赖

首先，确保你已经安装了 Flutter SDK。然后，在你的 Flutter 项目中添加 flutter-shadcn-ui 依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_shadcn_ui: ^0.8.0

运行 flutter pub get 来安装依赖。

使用示例

以下是一个简单的示例，展示如何在 Flutter 项目中使用 Shadcn UI 组件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Shadcn UI 示例'),
        ),
        body: Center(
          child: ShadcnButton(
            label: '点击我',
            onPressed: () {
              print('按钮被点击了');
            },
          ),
        ),
      ),
    );
  }
}