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

パッケージ詳細v1.0.3

flutter_spacer

spacer は、画面の幅または高さのパーセンテージに基づいてウィジェットを簡単に配置するためのFlutter用Dartパッケージです。

AndroidiOSWebmacOSWindowsLinux
30日間ダウンロード
35
いいね数
20
Pub ポイント
150

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

flutter pub add flutter_spacer

パッケージ概要

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

flutter_spacer は、画面の幅または高さのパーセンテージを使用してウィジェットのスペースを簡単に設定するためのFlutterパッケージです。手動で値を計算しなくても、UI要素間の応答性のあるスペースをクリーンかつ直感的に追加できるようになります。さまざまな画面サイズや向きでの一貫したレイアウト作成に最適であり、レイアウトの柔軟性を高め、ボイラープレートコードを削減します。すべての主要プラットフォームをサポートしており、クロスプラットフォームの一貫性を確保します。フォーム、グリッド、および比率ベースのスペースが必要なレスポンシブデザインにおいて特に役立ちます。

用途

  • 応答性のあるUIレイアウト
  • フォームの間隔
  • グリッドの配置
  • クロスプラットフォームデザイン
  • 動的パディング
  • ウィジェットの中央揃え

主な機能

  • パーセンテージベースのマージン
  • 幅と高さをサポートしています
  • クロスプラットフォーム互換性
  • 最小限のボイラープレート
  • 簡単な統合
  • レスポンシブデザイン

適している対象

  • 応答性のあるアプリを開発する開発者
  • 正確な余白を求めるUIデザイナー
  • 一貫したレイアウトスケーリングを必要とするプロジェクト
  • 保守性の高いコードを優先するチーム
  • 複数のデバイスサイズを対象とするアプリ

注意事項

  • パーセンテージベースのレイアウトの理解が必要です
  • 複雑なレイアウトでは追加の制約が必要になる場合があります
  • 固定ピクセル間隔の要件には適していません
  • スペース機能のみに制限
  • 他のレイアウトウィジェットと併用するのが最適です

元の README

関連するソースリポジトリの README 原文のスナップショットです。最新の内容はリポジトリをご覧ください。

flutter_spacer is a Dart package that simplifies the creation of responsive layouts by providing utilities for easily spacing between widgets in terms of percentage of screen width or height.

Features

  • Extension Methods: Use extension methods on num to create SizedBox widgets with a percentage of the screen width or height.
  • Responsive Utilities: The package includes utilities to get the device's height and width, making it easy to create responsive layouts.

Getting started

To use this package, add flutter_spacer to your pubspec.yaml file

  dependencies:
  flutter_spacer: ^1.0.2 # use the latest version

or

 dart pub add flutter_spacer

Usage

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FlutterSpacer(
      builder: (context) {
        return MaterialApp(
          title: 'My App',
          home: MyHomePage(),
        );
      },
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My App'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
          
              height: 20,
              width: 50,
              color: Colors.blue,
              child: Center(
                child: Text(
                  'first Container',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
            
            20.hs // give you space of 20%
            Container(
          
              height: 20,
              width: 50,
              color: Colors.blue,
              child: Center(
                child: Text(
                  'Second Container',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),

          ],
        ),
      ),
    );
  }
}

Additional Information

Thank you for using the flutter_spacer package! Here's some additional information to help you make the most out of this package:

Issues and Contributions

If you encounter any issues with the package or have suggestions for improvements, feel free to open an issue on the GitHub repository. Contributions are welcome, and we appreciate any help to make this package better.

License

This project is licensed under the MIT License. Feel free to review the terms and conditions.

Contact

For any further inquiries or communication, you can reach out to the package maintainer:

  • Maintainer: Mustafa majid
  • Email: mstafadev0@gmail.com
Support the Project

If you find this package helpful, consider giving it a star on GitHub and spreading the word. Your support is greatly appreciated!

Static Badge


Happy coding! 🚀

カテゴリー

ソースリポジトリ

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

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