FlexGap Library

FlexGap is a Flutter library for managing spaces and flexibility in your layouts.

Installation

Add the following dependency to your pubspec.yaml file:

dependencies:
  flex_gap: ^0.3.3

Rus this command:

$ flutter pub add flex_gap

Then, run flutter pub get in your terminal.

Usage

startIndexSpace

Generates a space up to the maximum width or height of the parent widget from selected index.

FlexGap(
  axis: Axis.vertical,
  crossAxisAlignment: CrossAxisAlignment.center,
  startSpacerIndex: 2,
 children: [
    _listElements[1],
    _listElements[2],
    _listElements[3],
    _listElements[4],
    _listElements[5],
 ],
),

isScrollable

isScrollable Adds scroll functionality, no matter if it is vertical or horizontal, you cannot use "startIndexSpace" with "isScrollable" at the same time.

FlexGap(
  axis: Axis.vertical,
  crossAxisAlignment: CrossAxisAlignment.center,
  isScrollable: true,
 children: [
    _listElements[1],
    _listElements[2],
    _listElements[3],
    _listElements[4],
    _listElements[5],
 ],
),

locatedSpace

locatedSpace We select the index where we want to apply a specific space.

FlexGap(
  axis: Axis.vertical,
  crossAxisAlignment: CrossAxisAlignment.center,
  locatedSpace: const {
      3 : 50
  },
 children: [
    _listElements[1],
    _listElements[2],
    _listElements[3],
    _listElements[4],
    _listElements[5],
 ],
),

globalSpace

globalSpace Adds a specific space to all elements using RederBox so it is an invisible element in the widget tree.

FlexGap(
  axis: Axis.vertical,
  crossAxisAlignment: CrossAxisAlignment.center,
  globalSpace: 20,
 children: [
    _listElements[1],
    _listElements[2],
    _listElements[3],
    _listElements[4],
    _listElements[5],
 ],
),

isAdaptive

isAdaptive Use all the elements to organize them in a coherent way in the available space.

FlexGap(
  axis: Axis.vertical,
  crossAxisAlignment: CrossAxisAlignment.center,
  isAdaptive: true,
 children: _listElements,
),

MainAxisAlignment && CrossAxisAlignment 😃

You can use all MainAxisAlignment and CrossAxisAlignment elements to establish standard separation patterns.

Example MainAxisAlignment.spaceBetween

FlexGap(
  axis: Axis.vertical,
  crossAxisAlignment: CrossAxisAlignment.center,
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    _listElements[1],
    _listElements[2],
    _listElements[3],
    _listElements[4],
    _listElements[5],
 ],
),

For this behavior you can also apply spaces in the desired index, enjoy experimenting and helping improve this library 🙃.

Contributions

Contributions are welcome. If you find an issue or want to improve the library, create an issue or submit a pull request.

License

This project is licensed under the MIT License. See the LICENSE file for more details.