Gapx

A smart, ScreenUtil-aware spacing widget for Flutter that replaces SizedBox and automatically adapts to Row, Column, Flex, and sliver layouts.

✨ Why Gapx?

In Flutter, spacing is usually handled with SizedBox(height: x) or SizedBox(width: x). This becomes repetitive and error‑prone, especially in responsive apps using flutter_screenutil.

Gapx solves this by:

  • Automatically detecting layout direction (Row / Column / Flex)
  • Applying height for vertical layouts and width for horizontal layouts
  • Seamlessly scaling values using flutter_screenutil
  • Eliminating the need to use .h or .w
  • Supporting slivers out of the box

🚀 Features

  • ✅ Drop‑in replacement for SizedBox
  • ✅ Auto adapts to Row, Column, and Flex
  • ✅ ScreenUtil synced (no .h / .w required)
  • ✅ Optional background color (useful for debugging)
  • ✅ Sliver support (SliverGapx)
  • ✅ Lightweight & performant (RenderObject based)

📦 Installation

Add this to your pubspec.yaml:

dependencies:
  gapx: ^0.0.1

Then run:

flutter pub get

⚠️ Required Setup

Gapx relies on flutter_screenutil for responsive scaling.

Make sure you initialize ScreenUtil at the root of your app:

ScreenUtilInit(
  designSize: const Size(360, 690),
  builder: (_, child) => MaterialApp(
    home: child,
  ),
  child: const MyHomePage(),
);

⚠️ If ScreenUtilInit is not used, spacing will not scale as expected.

🧩 Basic Usage

Column (Vertical spacing)

Column(
  children: const [
    Text('Above'),
    Gapx(20), // height: 20.h
    Text('Below'),
  ],
);

Row (Horizontal spacing)

Row(
  children: const [
    Icon(Icons.star),
    Gapx(12), // width: 12.w
    Text('Star'),
  ],
);

No need to think about height or width — Gapx handles it automatically.

🎨 With Color (Debugging / Layout Help)

Gapx(
  16,
  color: Colors.redAccent,
);

📏 Expanded Gap

Use Gapx.expand when you want the gap to take maximum space in the cross axis:

Gapx.expand(24);

🧱 Flexible Gap

Use MaxGap inside flexible layouts:

Row(
  children: const [
    Text('Left'),
    MaxGap(20),
    Text('Right'),
  ],
);

📜 Sliver Support

Gapx also works inside slivers:

CustomScrollView(
  slivers: const [
    SliverToBoxAdapter(child: Text('Top')),
    SliverGapx(24),
    SliverToBoxAdapter(child: Text('Bottom')),
  ],
);

🧠 How It Works

  • Detects parent RenderFlex direction
  • Maps spacing to main axis automatically
  • Applies ScreenUtil scaling internally
  • Uses a custom RenderBox for performance

🆚 Comparison

Approach Responsive Direction Aware Boilerplate
SizedBox ❌ ❌ High
Gap ❌ ✅ Medium
Gapx ✅ ✅ Low

🛠️ Roadmap

  • Optional fallback when ScreenUtil is not initialized
  • Animation support
  • Axis‑specific constructors
  • Widget tests

🤝 Contributing

Contributions are welcome!

  1. Fork the repo
  2. Create your feature branch
  3. Commit changes
  4. Open a pull request

📄 License

MIT License

⭐ Support

If you find this package useful, please ⭐ star the repo and share feedback.

Happy Fluttering 🚀

Libraries

gapx