Flutter设计系统插件senior_design_system的潜在功能使用

Flutter设计系统插件senior_design_system的潜在功能使用

Senior Design System

Senior Design System 是一个用于Flutter移动应用的组件实现项目。它提供了一系列可以在应用程序界面中使用的组件。

首次使用步骤

要将Senior Design System添加到您的应用程序中，您可以直接使用我们在Pub.dev上发布的包。您可以通过在pubspec.yaml文件中添加依赖项或使用命令flutter pub add senior_design_system来添加包。

我们还有一个用于我们的tokens的包，也推荐添加到项目中。您也可以在Pub.dev上找到它作为senior_design_tokens。

如何使用

要在您的项目中使用我们的组件，首先需要导入我们的包和tokens包。

import 'package:senior_design_system/senior_design_system.dart';
import 'package:senior_design_tokens/senior_design_tokens.dart';

接下来，在您的widget树的最高点添加SeniorDesignSystem widget。这个widget会为应用程序中的组件添加必要的配置，并提供Senior Design System组件自己的主题管理。

void main() {
    runApp(
        SeniorDesignSystem(
            theme: SENIOR_LIGHT_THEME, // 使用默认的浅色主题
            child: MyApp(),
        ),
    );
}

现在，您只需在需要的地方添加所需的组件即可！下面是一个示例，我们将SeniorButton组件添加到一个名为Panel的通用组件中。

Panel(
    title: 'Primary button',
    child: SeniorButton(
        label: 'Salvar', // 按钮标签
        onPressed: () => _showSnackbar(
            context: context,
            message: 'Clicou sobre o botão Salvar!', // 点击按钮后显示的消息
        ),
        disabled: _isDisabled, // 是否禁用按钮
        fullLength: true, // 是否全宽
        size: SeniorButtonSize.big, // 按钮大小
        type: SeniorButtonType.primary, // 按钮类型
    ),
),

完整示例Demo

以下是完整的示例代码，展示了如何使用senior_design_system中的多个组件：

import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:provider/provider.dart';
import 'package:senior_design_system/senior_design_system.dart';
import 'package:senior_design_tokens/senior_design_tokens.dart';

// 这里省略了具体的页面组件实现，例如IconExample(), BadgeExemple()等

void main() {
  runApp(
    SeniorDesignSystem(
      theme: SENIOR_LIGHT_THEME, // 使用默认的浅色主题
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Senior Design System Showcase',
      home: HomePage(),
      theme: Provider.of<ThemeRepository>(context).theme.themeData,
    );
  }
}

class HomePage extends StatefulWidget {
  [@override](/user/override)
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
  final PageController _pageController = PageController();
  NotificationMessage? notificationMessage;
  int tabIndex = 0;

  void updateMessageNotificationState() {
    setState(() {
      notificationMessage = NotificationMessage(
        message: 'Tivemos problemas pra registrar seu ponto.',
        messageType: MessageTypes.messageError,
        icon: FontAwesomeIcons.solidCircleCheck,
        timeout: const Duration(seconds: 5),
        actionNotification: ActionNotification(
          actionName: 'Tentar Novamente',
          action: actionFuncionNotification,
        ),
      );
    });
  }

  void actionFuncionNotification() {
    setState(() {
      notificationMessage = const NotificationMessage(
        message: 'Mudou.',
        messageType: MessageTypes.messageSuccess,
        icon: FontAwesomeIcons.circleCheck,
        timeout: const Duration(seconds: 5),
      );
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    final drawerItems = examplePages
        .asMap()
        .map(
          (pos, page) => MapEntry(
            pos,
            SeniorDrawerItem(
              icon: page.icon,
              onTap: () => _pageController.jumpToPage(pos),
              title: page.title,
              type: DrawerItemType.neutral,
            ),
          ),
        )
        .values
        .toList();

    final _tabBarConfig = TabBarConfig(
      tabIndex: tabIndex,
      onSelect: (int tab) {
        tabIndex = tab;
        _pageController.jumpToPage(tab);
      },
      tabs: ['Aba 1', 'Aba 2', 'Aba 3', 'Aba 4'],
    );

    return Consumer<ThemeRepository>(
      builder: (context, repository, child) => Scaffold(
        key: _scaffoldKey,
        body: SeniorColorfulHeaderStructure(
          notification: notificationMessage,
          actions: [
            Padding(
              padding: const EdgeInsets.all(SeniorSpacing.xxxsmall),
              child: SeniorIconButton(
                icon: repository.isLightTheme()
                    ? FontAwesomeIcons.moon
                    : FontAwesomeIcons.sun,
                onTap: () {
                  if (repository.isLightTheme()) {
                    repository.theme = SENIOR_DARK_THEME;
                  } else {
                    repository.theme = SENIOR_LIGHT_THEME;
                  }
                },
                size: SeniorIconButtonSize.small,
                type: SeniorIconButtonType.ghost,
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(SeniorSpacing.xxxsmall),
              child: SeniorIconButton(
                icon: FontAwesomeIcons.message,
                onTap: () {
                  updateMessageNotificationState();
                },
                size: SeniorIconButtonSize.small,
                type: SeniorIconButtonType.ghost,
              ),
            ),
          ],
          hasTopPadding: false,
          title: const Text('Senior Design System'),
          hideLeading: false,
          leading: IconButton(
            iconSize: SeniorIconSize.small,
            icon: const FaIcon(FontAwesomeIcons.bars),
            color: SeniorColors.pureWhite,
            onPressed: () => _scaffoldKey.currentState!.openDrawer(),
          ),
          body: PageView.builder(
            controller: _pageController,
            itemBuilder: (context, pos) =>
                examplePages.map((page) => page.pageComponent).toList()[pos],
            itemCount: examplePages.length,
            onPageChanged: (value) => setState(() {
              tabIndex = value;
            }),
          ),
          tabBarConfig: _tabBarConfig,
        ),
        drawer: SeniorDrawer(
          items: drawerItems,
          svgLogoPath: 'assets/images/logo-name.svg',
          footerText: 'total de ${examplePages.length} componentes exibidos',
          profilePicture: const SeniorProfilePicture(
            name: 'Albert Einstein',
            radius: 24.0,
            imageProvider: AssetImage('assets/images/albert-einstein.jpg'),
          ),
          profileTitle: 'Albert Einstein',
          profileSubtitle: 'Físico',
        ),
      ),
    );
  }
}

final List<Page> examplePages = [
  const Page(
    title: 'Icon',
    icon: FontAwesomeIcons.a,
    pageComponent: IconExample(),
  ),
  // 其他组件示例省略...
];

class Page {
  const Page({
    required this.icon,
    required this.pageComponent,
    required this.title,
  });

  final IconData icon;
  final Widget pageComponent;
  final String title;
}