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 #

🛠️ 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 🚀