Flutter设计系统插件jabar_design_system的使用

简介

Jabar Design System 是一款官方的 Flutter 设计系统包，旨在为西爪哇（ID）的设计人员和开发人员提供一致的产品设计和编程代码标准。通过使用该插件，您可以轻松实现统一的设计风格。

安装与配置

在您的 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  jabar_design_system: ^版本号

然后运行以下命令以安装依赖：

flutter pub get

使用示例

以下是一个完整的示例，展示如何使用 jabar_design_system 插件来构建一个简单的 Flutter 应用程序。

示例代码

// 导入必要的库
import 'package:example/common/drawer.dart'; // 自定义抽屉组件
import 'package:flutter/material.dart';
import 'package:jabar_design_system/jabar_design_system.dart'; // 引入设计系统包

void main() {
  runApp(const MyApp()); // 启动应用程序
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Jabar Design System', // 应用程序标题
      home: const MyHomePage(), // 主页面
      debugShowCheckedModeBanner: false, // 去除调试标志
      theme: ThemeData(
        // 设置主题颜色
        primarySwatch: Jds.colors.green, // 主色调为绿色
        appBarTheme: AppBarTheme(
          elevation: 0, // 移除阴影
          centerTitle: true, // 居中标题
          backgroundColor: Jds.colors.grey.shade50, // 背景色为浅灰色
          foregroundColor: Jds.colors.grey.shade900, // 文字颜色为深灰色
        ),
        textTheme: Jds.textTheme.sansSerif, // 使用无衬线字体
      ),
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Jabar Design System'), // 应用程序标题
        centerTitle: true, // 居中标题
        elevation: 0, // 移除阴影
      ),
      drawer: const JdsDrawer(isHome: true), // 自定义抽屉
      body: Center(
        child: Padding(
          padding: const EdgeInsets.fromLTRB(16, 16, 16, 32), // 内边距
          child: Image.asset(
            'assets/images/logo.png', // 图片资源
            width: MediaQuery.of(context).size.width * 0.5, // 图片宽度占屏幕宽度的一半
          ),
        ),
      ),
    );
  }
}

功能详解

颜色系统

Jabar Design System 提供了丰富的颜色系统，包括主色、次色和中性色等。例如：

Container(
  color: Jds.colors.primary.green, // 使用主绿色
)

字体系统

支持多种字体风格，如无衬线字体、无衬线替代字体和衬线字体。例如：

Text(
  'Jabar Design System',
  style: Jds.textTheme.sansSerif.bodyMedium, // 使用无衬线字体
)

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

gougou168 1楼

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

jabar_design_system 是一个为 Flutter 应用程序设计的插件，旨在提供一套统一的 UI 组件和设计规范，帮助开发者快速构建符合设计系统的应用程序。以下是如何使用 jabar_design_system 插件的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 jabar_design_system 插件的依赖。

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

然后运行 flutter pub get 来获取依赖。

2. 导入插件

在你的 Dart 文件中导入 jabar_design_system 插件。

import 'package:jabar_design_system/jabar_design_system.dart';

3. 使用组件

jabar_design_system 提供了多种预定义的 UI 组件，你可以直接在应用程序中使用这些组件。

示例：使用按钮组件

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Jabar Design System Example'),
        ),
        body: Center(
          child: JabarButton(
            text: 'Click Me',
            onPressed: () {
              print('Button Pressed!');
            },
          ),
        ),
      ),
    );
  }
}

示例：使用文本样式

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Jabar Design System Example'),
        ),
        body: Center(
          child: Text(
            'Hello, Jabar Design System!',
            style: JabarTextStyles.headline1,
          ),
        ),
      ),
    );
  }
}

4. 自定义主题

jabar_design_system 还允许你自定义主题，以便更好地适应你的应用程序设计。

示例：自定义主题

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
        textTheme: JabarTextTheme.textTheme,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Jabar Design System Example'),
        ),
        body: Center(
          child: Text(
            'Hello, Jabar Design System!',
            style: JabarTextStyles.headline1,
          ),
        ),
      ),
    );
  }
}

5. 其他组件

jabar_design_system 还提供了其他组件，如卡片、对话框、输入框等。你可以查阅插件的文档或源代码来了解更多组件的使用方法。

6. 运行应用程序

完成上述步骤后，你可以运行你的 Flutter 应用程序，查看 jabar_design_system 插件提供的组件和样式。

flutter run