Flutter设计系统插件innovaccer_design_system的使用

Flutter设计系统插件innovaccer_design_system的使用

简介

Innovaccer设计系统（Mobile Design System）基于Masala设计系统（MDS），是一个开源的设计系统，由Innovaccer构建。该组件库为移动应用提供简单且可定制化的组件，帮助开发者更快地构建更美观且更具可访问性的Flutter应用程序。

使用步骤

1. 添加依赖

在pubspec.yaml文件中添加innovaccer_design_system依赖：

dependencies:
  innovaccer_design_system: ^版本号

2. 初始化应用

在main.dart文件中初始化应用，并设置路由。以下是一个完整的示例代码：

import 'package:example/screens/home_screen.dart'; // 引入屏幕
import 'package:example/utils/router/app_router.dart'; // 引入路由
import 'package:flutter/material.dart'; // 引入flutter核心库
import 'package:innovaccer_design_system/innovaccer_design_system.dart'; // 引入设计系统库
import 'utils/locator/locator.dart'; // 引入依赖注入

void main() {
  setupLocator(); // 初始化依赖注入
  runApp(MyApp()); // 运行应用
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    AppRouter.shared.setUpRouter(); // 设置路由
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return TextScaler<TextScalingFactor>(
      initialScaleFactor: const TextScalingFactor(scaleFactor: 1.0), // 设置文本缩放因子
      child:  MDSToast(
        child: MaterialApp(
            title: 'Core UI Examples', // 应用标题
            debugShowCheckedModeBanner: false, // 隐藏调试标志
            navigatorKey: appNavigator.navigatorKey, // 设置导航键
            onGenerateRoute: AppRouter.shared.generator, // 路由生成器
            onUnknownRoute: AppRouter.shared.unKnownRouteHandler, // 未知路由处理器
            initialRoute: HomeScreen.routeName, // 初始路由
          ),
      ),
    );
  }
}

3. 使用组件

示例：使用按钮组件

以下是如何在应用中使用innovaccer_design_system中的按钮组件：

import 'package:innovaccer_design_system/innovaccer_design_system.dart';

// 在build方法中使用按钮组件
ElevatedButton(
  onPressed: () {
    // 按钮点击事件
  },
  child: Text('点击我'),
)

示例：使用卡片组件

import 'package:innovaccer_design_system/innovaccer_design_system.dart';

// 在build方法中使用卡片组件
MDCard(
  child: Padding(
    padding: const EdgeInsets.all(16.0),
    child: Text('这是一张卡片'),
  ),
)

更多关于Flutter设计系统插件innovaccer_design_system的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter设计系统插件innovaccer_design_system的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


innovaccer_design_system 是一个用于 Flutter 的设计系统插件，它提供了一套预定义的 UI 组件和样式，帮助开发者快速构建一致且高质量的应用程序界面。以下是如何使用 innovaccer_design_system 插件的步骤和示例。

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 innovaccer_design_system 依赖：

dependencies:
  flutter:
    sdk: flutter
  innovaccer_design_system: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装依赖。

2. 导入包

在你的 Dart 文件中导入 innovaccer_design_system：

import 'package:innovaccer_design_system/innovaccer_design_system.dart';

3. 使用组件

innovaccer_design_system 提供了多种预定义的组件，例如按钮、文本框、卡片等。以下是一些常见组件的使用示例：

按钮 (Button)

IDSButton(
  text: 'Click Me',
  onPressed: () {
    print('Button Pressed');
  },
);

文本框 (TextField)

IDSTextField(
  label: 'Username',
  hint: 'Enter your username',
  onChanged: (value) {
    print('Username: $value');
  },
);

卡片 (Card)

IDSCard(
  child: Column(
    children: [
      Text('Card Title'),
      Text('This is a card content.'),
    ],
  ),
);

对话框 (Dialog)

showDialog(
  context: context,
  builder: (BuildContext context) {
    return IDSDialog(
      title: 'Alert',
      content: 'This is a dialog message.',
      actions: [
        IDSButton(
          text: 'OK',
          onPressed: () {
            Navigator.of(context).pop();
          },
        ),
      ],
    );
  },
);

4. 自定义主题

你可以通过自定义主题来调整应用程序的外观和感觉。innovaccer_design_system 提供了一个 IDSTheme 类来管理主题：

MaterialApp(
  theme: IDSTheme.lightTheme(),
  darkTheme: IDSTheme.darkTheme(),
  home: MyHomePage(),
);

5. 其他组件

innovaccer_design_system 还提供了其他组件，如 IDSCheckbox、IDSRadio、IDSSwitch 等。你可以根据需要使用这些组件来构建复杂的用户界面。

6. 示例代码

以下是一个简单的示例，展示了如何使用 innovaccer_design_system 构建一个基本的登录界面：

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

class LoginPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: IDSAppBar(
        title: 'Login',
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            IDSTextField(
              label: 'Username',
              hint: 'Enter your username',
            ),
            SizedBox(height: 16),
            IDSTextField(
              label: 'Password',
              hint: 'Enter your password',
              obscureText: true,
            ),
            SizedBox(height: 24),
            IDSButton(
              text: 'Login',
              onPressed: () {
                print('Login Button Pressed');
              },
            ),
          ],
        ),
      ),
    );
  }
}
回到顶部