Search packages, repositories and app categories

Package detailsv1.0.3

flutter_spacer

spacer is a Dart package for Flutter for easily spacing widgets in terms of percentage of screen width or height.

AndroidiOSWebmacOSWindowsLinux
30-day downloads
35
Likes
20
Pub points
150

Install package

flutter pub add flutter_spacer

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

flutter_spacer is a Flutter package that simplifies widget spacing using percentages of the screen's width or height. It provides a clean, intuitive way to add responsive spacing between UI elements without manually calculating values. Ideal for creating consistent layouts across different screen sizes and orientations, it enhances layout flexibility and reduces boilerplate code. The package supports all major platforms, ensuring cross-platform consistency. It’s particularly useful in forms, grids, and responsive designs where proportional spacing is essential.

Use cases

  • Responsive UI layouts
  • Form spacing
  • Grid alignment
  • Cross-platform design
  • Dynamic padding
  • Centering widgets

Key features

  • Percentage-based spacing
  • Supports width and height
  • Cross-platform compatibility
  • Minimal boilerplate
  • Easy integration
  • Responsive design

Suitable for

  • Developers building responsive apps
  • UI designers seeking precise spacing
  • Projects requiring consistent layout scaling
  • Teams prioritizing maintainable code
  • Apps targeting multiple device sizes

Considerations

  • Requires understanding of percentage-based layout
  • May need additional constraints in complex layouts
  • Not ideal for fixed pixel spacing needs
  • Limited to spacing functionality only
  • Best used with other layout widgets

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

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! 🚀

Categories

Source repository

Projects using this package

No data available yet.