パッケージ、リポジトリ、アプリカテゴリを検索

パッケージ詳細v1.0.1

dynamicutils

Figma、XD などからレスポンシブデザインを作成するためのFlutterパッケージ.....

AndroidiOSWebmacOSWindowsLinux
30日間ダウンロード
60
いいね数
21
Pub ポイント
160

パッケージをインストール

flutter pub add dynamicutils

パッケージ概要

公開情報に基づく選定ガイドです。参考としてご利用ください。

DynamicUtils は、Figma、XD、またはその他のデザインツールから直接フローイングでスケーラブルなレイアウトを作成できるようにすることで、レスポンシブデザインの実装を簡略化するためのFlutterパッケージです。画面サイズやデバイスの密度に応じてUI要素を調整するユーティリティを提供し、Android、iOS、Web、macOS、Windows、Linuxで一貫した外観を保証します。フォント、サイズ、余白の動的スケーリングをサポートしており、開発中にデザインの正確性を維持するのに最適です。`flutter pub add dynamicutils` による最小限のセットアップで、デザインマックアップから本番用のレスポンシブインターフェースへの移行がスムーズになります。

用途

  • Figma/XD デザインをレスポンシブな Flutter アプリに変換する
  • 一貫したスケーリングを使用してクロスプラットフォームのUIを作成する
  • 異なる画面サイズにレイアウトを適応させる
  • デバイス間でデザインの正確性を維持する
  • レスポンシブコンポーネントによる迅速なプロトタイピング
  • スケーラブルなデザインシステムの構築

主な機能

  • 動的フォントおよびサイズスケーリング
  • クロスプラットフォーム対応性
  • 既存のFlutterプロジェクトとの簡単な統合
  • 複数のプラットフォーム(Android、iOS、Web、macOS、Windows、Linux)に対応
  • レイアウト適応用の組み込みユーティリティ
  • シームレスなデザインからコードへのワークフロー

適している対象

  • Figma/XDデザインと連携するFlutter開発者
  • 応答性のあるUIの一貫性を優先する
  • さまざまなデバイスで迅速に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:

カテゴリー

ソースリポジトリ

このパッケージを使用しているプロジェクト

データはまだありません。