hexagonal_grid_widget 1.0.3

hexagonal_grid_widget #

A hex layout widget that supports infinite omniscroll and is highly customizable. Only the hex widgets that are viewable are rendered while all others are not, thus making this widget very efficient even at larger datasets.

To Publish to Pub #

--- or ---

  • Make updates to code
  • Update pubspec.yaml to the desired version number
  • Update CHANGELOG.md with the version number and changes
  • pub publish --dry-run
  • pub publish

[1.0.3] - 12/10/2019

  • Implemented ability to choose flat or pointy hex layouts. Defaulting to flat to preserve original functionality.

[1.0.2] - 03/01/2019

  • Fixed a bug that did not allow for the hex grid children to update properly on state change

[1.0.0] - 01/17/2019

  • Packagized this hex grid widget that I have been using in my own projects so other projects and packages can use it. Provides a highly customizable and performance conscious widget to render a list of objects marshaled into a widget as a hex layout.


import 'dart:math';

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:hexagonal_grid/hexagonal_grid.dart';
import 'package:hexagonal_grid_widget/hex_grid_child.dart';
import 'package:hexagonal_grid_widget/hex_grid_context.dart';
import 'package:hexagonal_grid_widget/hex_grid_widget.dart';

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

class HexGridWidgetExample extends StatelessWidget {
  final double _minHexWidgetSize = 24;
  final double _maxHexWidgetSize = 128;
  final double _scaleFactor = 0.2;
  final double _densityFactor = 1.75;
  final double _velocityFactor = 0.3;
  final bool _flatLayout = true;
  final int _numOfHexGridChildWidgets = 10;

  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Example"),
          centerTitle: true,
        body: HexGridWidget(
            children: createHexGridChildren(_numOfHexGridChildWidgets),
            hexGridContext: HexGridContext(_minHexWidgetSize, _maxHexWidgetSize,
                _scaleFactor, _densityFactor, _velocityFactor, _flatLayout)));

  //This would likely be a service (RESTful or DB) that retrieves some data and
  // marshals them into HexGridChild objects
  List<HexGridChild> createHexGridChildren(int numOfChildren) {
    List<HexGridChild> children = [];

    for (int i = 0; i < numOfChildren; i++) {

    return children;

//This class can contain all the properties you'd like, but it must extends
// HexGridChild and thus implement the toHexWidget and getScaledSized methods.
// The methods provide most fields the HexGridWidget is aware of to allow for
// as much flexibility when building and sizing your HexGridChild widget.
class ExampleHexGridChild extends HexGridChild {
  final int index;
  final List<Color> orbitalColors = [


  //This is only one example of the customization you can expect from these
  // framework hooks
  Widget toHexWidget(BuildContext context, HexGridContext hexGridContext,
      double size, UIHex hex) {
    return Container(
        padding: EdgeInsets.all((hexGridContext.maxSize - size) / 2),
        child: Container(
            width: size,
            height: size,
            decoration: BoxDecoration(
              color: orbitalColors[hex.orbital % orbitalColors.length],
              shape: BoxShape.circle,

  double getScaledSize(
      HexGridContext hexGridContext, double distanceFromOrigin) {
    double scaledSize = hexGridContext.maxSize -
        (distanceFromOrigin * hexGridContext.scaleFactor);
    return max(scaledSize, hexGridContext.minSize);

Use this package as a library

1. Depend on it

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

  hexagonal_grid_widget: ^1.0.3

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:hexagonal_grid_widget/hex_grid_child.dart';
import 'package:hexagonal_grid_widget/hex_grid_context.dart';
import 'package:hexagonal_grid_widget/hex_grid_widget.dart';
Describes how popular the package is relative to other packages. [more]
Code health derived from static analysis. [more]
Reflects how tidy and up-to-date the package is. [more]
Weighted score of the above. [more]
Learn more about scoring.

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

  • Dart: 2.7.1
  • pana: 0.13.5
  • Flutter: 1.12.13+hotfix.7

Health suggestions

Format lib/hex_grid_context.dart.

Run flutter format to format lib/hex_grid_context.dart.

Format lib/hex_grid_widget.dart.

Run flutter format to format lib/hex_grid_widget.dart.


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0-dev.68.0 <3.0.0
after_layout ^1.0.7 1.0.7+2
flutter 0.0.0
hexagonal_grid ^1.0.4 1.0.5
tuple ^1.0.2 1.0.3
Transitive dependencies
collection 1.14.11 1.14.12
matcher 0.12.6
meta 1.1.8
path 1.6.4
quiver 2.1.2+1
sky_engine 0.0.99
stack_trace 1.9.3
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies