搜索插件、代码仓与 APP 分类

插件详情v1.0.1

dynamicutils

用于从 Figma、XD 等工具创建响应式设计的 Flutter 包.....

AndroidiOSWebmacOSWindowsLinux
近 30 天下载
60
喜欢数
21
Pub 分数
160

安装插件

flutter pub add dynamicutils

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

DynamicUtils 是一个 Flutter 包,旨在通过允许开发者直接从 Figma、XD 或其他设计工具创建流畅且可扩展的布局来简化响应式设计的实现。它提供了根据屏幕尺寸和设备密度调整 UI 元素的实用工具,确保在 Android、iOS、Web、macOS、Windows 和 Linux 上具有一致的外观。该包支持动态缩放字体、大小和间距,非常适合在开发过程中保持设计的一致性。通过 `flutter pub add dynamicutils` 进行最少设置,即可简化从设计原型到生产就绪的响应式界面的过渡。

适合场景

  • 将 Figma/XD 设计转换为响应式 Flutter 应用
  • 使用一致的缩放创建跨平台用户界面
  • 为不同屏幕尺寸调整布局
  • 在各种设备上保持设计准确性
  • 使用响应式组件进行快速原型设计
  • 构建可扩展的设计系统

主要特点

  • 动态字体和大小缩放
  • 跨平台响应式
  • 与现有 Flutter 项目的轻松集成
  • 对多个平台(Android、iOS、Web、macOS、Windows、Linux)的支持
  • 内置的布局自适应工具
  • 无缝的设计到代码工作流

适合对象

  • 使用Figma/XD设计的Flutter开发者
  • 优先考虑响应式UI一致性
  • 需要在各种设备上快速扩展用户界面的项目
  • 开发多平台应用程序的开发者
  • 设计师与开发人员协作进行响应式布局
  • 适用于各种屏幕尺寸和密度的应用程序

使用建议

  • 需要初始配置缩放因子
  • 可能需要对复杂的嵌套布局进行调整
  • 最适合具有统一基线网格的设计
  • 性能影响可以忽略不计,但应在低端设备上进行测试
  • 不是一个完整的设计系统,而是一个用于响应式缩放的工具
  • 除了基本设置外,文档有限

原始 README

以下为关联源码仓库的 README 原文快照,最新内容请访问源码仓库。

Dynamic Utils

Pub Version Flutter Platform

A Flutter package that provides dynamic sizing capabilities, allowing you to adapt your UI elements to different screen sizes.

Features

  • Dynamically adjust the height and width of UI elements based on the screen size.
  • Easily create responsive UIs that work well on different devices and orientations.
  • Convenient methods for adding spacing between elements.

Installation

Add the following line to your pubspec.yaml file:

dependencies:
  dynamicutils: <latest_version>

Then run flutter pub get to fetch the package.

Usage

Import the package into your Dart file:

import 'package:dynamicutils/dynamicutils.dart';

Initialize the DynamicSize class with the design screen size:

DynamicSize size = DynamicSize(849, 393);

Adjust the height and width of your UI elements:

DynamicSize size = DynamicSize(849, 393);
height = size.height(20);
width = size.width(20);
size.HeightSpace(20);
size.WidthSpace(20);

Create a new dynamic container:

dContainer(
  height: 20,
  width: 20,
);

For navigation:

pop(context);
newScreen(context, screen());
replaceScreen(context, screen());

For more advanced usage and customization options, refer to the package's API documentation.

Examples

You can find more usage examples in the example folder of this repository.

License

This project is licensed under the MIT License.

Contributing

Contributions are welcome! If you have any suggestions, bug reports, or feature requests, please open an issue or submit a pull request.

Get in touch

If you have any questions, feel free to reach out:

所属分类

源码仓库

使用此插件的项目

暂无相关数据。