flutter_grid_pattern 1.0.1 copy "flutter_grid_pattern: ^1.0.1" to clipboard
flutter_grid_pattern: ^1.0.1 copied to clipboard

Flutter Sliver Grid delegate to generate box patterns for SliverGrid.

flutter_grid_patterm #

Pub

Flutter Sliver Grid delegate that allow to generate box patterns for SliverGrid.

Demo

Getting started #

In the pubspec.yaml of your flutter project, add the following dependency:

dependencies:
  ...
  flutter_grid_patterm: <latest_version>

Example #


import 'package:flutter_grid_pattern/flutter_grid_pattern.dart';

class GridPatternDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: CustomScrollView(slivers: [
          SliverGrid(
            // Attach SliverGridPatternDelegate to SliverGrid
            gridDelegate: SliverGridPatternDelegate(patterns: [
              // Add your list of patterns
              PatternNTiles(tileHeight: 150, nb: 3),
              PatternRow(patterns: [
                PatternNTiles(tileHeight: 150, nb: 1),
                PatternNTiles(tileHeight: 150, nb: 2),
              ]),
            ]),
            delegate:
                SliverChildBuilderDelegate((BuildContext context, int index) {
              return Container(
                child: Text("tile $index")
              );
            }),
          )
        ]));
  }
}

Patterns #


PatternNTiles #

Create an horizontal list of tile. All tiles have the same width and a fixed height.

Parameter Description
tileHeight Height of the tiles
nb Number of tiles

Example #

// Pattern is a row composed of 4 tiles
SliverGridPatternDelegate(patterns: [
    PatternNTiles(tileHeight: 75, nb: 4),
]),
)

Pattern2Tiles #

Create 2 tiles aligned horizontally. Tiles have the same height. Width is defined by a ratio.

Parameter Description
tileHeight Height of the tiles
ratio Width ratio, corresponds to width of tile1 over width of tile2

Example #

// Pattern composed of
// 2 tiles with width of 1/3 and 2/3
// followed by
// 2 tiles with width of 2/3 and 1/3
SliverGridPatternDelegate(patterns: [
    Pattern2Tiles(tileHeight: 150, ratio: 1/3.0),
    Pattern2Tiles(tileHeight: 150, ratio: 2/3.0),
]),
)

result

PatternRow #

Create a row that contains a list of patterns. All pattern of the list have the same width. The height of the row is the height of the highest pattern in the list.

Parameter Description
patterns A list of patterns

Example #

// Pattern is composed of a row containing 2 patterns :
// First 50% : 1 tile
// Last 50% : row of 2 tiles
SliverGridPatternDelegate(patterns: [
    PatternRow(patterns: [
        PatternNTiles(tileHeight: 75, nb: 1),
        PatternNTiles(tileHeight: 75, nb: 2),
    ]),
]),
)

result

PatternCol #

Place a list of patterns in a column.

Parameter Description
patterns A list of patterns

Example #

// A column composed of 1 tile followed by a row of 2 tiles
SliverGridPatternDelegate(patterns: [
    PatternCol(patterns: [
        PatternNTiles(tileHeight: 400, nb: 1),
        PatternNTiles(tileHeight: 200, nb: 2),
    ]),
]),
)

result

Example 2 #

// A row composed of 2 vertical tiles followed horizontally by another tile
SliverGridPatternDelegate(patterns: [
    PatternRow(patterns: [
      PatternCol(patterns: [
        PatternNTiles(tileHeight: 100, nb: 1),
        PatternNTiles(tileHeight: 100, nb: 1),
      ]),
      PatternNTiles(tileHeight: 200, nb: 1),
    ]),
]),
)

result

4
likes
160
points
36
downloads

Publisher

verified publisheryannickpoirier.fr

Weekly Downloads

Flutter Sliver Grid delegate to generate box patterns for SliverGrid.

Repository (GitHub)

Documentation

API reference

License

MIT (license)

Dependencies

flutter

More

Packages that depend on flutter_grid_pattern