spannable_grid 0.1.0

  • Readme
  • Changelog
  • Example
  • Installing
  • 72

Spannable Grid #

A Flutter SpannableGrid widget that allows it's cells to span columns and rows and supports moving cells inside the grid.

SpannableGrid Demo

Features #

  • The widget is sized to fit its parent width
  • The number of columns and rows is fixed
  • Cells can span columns and rows
  • Supports editing mode, in which cells can be moved inside the grid to available places
  • Uses theme's accent color to highlight the editing cell

Usage #

In the dependencies: section of your pubspec.yaml, add the following line:

dependencies:
  spannable_grid: ^0.0.1

Import the package

import 'package:spannable_grid/spannable_grid.dart';

Create grid items

The SpannableGrid widget requires the list of SpannableGridCellData objects that define cells appearance.

    List<SpannableGridCellData> cells = List();
    cells.add(SpannableGridCellData(
      column: 1,
      row: 1,
      columnSpan: 2,
      rowSpan: 2,
      id: "Test Cell 1",
      child: Container(
        color: Colors.lime,
        child: Center(
          child: Text("Tile 2x2",
            style: Theme.of(context).textTheme.title,
          ),
        ),
      ),
    ));
    cells.add(SpannableGridCellData(
      column: 4,
      row: 1,
      columnSpan: 1,
      rowSpan: 1,
      id: "Test Cell 2",
      child: Container(
        color: Colors.lime,
        child: Center(
          child: Text("Tile 1x1",
            style: Theme.of(context).textTheme.title,
          ),
        ),
      ),
    ));

Add SpannableGrid widget

SpannableGrid(
  columns: 4,
  rows: 4,
  cells: cells,
  spacing: 2.0,
  onCellChanged: (cell) { print('Cell ${cell.id} changed'); },
),

Editing mode

User can enter editing mode by long press on the cell.

In the editing mode the editing cell is highlighted, other cells are faded and the grid structure becomes visible. User can move editing cell to another available place inside the grid.

Tap on editing cell will exit the editing mode. The updated cell is returned in onCellChanged callback.

Full example

You can find demo app in the example project.

More #

Changelog

Please check the Changelog page for the latest version and changes.

License

Author: Evgeny Cherkasov.

This package is published under MIT License.

Contributions

Feel free to contribute to this project.

Flutter

[0.1.0] - 2020-03-01 #

  • Added editingOnLongPress parameter, that controls if the editing mode is allowed

[0.0.4] - 2020-01-24 #

  • Added editingGridColor and editingCellDecoration parameters to customize the widget appearance in editing mode

[0.0.3] - 2020-01-20 #

  • Update README.md

[0.0.1] - 2020-01-20 #

  • SpannableGrid is a custom grid view that allows its cells to span columns and rows. The grid has a fixed size defined by number of columns and rows. The widget supports edit mode, in which user can move cells in the grid.

example/lib/main.dart

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'SpannableGrid Demo',
      theme: ThemeData(
        primarySwatch: Colors.blueGrey,
        accentColor: Colors.amber,
      ),
      home: MyHomePage(title: 'SpannableGrid Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            SpannableGrid(
              columns: 4,
              rows: 4,
              cells: _getCells(),
              spacing: 2.0,
              onCellChanged: (cell) { print('Cell ${cell.id} changed'); },
//              editingOnLongPress: false,
            ),
          ],
        ),
      ),
    );
  }

  List<SpannableGridCellData> _getCells() {
    List<SpannableGridCellData> result = List();
    result.add(SpannableGridCellData(
      column: 1,
      row: 1,
      columnSpan: 2,
      rowSpan: 2,
      id: "Test Cell 1",
      child: Container(
        color: Colors.lime,
        child: Center(
          child: Text("Tile 2x2",
            style: Theme.of(context).textTheme.title,
          ),
        ),
      ),
    ));
    result.add(SpannableGridCellData(
      column: 4,
      row: 1,
      columnSpan: 1,
      rowSpan: 1,
      id: "Test Cell 2",
      child: Container(
        color: Colors.lime,
        child: Center(
          child: Text("Tile 1x1",
            style: Theme.of(context).textTheme.title,
          ),
        ),
      ),
    ));
    result.add(SpannableGridCellData(
      column: 1,
      row: 4,
      columnSpan: 3,
      rowSpan: 1,
      id: "Test Cell 3",
      child: Container(
        color: Colors.lightBlueAccent,
        child: Center(
          child: Text("Tile 3x1",
            style: Theme.of(context).textTheme.title,
          ),
        ),
      ),
    ));
    result.add(SpannableGridCellData(
      column: 4,
      row: 3,
      columnSpan: 1,
      rowSpan: 2,
      id: "Test Cell 4",
      child: Container(
        color: Colors.lightBlueAccent,
        child: Center(
          child: Text("Tile 1x2",
            style: Theme.of(context).textTheme.title,
          ),
        ),
      ),
    ));
    return result;
  }
}

Use this package as a library

1. Depend on it

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


dependencies:
  spannable_grid: ^0.1.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:spannable_grid/spannable_grid.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
44
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]
72
Learn more about scoring.

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

  • Dart: 2.7.1
  • pana: 0.13.6
  • Flutter: 1.12.13+hotfix.8

Health suggestions

Format lib/spannable_grid.dart.

Run flutter format to format lib/spannable_grid.dart.

Dependencies

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