Flutter设计同步插件design_sync的使用

Flutter设计同步插件DesignSync的使用

DesignSync 是一个用于创建像素完美且响应式布局的 Flutter 工具。它通过将 Figma 设计中的尺寸适应到各种设备屏幕大小来实现这一点。

特性

• 将 Figma 中的宽度和高度尺寸适应到设备屏幕。
• 将 Figma 中的字体大小适应到设备屏幕，并考虑设备的文字缩放因子。
• 将 Figma 中的半径值（如圆角）适应到设备屏幕。
• 数值类型的扩展方法易于使用。
• 无需上下文即可执行适应操作。
• 使用单例模式以实现高效的全局访问。

安装

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

dependencies:
  design_sync: ^1.0.0

然后运行：

flutter pub get

使用

1. 导入 DesignSync

在 Dart 文件中导入 DesignSync：

import 'package:design_sync/design_sync.dart';

2. 初始化 DesignSync

在 main.dart 文件中，在调用 runApp() 之前初始化 DesignSync：

void main() {
  DesignSync.initialize(figmaCanvasSize: Size(375, 812)); // 使用你的 Figma 画布尺寸
  runApp(MyApp());
}

3. 在小部件构建中使用适应方法或扩展获取器

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('DesignSync Demo', style: TextStyle(fontSize: 20.adaptedFontSize)),
      ),
      body: Center(
        child: Container(
          width: 200.adaptedWidth,
          height: 100.adaptedHeight,
          decoration: BoxDecoration(
            color: Colors.blue,
            borderRadius: BorderRadius.circular(10.adaptedRadius),
          ),
          child: Center(
            child: Text(
              'Adapted Container',
              style: TextStyle(fontSize: 16.adaptedFontSize, color: Colors.white),
            ),
          ),
        ),
      ),
    );
  }
}

API 参考

DesignSync 类

• DesignSync.initialize({required Size figmaCanvasSize}): 使用你的 Figma 画布尺寸初始化 DesignSync。
• DesignSync.instance: 访问 DesignSync 的单例实例。

方法

• adaptWidth(double figmaWidth): 从 Figma 适应宽度尺寸。
• adaptHeight(double figmaHeight): 从 Figma 适应高度尺寸。
• adaptFontSize(double figmaFontSize): 从 Figma 适应字体大小。
• adaptRadius(double figmaRadius): 从 Figma 适应半径值。

属性

• screenSize: 获取当前设备屏幕尺寸。
• figmaCanvasSize: 获取用于适应的 Figma 画布尺寸。
• widthFactor: 获取当前宽度适应因子。
• heightFactor: 获取当前高度适应因子。
• textScaleFactor: 获取当前设备的文字缩放因子。

扩展方法

• num.adaptedWidth: 从 Figma 适应宽度值。
• num.adaptedHeight: 从 Figma 适应高度值。
• num.adaptedFontSize: 从 Figma 适应字体大小值。
• num.adaptedRadius: 从 Figma 适应半径值。

示例

以下是更全面的示例，展示了如何使用 DesignSync 的多种方式：

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

void main() {
  DesignSync.initialize(figmaCanvasSize: Size(375, 812)); // 示例：iPhone X 尺寸
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'DesignSync Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    final pp = DesignSync.instance;

    return Scaffold(
      appBar: AppBar(
        title: Text('DesignSync Demo', style: TextStyle(fontSize: 20.adaptedFontSize)),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              width: 200.adaptedWidth,
              height: 100.adaptedHeight,
              decoration: BoxDecoration(
                color: Colors.blue,
                borderRadius: BorderRadius.circular(10.adaptedRadius),
              ),
              child: Center(
                child: Text(
                  'Adapted Container',
                  style: TextStyle(fontSize: 16.adaptedFontSize, color: Colors.white),
                ),
              ),
            ),
            SizedBox(height: 20.adaptedHeight),
            Text(
              'Screen Size: ${pp.screenSize.width.toStringAsFixed(2)} x ${pp.screenSize.height.toStringAsFixed(2)}',
              style: TextStyle(fontSize: 14.adaptedFontSize),
            ),
            Text(
              'Figma Canvas Size: ${pp.figmaCanvasSize.width} x ${pp.figmaCanvasSize.height}',
              style: TextStyle(fontSize: 14.adaptedFontSize),
            ),
            Text(
              'Width Factor: ${pp.widthFactor.toStringAsFixed(2)}',
              style: TextStyle(fontSize: 14.adaptedFontSize),
            ),
            Text(
              'Height Factor: ${pp.heightFactor.toStringAsFixed(2)}',
              style: TextStyle(fontSize: 14.adaptedFontSize),
            ),
            Text(
              'Text Scale Factor: ${pp.textScaleFactor.toStringAsFixed(2)}',
              style: TextStyle(fontSize: 14.adaptedFontSize),
            ),
          ],
        ),
      ),
    );
  }
}