패키지, 저장소 및 앱 카테고리 검색

패키지 상세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! 🚀

카테고리

소스 저장소

이 패키지를 사용하는 프로젝트

아직 데이터가 없습니다.