Flutter设计系统插件smart_design_system的使用
Flutter设计系统插件smart_design_system的使用
简介
smart_design_system 是一个用于构建一致性和可复用组件的Flutter插件。通过该插件，开发者可以快速地创建符合特定设计系统的UI组件。
本文将通过一个完整的示例来展示如何使用 smart_design_system 插件。
示例代码
主文件 (main.dart)
import 'package:example/stories/badge/badge_page.dart';
import 'package:example/stories/borders/borders_page.dart';
import 'package:example/stories/buttons/buttons_page.dart';
import 'package:example/stories/cards/cards_page.dart';
import 'package:example/stories/chip/chip_page.dart';
import 'package:example/stories/code_field/code_field_page.dart';
import 'package:example/stories/colors/colors_page.dart';
import 'package:example/stories/divider/divider_page.dart';
import 'package:example/stories/dropdown/dropdown_page.dart';
import 'package:example/stories/icon_button/icon_button_page.dart';
import 'package:example/stories/icon_text_button/icon_text_button_page.dart';
import 'package:example/stories/images/image_page.dart';
import 'package:example/stories/input/input_page.dart';
import 'package:example/stories/inputs/inputs_page.dart';
import 'package:example/stories/molecules/box_message/box_message_page.dart';
import 'package:example/stories/molecules/chips_carousel/smart_chips_carousel.dart';
import 'package:example/stories/molecules/smart_activable_row/smart_activable_row_page.dart';
import 'package:example/stories/molecules/smart_check_box_row/smart_check_box_row_page.dart';
import 'package:example/stories/molecules/thumb_pair/thumb_pair.dart';
import 'package:example/stories/nav_bar/nav_bar_page.dart';
import 'package:example/stories/navigable_row_list/navigable_row_list_page.dart';
import 'package:example/stories/pagination/pagination_page.dart';
import 'package:example/stories/progress_bar/progress_bar_page.dart';
import 'package:example/stories/radio_button/radio_button_page.dart';
import 'package:example/stories/rating/rating_page.dart';
import 'package:example/stories/selectable_row_list/selectable_row_list_page.dart';
import 'package:example/stories/shadows/shadows_page.dart';
import 'package:example/stories/sizes/sizes_page.dart';
import 'package:example/stories/skeleton/skeleton_page.dart';
import 'package:example/stories/stepper_horizontal/stepper_horizontal_page.dart';
import 'package:example/stories/switch/switch_page.dart';
import 'package:example/stories/tab/tab_page.dart';
import 'package:example/stories/tag/tag_page.dart';
import 'package:example/stories/texts/texts_page.dart';
import 'package:example/stories/thumb/thumb_page.dart';
import 'package:example/stories/thumbnail_icon/thumbnail_icon_page.dart';
import 'package:example/stories/thumbnail_image/thumbnail_image_page.dart';
import 'package:example/stories/toggle_icon/toggle_icon_page.dart';
import 'package:flutter/material.dart';
import 'package:smart_design_system/smart_design_system.dart';
import 'package:storybook_flutter/storybook_flutter.dart';
Future<void> main() async {
WidgetsFlutterBinding.ensureInitialized();
await SmartDesignSystem.init();
runApp(const MainApp());
}
class MainApp extends StatelessWidget {
const MainApp({super.key});
[@override](/user/override)
Widget build(BuildContext context) {
return Storybook(
initialStory: 'Dropdown',
stories: [
// 这里定义了所有故事书（Storybook）的页面
Story(
name: 'Molecules/SmartActivableRowPage',
description: 'SmartActivableRowPage',
builder: (context) => const SmartActivableRowPage(),
),
Story(
name: 'Molecules/Pagination',
description: 'Pagination',
builder: (context) => const PaginationPage(),
),
Story(
name: 'Molecules/SelectableRowListPage',
description: 'SelectableRowListPage',
builder: (context) => const SelectableRowListPage(),
),
Story(
name: 'Molecules/NavigableRowList',
description: 'NavigableRowList',
builder: (context) => const NavigableRowListPage(),
),
Story(
name: 'Molecules/SmartActivableRow',
description: 'SmartActivableRow',
builder: (context) => const SmartActivableRowPage(),
),
Story(
name: 'Molecules/SmartThumbPairPage',
description: 'SmartThumbPairPage',
builder: (context) => const SmartThumbPairPage(),
),
Story(
name: 'Molecules/SmartChipsCarousel',
description: 'SmartChipsCarousel',
builder: (context) => const SmartChipsCarouselPage(),
),
Story(
name: 'Molecules/SmartCheckBoxRow',
description: 'SmartCheckBoxRow',
builder: (context) => const SmartCheckBoxRowPage(),
),
Story(
name: 'Molecules/SmartBoxMessagePage',
description: 'SmartBoxMessagePage',
builder: (context) => const SmartBoxMessagePage(),
),
Story(
name: 'Tab',
description: 'Tab',
builder: (context) => const TabPage(),
),
Story(
name: 'Dropdown',
description: 'Dropdown demo',
builder: (context) => const DropdownPage(),
),
Story(
name: 'Switch',
description: 'Switch demo',
builder: (context) => const SwitchPage(),
),
Story(
name: 'IconTextButton',
description: 'IconTextButton demo',
builder: (context) => const IconTextButttonPage(),
),
Story(
name: 'RadioButton',
description: 'RadioButton demo',
builder: (context) => const RadioButtonPage(),
),
Story(
name: 'Text Input',
description: 'TextInput demo',
builder: (context) => const TextInputPage(),
),
Story(
name: 'Divider',
description: 'Divider demo',
builder: (context) => const DividerPage(),
),
Story(
name: 'CodeField',
description: 'CodeField demo',
builder: (context) => const CodeFieldPage(),
),
Story(
name: 'Tag',
description: 'Tag demo',
builder: (context) => const TagPage(),
),
Story(
name: 'Icon Button',
description: 'Icon Button demo',
builder: (context) => const IconButtonPage(),
),
Story(
name: 'StepperHorizontal',
description: 'StepperHorizontal demo',
builder: (context) => const StepperHorizontalPage(),
),
Story(
name: 'Skeleton',
description: 'Skeleton demo',
builder: (context) => const SkeletonPage(),
),
Story(
name: 'ThumbnailImage',
description: 'ThumbnailImage demo',
builder: (context) => const ThumbnailImagePage(),
),
Story(
name: 'ThumbnailIcon',
description: 'ThumbnailIcon demo',
builder: (context) => const ThumbnailIconPage(),
),
Story(
name: 'Thumb',
description: 'Thumb demo',
builder: (context) => const ThumbPage(),
),
Story(
name: 'Chip',
description: 'Chip demo',
builder: (context) => const ChipPage(),
),
Story(
name: 'ProgressBar',
description: 'ProgressBar demo',
builder: (context) => const ProgressBarPage(),
),
Story(
name: 'Rating',
description: 'Rating demo',
builder: (context) => const RatingPage(),
),
Story(
name: 'ToggleIcon',
description: 'ToggleIcon demo',
builder: (context) => const ToggleIconPage(),
),
Story(
name: 'Badges',
description: 'Badges demo',
builder: (context) => const BadgePage(),
),
Story(
name: 'Buttons',
description: 'Buttons demo',
builder: (context) => const ButtonsPage(),
),
Story(
name: 'Cards',
description: 'Cards demo',
builder: (context) => const CardsPage(),
),
Story(
name: 'Styles',
description: 'Styles demo',
builder: (context) => const TextsPage(),
),
Story(
name: 'Colors',
description: 'Colors demo',
builder: (context) => const ColorsPage(),
),
Story(
name: 'Spaces',
description: 'Spaces demo',
builder: (context) => const SizesPage(),
),
Story(
name: 'Inputs',
description: 'Inuts demo',
builder: (context) => const InputsPage(),
),
Story(
name: 'Images',
description: 'Images demo',
builder: (context) => const ImagesPage(),
),
Story(
name: 'Borders',
description: 'Borders demo',
builder: (context) => const BordersPage(),
),
Story(
name: 'Shadows',
description: 'Shadows demo',
builder: (context) => const ShadowsPage(),
),
Story(
name: 'Nav Bar',
description: 'Nav Bar demo',
builder: (context) => const NavBarPage(),
),
],
);
}
}
更多关于Flutter设计系统插件smart_design_system的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter设计系统插件smart_design_system的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，以下是如何在Flutter项目中集成和使用smart_design_system插件的一个示例代码案例。假设你已经有一个Flutter项目，并且已经配置好了基本的开发环境。
1. 添加依赖
首先，你需要在pubspec.yaml文件中添加smart_design_system的依赖。确保你的pubspec.yaml文件包含以下依赖项：
dependencies:
flutter:
sdk: flutter
smart_design_system: ^最新版本号 # 请替换为实际的最新版本号
然后运行flutter pub get来安装依赖。
2. 导入包
在你的Dart文件中导入smart_design_system包。例如，在main.dart中：
import 'package:flutter/material.dart';
import 'package:smart_design_system/smart_design_system.dart';
3. 使用SmartDesignSystem
smart_design_system通常提供了一组预定义的样式、主题和组件。以下是如何在Flutter应用中使用这些组件的示例。
设置主题
你可以在MaterialApp中使用SmartDesignSystem提供的主题：
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Smart Design System Demo',
theme: SmartDesignSystem.lightTheme, // 使用提供的轻主题
// theme: SmartDesignSystem.darkTheme, // 或者使用暗主题
home: MyHomePage(),
);
}
}
使用组件
smart_design_system通常会提供一些自定义的组件。假设它提供了一个SmartButton组件，你可以这样使用它：
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Smart Design System Demo'),
),
body: Center(
child: SmartButton(
onPressed: () {
print('Button pressed!');
},
child: Text('Smart Button'),
),
),
);
}
}
请注意，SmartButton是一个假设的组件，实际使用时应该参考smart_design_system的文档，查看它所提供的具体组件和用法。
4. 自定义主题
如果你需要自定义主题，smart_design_system通常会提供一个方法来覆盖默认主题值。例如：
final ThemeData customTheme = SmartDesignSystem.lightTheme.copyWith(
primaryColor: Colors.blue,
textTheme: TextTheme(
bodyText1: TextStyle(color: Colors.green),
),
// 添加更多自定义样式
);
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Smart Design System Demo',
theme: customTheme,
home: MyHomePage(),
);
}
}
总结
以上是一个关于如何在Flutter项目中集成和使用smart_design_system插件的基本示例。请确保查阅smart_design_system的官方文档，以获取最新的组件列表、API参考和更多高级用法。由于我无法直接访问最新的包内容和文档，所以代码中的组件名称和用法可能需要根据实际情况进行调整。
