gap_here 1.0.0 gap_here: ^1.0.0 copied to clipboard
A Flutter package for adding spacing between widgets in row and column layouts. This package simplifies the process of creating spacing between widgets in Flutter apps.
Gap Here 👉🏻 For Responsive Spacing #
A Flutter package for add spacing between widgets in row and column layouts, promoting responsive design practices.
This package simplifies the process of creating spacing between widgets in Flutter apps.
Features ⭐ #
-
Easily add spacing between widgets in both horizontal (row) and vertical (column) layouts.
-
Automatically adjust spacing direction based on the layout context.
-
Utilizes MediaQuery to provide percentage-based spacing, making it easy for users to specify spacing relative to the screen size. By default, the package uses MediaQuery to calculate spacing based on percentages, so users only need to provide a value like 10 (for 10%) or 50 (for 50%), eliminating the need for manual pixel calculations.
Screenshots 📸 #
Installation 📦 #
To use this package, add gap_here
as a dependency in your pubspec.yaml
file.
dependencies:
gap_here: ^1.0.0
Then, import the package into your Dart code:
import 'package:gap_here/gap_here.dart';
Usage 🛠️ #
Wrap your widgets with GapHere
and specify the desired spacing percent number as a percentage of the screen size.
Column(
children: [
Container(color: Colors.blue, width: 100, height: 100),
GapHere(10), // Adding vertical spacing of 10% of screen height
Container(color: Colors.green, width: 100, height: 100),
],
)
Row(
children: [
Container(color: Colors.blue, width: 100, height: 100),
GapHere(20), // Adding horizontal spacing of 20% of screen width
Container(color: Colors.green, width: 100, height: 100),
],
)
Example 🫣 #
Here's a simple example that shows how to use the GapHere
widget:
import 'package:flutter/material.dart';
import 'package:gap_here/gap_here.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) => MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('GapHere Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
color: Colors.blue,
width: 100,
height: 100,
),
const GapHere(20), // Adding vertical spacing of 20% of screen height
Container(
color: Colors.green,
width: 100,
height: 100,
),
],
),
),
),
);
}
Properties Usage ⚙️ #
percentage
Specifies the percentage of the spacing to be added between widgets. The value should be provided as a percent numbers representing a percentage of the screen size.
By default, the package internally uses MediaQuery to calculate spacing based on percentages, ensuring consistency across different screen sizes and resolutions.
Support 🤝🏻 #
- Android: Supported on SDK 16 and above.
- iOS: Supported on iOS 11.0 and above.
- Linux: Any Linux distribution.
- macOS: Supported on macOS 10.14 and above.
- Web: Supported on all web browsers.
- Windows: Supported on all Windows versions.