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

Flutter ShadcnUI

ShadcnUI移植到Flutter中，提供了一系列完全可定制的Awesome UI组件。

文档

查看文档以与组件交互并查看代码。

进度

关注进度请访问 X (Twitter)

以下是已实现和未实现的功能列表：

• ✅ Accordion
• ✅ Alert
• ❌ Breadcrumb
• ✅ Dialog
• ✅ Avatar
• ✅ Badge
• ✅ Button
• ✅ Calendar
• ✅ Card
• ❌ Carousel
• ✅ Checkbox
• ❌ Collapsible
• ✅ Combobox
• ❌ Command
• ✅ Context Menu
• ❌ Data Table
• ✅ Date Picker
• ❌ Drawer
• ✅ 使用 Context Menu 替代 Dropdown Menu
• ✅ Form
• ✅ 使用 Popover 替代 Hover Card
• ✅ Image
• ✅ Input
• ✅ Input OTP
• ✅ 使用 Text 替代 Label
• ❌ Menubar
• ❌ Navigation Menu
• ❌ Pagination
• ✅ Popover
• ✅ Progress
• ✅ RadioGroup
• ✅ Resizable
• ✅ 使用 SingleScrollView, ListView 等替代 Scroll Area
• ✅ Select
• ✅ 使用 Divider 替代 Separator
• ✅ Sheet
• ❌ Skeleton
• ✅ Slider
• ❌ Sonner (?)
• ✅ Switch
• ✅ Table
• ✅ Tabs
• ❌ TextArea
• ✅ Time Picker
• ✅ Toast
• ❌ Toggle
• ❌ ToggleGroup
• ✅ Tooltip

Star History

示例代码

以下是一个完整的示例demo，展示了如何在Flutter项目中使用shadcn_ui插件：

import 'package:flutter/material.dart';
import 'package:flutter_solidart/flutter_solidart.dart';
import 'package:shadcn_ui/shadcn_ui.dart';

void main() {
  SolidartConfig.devToolsEnabled = false;
  runApp(const App());
}

// 定义路由映射
final routes = <String, WidgetBuilder>{
  '/accordion': (_) => const AccordionPage(),
  '/alert': (_) => const AlertPage(),
  // 其他页面...
};

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

  @override
  Widget build(BuildContext context) {
    return Solid(
      providers: [
        Provider<Signal<ThemeMode>>(create: () => Signal(ThemeMode.light)),
      ],
      builder: (context) {
        final themeMode = context.observe<ThemeMode>();
        return ShadApp(
          debugShowCheckedModeBanner: false,
          themeMode: themeMode,
          routes: routes,
          theme: ShadThemeData(
            brightness: Brightness.light,
            colorScheme: const ShadZincColorScheme.light(),
          ),
          darkTheme: ShadThemeData(
            brightness: Brightness.dark,
            colorScheme: const ShadZincColorScheme.dark(),
          ),
          home: const MainPage(),
        );
      },
    );
  }
}

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

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  final search = Signal('');

  @override
  void dispose() {
    search.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: ShadInput(
          placeholder: const Text('Search ShadcnUI component'),
          onChanged: search.set,
        ),
      ),
      body: SignalBuilder(
        signal: search,
        builder: (context, searchString, child) {
          final filteredRoutes = {
            for (final k in routes.keys.where(
                (k) => k.toLowerCase().contains(searchString.toLowerCase())))
              k: routes[k]!
          };

          return ListView.builder(
            itemCount: filteredRoutes.length,
            itemBuilder: (BuildContext context, int index) {
              final route = filteredRoutes.keys.elementAt(index);

              final name = route.replaceAllMapped(
                RegExp(r'(?:^/|-)([a-zA-Z])'),
                (match) => match.group(0)!.substring(1).toUpperCase(),
              );

              return Material(
                child: ListTile(
                  title: Text(name),
                  onTap: () {
                    Navigator.of(context).pushNamed(route);
                  },
                ),
              );
            },
          );
        },
      ),
    );
  }
}

注意事项

• SolidartConfig.devToolsEnabled = false;：禁用开发工具。
• ShadApp：使用shadcn_ui提供的主题配置。
• SignalBuilder：用于响应式构建UI，当信号变化时重新构建。
• Navigator.of(context).pushNamed(route);：根据用户选择导航到对应的页面。

通过以上步骤，您可以快速集成并使用shadcn_ui插件来创建美观且功能丰富的Flutter应用程序。