gap 1.2.0

  • Readme
  • Changelog
  • Example
  • Installing
  • 89

Gap #

Flutter widgets for easily adding gaps inside Flex widgets such as Columns and Rows or scrolling views.

Pub

Introduction #

When it comes to add empty space between widgets inside a Column or a Row, we have multiple options:

  • We can either add a Padding around these widgets but it's very verbose
  • Or we can add SizedBox widgets between them.

Gap is another option. It's like SizedBox but you don't have to know if it's inside a Row or a Column. So that it's less verbose than using a SizedBox.

Getting started #

In your library add the following import:

import 'package:gap/gap.dart';

Then you just have to add a Gap inside a Column or a Row with the specified extent.

return Column(
  children: <Widget>[
    Container(color: Colors.red, height: 20),
    const Gap(20), // Adds an empty space of 20 pixels.
    Container(color: Colors.red, height: 20),
  ],
);

The Gap widget also works inside Scrollable widgets such as ListViews. In these cases, it will occupy the space in the same direction as the Scrollable.

MaxGap #

This package also comes with a MaxGap widget. The MaxGap widget will try to fill the available space in a Column or a Row with the specified size. If the available space is lesser than the specified size, the MaxGap widget will only take the available space.

It's useful when you want to have a gap that shrinks to avoid an overflow otherwise.

Other parameters #

By default a Gap will have no extent in the opposite direction of the Flex parent. If you want the Gap to have a color, you'll have to set the color and the crossAxisExtent parameters. You can also use the Gap.expand constructor to expand the Gap in the opposite direction of the Flex parent.

SliverGap #

There is also a Sliver version of the Gap widget:

return CustomScrollView(
  slivers: <Widget>[
    const SliverGap(20), // Adds an empty space of 20 pixels.
  ],
);

Changelog #

Please see the Changelog page to know what's recently changed.

Contributions #

Feel free to contribute to this project.

If you find a bug or want a feature, but don't know how to fix/implement it, please fill an issue.
If you fixed a bug or implemented a feature, please send a pull request.

1.2.0 #

Added #

  • Compatibility with Scrollable widgets (such as ListViews).

1.1.1 #

Fixed #

  • Typo in Readme.

1.1.0 #

Added #

  • SliverGap the sliver version of Gap.

1.0.1 #

Fixed #

  • Fix debug properties in Gap widget.

1.0.0 #

  • Initial Open Source release.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:gap/gap.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Gap Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

/// A widget.
class HomePage extends StatelessWidget {
  /// Creates a [HomePage].
  const HomePage({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          mainAxisSize: MainAxisSize.max,
          children: <Widget>[
            const Gap.expand(20, color: Colors.red),
            const Gap(80),
            const Gap.expand(20, color: Colors.red),
            const MaxGap(2000),
            const Gap.expand(20, color: Colors.red),
            Row(
              children: const <Widget>[
                Gap(20, color: Colors.green, crossAxisExtent: 20),
                Gap(50),
                Gap(20, color: Colors.green, crossAxisExtent: 20),
              ],
            ),
            const Gap.expand(200, color: Colors.blue),
          ],
        ),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  gap: ^1.2.0

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:gap/gap.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
77
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
89
Learn more about scoring.

We analyzed this package on Jul 9, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.14
  • Flutter: 1.17.5

Analysis suggestions

Package not compatible with SDK dart

Because:

  • gap that is a package requiring null.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.12 1.14.13
meta 1.1.8 1.2.1
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
vector_math 2.0.8 2.1.0-nullsafety
Dev dependencies
flutter_test