The SpannableGrid is a Flutter widget that allows its cells to span columns and rows and supports moving cells inside the grid.

Overview

Spannable Grid

pub version MIT License

The SpannableGrid is a Flutter widget that allows its cells to span columns and rows and supports moving cells inside the grid.

SpannableGrid Demo

Features

  • The widget is sized itself to fit its parent width and/or height
  • 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
  • Various editing strategies
  • Styling the grid and its cells

Usage

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

dependencies:
  spannable_grid: ^0.3.0

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.

    final cells = <SpannableGridCellData>[];
    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,
  onCellChanged: (cell) { print('Cell ${cell.id} changed'); },
),

Editing mode

In the editing mode user can move cells to another empty place withing the grid.

Use editingStrategy parameter to define the behaviour in the editing mode. It has following options:

Name Description
allowed User can move the cells
enterOnLongTap User should use a long tap on the cell to enter the editing mode
exitOnTap When finished moving the cell, user should tap the cell to exit the editing mode
immediate User can move cells immediately, just by starting dragging them
moveOnlyToNearby The cell can be moved only to nearby empty cells

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.

The updated cell is returned in onCellChanged callback.

Styling

Use the style parameter to style the appearance of the grid and its cells.

The following options are supported:

Name Description
backgroundColor It is used to display empty cells, when the emptyCellView parameter is not specified.
contentOpacity It is used in the editing mode to make the content cells transparent, so the underlying grid structure becomes visible.
selectedCellDecoration An additional decoration that is applied to the selected cell to highlight it in the editing mode.
spacing A space between gird cells.

When the showGrid parameter is true the grid's structure is always visible. Otherwise it appears only in the editing mode.

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

You might also like...

Responsive Widgets Prefix allows you to add the "Responsive" prefix to any widget that needs scaling or font size increases

Responsive Widgets Prefix allows you to add the

Responsive Widgets Prefix allows you to add the Responsive prefix to any widget that needs scaling or font size increases (for varying device screen sizes).

Apr 18, 2022

A dart package to display a horizontal bar of customisable toggle tabs. Supports iOS and Android.

A dart package to display a horizontal bar of customisable toggle tabs. Supports iOS and Android.

toggle_bar A dart package to display a horizontal bar of customisable toggle tabs. Supports iOS and Android. Installation Depend on it. dependencies:

Jul 13, 2022

Dialog-manager - A Flutter package that allows for neater declaration, abstraction and use of customisable dialogs

flutter_dialog_manager A Flutter package that allows for neater declaration, abs

Dec 28, 2022

SmartSelect allows you to easily convert your usual form select or dropdown into dynamic page

SmartSelect allows you to easily convert your usual form select or dropdown into dynamic page

SmartSelect allows you to easily convert your usual form select or dropdown into dynamic page, popup dialog, or sliding bottom sheet with various choices input such as radio, checkbox, switch, chips, or even custom input. Supports single and multiple choice.

Dec 20, 2022

A flutter carousel widget, support infinite scroll, and custom child widget.

A flutter carousel widget, support infinite scroll, and custom child widget.

carousel_slider A carousel slider widget. Features Infinite scroll Custom child widgets Auto play Supported platforms Flutter Android Flutter iOS Flut

Nov 25, 2021

Progress Dialog widget for flutter projects with ability to customize loading widget, background color and background blur.

Progress Dialog widget for flutter projects with ability to customize loading widget, background color and background blur.

DISCONTINUED Checkout ArsDialog ars_progress_dialog Customizable progress dialog for Flutter applications with smooth animation for background dim col

Apr 15, 2022

A simple Flutter widget to add in the widget tree when you want to show nothing, with minimal impact on performance.

nil A simple widget to add in the widget tree when you want to show nothing, with minimal impact on performance. Why? Sometimes, according to a condit

Dec 22, 2022

A Flutter Widget to make interactive timeline widget.

A Flutter Widget to make interactive timeline widget.

Bubble Timeline Package A Flutter Widget to make interactive timeline widget. This widget can be used to make Event Timelines, or Timelines for certai

Sep 22, 2022

📸 Easy to use yet very customizable zoomable image widget for Flutter, Photo View provides a gesture sensitive zoomable widget.

📸 Easy to use yet very customizable zoomable image widget for Flutter, Photo View provides a gesture sensitive zoomable widget.

📸 Easy to use yet very customizable zoomable image widget for Flutter, Photo View provides a gesture sensitive zoomable widget. Photo View is largely used to show interacive images and other stuff such as SVG.

Jan 7, 2023
Comments
  • GestureDetector drag fix

    GestureDetector drag fix

    Switch GestureDetector from onTapDown to onPanDown for editingStrategy.exitOnTap.
    This fixes the issue where sometimes the dragging does not react due to delay of onTapDown.

    opened by f3l1x98 0
  • Resizeable Cells

    Resizeable Cells

    I would love to use this technology, I need to simply be able to change the row/column and rowSpan/colSpan for a cell. I personally only need columns.

    opened by raymadigan 0
Owner
Evgeny Cherkasov
Mobile Application Developer | Android | Flutter | Java | Kotlin | Dart
Evgeny Cherkasov
This package supports drag & drop widgets inside the GridView.builder for multiplatform

This package supports drag & drop widgets inside the GridView.builder for multiplatform. It provides all the properties which are available in Gridview. builder and easy to implement with the few lines of code.

MindInventory 68 Dec 29, 2022
A widget that imposes different constraints on its child than it gets from its parent

A widget that imposes different constraints on its child than it gets from its parent, possibly allowing the child to overflow the parent. Similar to `OverflowBox` except that the unconstrained width or height is sized to the intrinsic size of the child, instead of being assumed to be infinite, which allows IntrinsicSizeOverflowBox to be used in a `Scrollable` widget.

Ron Booth 3 Dec 7, 2022
An alternative to Overlay which allows you to easily render and hit test a widget outside its parent bounds

An alternative to Overlay which allows you to easily render and hit test a widget outside its parent bounds. Based on the original idea by @shrouxm he

gskinner team 26 Dec 31, 2022
Similar to Weibo dynamics, WeChat circle of friends, nine grid view controls to display pictures. Support single big picture preview.

Similar to Weibo dynamics, WeChat circle of friends, nine grid view controls to display pictures. Support single big picture preview.

Flutter中国开源项目 296 Dec 28, 2022
A dice game made with Flutter and its Animation Widget

Jogo de dado feito com animação em flutter Esse projeto é um jogo de dado feito com Flutter e seus Widget de animação. Não foi necessário uso de pacot

Francis Santos 0 May 10, 2022
A widget which implicitly launches a hero animation when its position changed within the same route.

local_hero A widget which implicitly launches a hero animation when its position changed within the same route. Getting started In the pubspec.yaml of

Romain Rastel 174 Jan 6, 2023
AdvFAB - An Advanced floating action button that expands itself to reveal its hidden widget

AdvFAB (More Than Just A Floating Action Button) AdvFAB is An Advanced floating action button that expands itself to reveal its hidden widget. It can

null 19 Nov 4, 2022
A Highly customizable Phone input Flutter widget that supports country code, validation and contact picker.

A Highly customizable Phone input Flutter widget that supports country code, validation and contact picker.

null 6 Jun 7, 2022
An extensive snap tool/widget for Flutter that allows very flexible snap management and snapping between your widgets.

An extensive snap tool/widget for Flutter that allows very flexible snap management and snapping between your widgets.

AliYigitBireroglu 101 Dec 16, 2022
The flutter_otp_text_field package for flutter is a TextField widget that allows you to display different style pin.

flutter_otp_text_field flutter_otp_text_field The flutter_otp_text_field package for flutter is a TextField widget that allows you to display differen

David-Legend 30 Nov 8, 2022