Flutter UI设计组件插件dimipay_design_kit的使用

Flutter UI设计组件插件dimipay_design_kit的使用

THIS IS AN ALPHA-VERSION PACKAGE

PLEASE USE WITH CAREFUL CHOICE

Dimipay Design Kit

版权 © Dimipay前端工程团队 & Dimipay设计团队 - 版权所有

Deisigned By

在Dimipay设计团队中由Cho Hyun Woo 和 Park Ji Yoon 设计

Created By

在Dimipay前端工程团队中由Kim Hyung Suk, Seo Seung Pyo, Oh Min Yong, Zhang In Hwa 创建

Features

Colors

代表在dimipay v2中使用的颜色

grayscale

  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
  • 100

primary

  • brand
  • negative

Typography

代表在dimipay v2中使用的字体

title

import 'package:dimipay_design_kit/dimipay_design_kit.dart';
final text = Text("Hello Dimigo Students!", style: DPTypography.title());

header1

import 'package:dimipay_design_kit/dimipay_design_kit.dart';
final text = Text("Hello Dimigo Students!", style: DPTypography.header1());

header2

import 'package:dimipay_design_kit/dimipay_design_kit.dart';
final text = Text("Hello Dimigo Students!", style: DPTypography.header2());

item - title

import 'package:dimipay_design_kit/dimipay_design_kit.dart';
final text = Text("Hello Dimigo Students!", style: DPTypography.itemTitle());

item - description

import 'package:dimipay_design_kit/dimipay_design_kit.dart';
final text = Text("Hello Dimigo Students!", style: DPTypography.itemDescription());

description

import 'package:dimipay_design_kit/dimipay_design_kit.dart';
final text = Text("Hello Dimigo Students!", style: DPTypography.description());

readable

import 'package:dimipay_design_kit/dimipay_design_kit.dart';
final text = Text("Hello Dimigo Students!", style: DPTypography.readable());

token

import 'package:dimipay_design_kit/dimipay_design_kit.dart';
final text = Text("Hello Dimigo Students!", style: DPTypography.token());

hint

import 'package:dimipay_design_kit/dimipay_design_kit.dart';
final text = Text("Hello Dimigo Students!", style: DPTypography.hint());

paragraph1

import 'package:dimipay_design_kit/dimipay_design_kit.dart';
final text = Text("Hello Dimigo Students!", style: DPTypography.paragraph1());

paragraph2

import 'package:dimipay_design_kit/dimipay_design_kit.dart';
final text = Text("Hello Dimigo Students!", style: DPTypography.paragraph2());

paragraph1 - underlined

import 'package:dimipay_design_kit/dimipay_design_kit.dart';
final text = Text("Hello Dimigo Students!", style: DPTypography.paragraph1Underlined());

paragraph2 - underlined

import 'package:dimipay_design_kit/dimipay_design_kit.dart';
final text = Text("Hello Dimigo Students!", style: DPTypography.paragraph2Underlined());

示例代码

下面是一个完整的示例代码，展示如何在Flutter项目中使用dimipay_design_kit插件来创建一个简单的UI。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Dimipay Design Kit Example"),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // 使用 title 风格的文本
              Text(
                "Hello Dimigo Students!",
                style: DPTypography.title(),
              ),
              SizedBox(height: 20),
              // 使用 header1 风格的文本
              Text(
                "This is Header 1 Style",
                style: DPTypography.header1(),
              ),
              SizedBox(height: 20),
              // 使用 header2 风格的文本
              Text(
                "This is Header 2 Style",
                style: DPTypography.header2(),
              ),
              SizedBox(height: 20),
              // 使用 itemTitle 风格的文本
              Text(
                "This is Item Title Style",
                style: DPTypography.itemTitle(),
              ),
              SizedBox(height: 20),
              // 使用 itemDescription 风格的文本
              Text(
                "This is Item Description Style",
                style: DPTypography.itemDescription(),
              ),
              SizedBox(height: 20),
              // 使用 description 风格的文本
              Text(
                "This is Description Style",
                style: DPTypography.description(),
              ),
              SizedBox(height: 20),
              // 使用 readable 风格的文本
              Text(
                "This is Readable Style",
                style: DPTypography.readable(),
              ),
              SizedBox(height: 20),
              // 使用 token 风格的文本
              Text(
                "This is Token Style",
                style: DPTypography.token(),
              ),
              SizedBox(height: 20),
              // 使用 hint 风格的文本
              Text(
                "This is Hint Style",
                style: DPTypography.hint(),
              ),
              SizedBox(height: 20),
              // 使用 paragraph1 风格的文本
              Text(
                "This is Paragraph 1 Style",
                style: DPTypography.paragraph1(),
              ),
              SizedBox(height: 20),
              // 使用 paragraph2 风格的文本
              Text(
                "This is Paragraph 2 Style",
                style: DPTypography.paragraph2(),
              ),
              SizedBox(height: 20),
              // 使用 paragraph1Underlined 风格的文本
              Text(
                "This is Paragraph 1 Underlined Style",
                style: DPTypography.paragraph1Underlined(),
              ),
              SizedBox(height: 20),
              // 使用 paragraph2Underlined 风格的文本
              Text(
                "This is Paragraph 2 Underlined Style",
                style: DPTypography.paragraph2Underlined(),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


当然，下面是一个关于如何使用Flutter UI设计组件插件dimipay_design_kit的代码示例。假设你已经将dimipay_design_kit添加到你的pubspec.yaml文件中，并且已经运行了flutter pub get。

pubspec.yaml 文件示例

确保你的pubspec.yaml文件中包含了对dimipay_design_kit的依赖：

dependencies:
  flutter:
    sdk: flutter
  dimipay_design_kit: ^最新版本号 # 替换为实际的最新版本号

主代码文件 main.dart

以下是一个简单的Flutter应用示例，展示了如何使用dimipay_design_kit中的组件。

import 'package:flutter/material.dart';
import 'package:dimipay_design_kit/dimipay_design_kit.dart'; // 导入dimipay_design_kit包

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Dimipay Design Kit Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dimipay Design Kit Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // 使用DimipayButton组件
            DimipayButton(
              text: 'Pay Now',
              onPressed: () {
                // 按钮点击事件处理
                print('Button clicked!');
              },
            ),
            SizedBox(height: 20),
            
            // 使用DimipayTextField组件
            DimipayTextField(
              labelText: 'Enter Amount',
              keyboardType: TextInputType.number,
              onChanged: (value) {
                // 文本变化事件处理
                print('Input changed: $value');
              },
            ),
            SizedBox(height: 20),
            
            // 使用DimipayCheckbox组件
            DimipayCheckbox(
              value: true, // 初始选中状态
              onChanged: (newValue) {
                // 选中状态变化事件处理
                print('Checkbox value: $newValue');
              },
              label: Text('Accept Terms'),
            ),
            SizedBox(height: 20),
            
            // 使用DimipayRadio组件
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                DimipayRadio(
                  value: 1,
                  groupValue: 1, // 当前选中的值
                  onChanged: (newValue) {
                    // 选中值变化事件处理
                    print('Radio selected: $newValue');
                  },
                ),
                Text('Option 1'),
                SizedBox(width: 20),
                DimipayRadio(
                  value: 2,
                  groupValue: 1, // 当前选中的值
                  onChanged: (newValue) {
                    // 选中值变化事件处理
                    print('Radio selected: $newValue');
                  },
                ),
                Text('Option 2'),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

说明

  1. DimipayButton：一个自定义按钮组件，点击时触发onPressed回调。
  2. DimipayTextField：一个自定义文本输入框组件，文本变化时触发onChanged回调。
  3. DimipayCheckbox：一个自定义复选框组件，选中状态变化时触发onChanged回调。
  4. DimipayRadio：一个自定义单选按钮组件，通常与多个DimipayRadio组件一起使用，选中值变化时触发onChanged回调。

请确保你替换了^最新版本号为实际的dimipay_design_kit包的最新版本号。如果你对dimipay_design_kit的具体组件有更多定制需求，可以参考其官方文档或源代码进行进一步的修改和扩展。

回到顶部