Flutter UI组件库插件 nomo_ui_kit 的使用

nomo_ui_kit 是一个专为 Nomo App 开发的Flutter UI组件库，提供了多种可复用的组件，如按钮、卡片等。它具有轻量级、高度可定制和易于扩展的特点。

为什么选择 nomo_ui_kit？

与Material UI等其他UI工具包相比，nomo_ui_kit 具有以下优势：

• 极其轻量：几乎没有运行时依赖，可以轻松集成到任何Web或原生应用中。
• 高度可定制：虽然该工具包对UI外观有自己的看法，但允许几乎每个细节都进行自定义。
• 高度可扩展：通过继承Nomo UI小部件，可以适应各种设计语言。

特性

• 多功能按钮：提供适合不同使用场景的各种按钮，确保一致且精美的外观。
• 交互式卡片：提升内容展示效果，提供有序且视觉上吸引人的信息展示方式。
• 带样式的文本元素：增强应用程序的排版，保持整个应用程序界面的一致性和可读性。
• 直观的对话框：通过直观的对话框与用户互动，确保流畅的交互流程。

示例代码

下面是一个完整的示例，展示了如何在项目中使用 nomo_ui_kit 包括初始化应用和加载Markdown文件的内容。

import 'package:example/routes.dart';
import 'package:example/theme.dart';
import 'package:flutter/material.dart';
import 'package:http/http.dart';
import 'package:markdown_widget/markdown_widget.dart';
import 'package:nomo_router/nomo_router.dart';
import 'package:nomo_router/router/entities/transitions.dart';
import 'package:nomo_ui_kit/app/nomo_app.dart';
import 'package:nomo_ui_kit/components/app/app.dart';
import 'package:nomo_ui_kit/components/app/routebody/nomo_route_body.dart';
import 'package:nomo_ui_kit/theme/nomo_theme.dart';
// ignore: depend_on_referenced_packages
import 'package:flutter_web_plugins/url_strategy.dart';

final appRouter = AppRouter();

final menuItems = appRouter.routeInfos.toMenuRoutes.toMenuItems;

void main() {
  usePathUrlStrategy();
  
  WidgetsFlutterBinding.ensureInitialized();
  
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  
  [@override](/user/override)
  Widget build(BuildContext context) {
    return NomoNavigator(
      delegate: appRouter.delegate,
      defaultTransistion: const PageSharedAxisTransition(type: SharedAxisTransitionType.horizontal),
      child: NomoApp(
        themeDelegate: AppThemeDelegate(),
        color: Colors.red,
        supportedLocales: const [Locale('en', 'US')],
        routerConfig: appRouter.config,
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);
  
  [@override](/user/override)
  Widget build(BuildContext context) {
    final file = get(Uri.parse("https://raw.githubusercontent.com/nomo-app/nomo-ui-kit/main/README.md"),
      headers: {"Accept": "text/plain"})
      .then((value) => value.body);

    return NomoRouteBody(
      builder: (context) => SingleChildScrollView(
        controller: DefaultScrollController.of(context),
        child: FutureBuilder(
          future: file,
          builder: (context, snapshot) {
            if (snapshot.data != null) {
              return MarkdownWidget(
                shrinkWrap: true,
                config: MarkdownConfig(
                  configs: [
                    H1Config(style: context.typography.h1),
                    H2Config(style: context.typography.h2),
                    H3Config(style: context.typography.h3),
                    H4Config(style: context.typography.b3),
                    H5Config(style: context.typography.b2),
                    H6Config(style: context.typography.b1),
                    PConfig(textStyle: context.typography.b1),
                    CodeConfig(style: context.typography.b2),
                    BlockquoteConfig(textColor: context.colors.foreground1),
                  ],
                ),
                data: snapshot.data as String,
              );
            }

            return const Center(child: CircularProgressIndicator());
          },
        ),
      ),
    );
  }
}