套件詳情v1.0.3

flutter_spacer

spacer 是一個用於 Flutter 的 Dart 套件，可輕鬆以螢幕寬度或高度的百分比來間距元件。

AndroidiOSWebmacOSWindowsLinux

pub.dev API 文件原始碼

近 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

 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.