hexagonal_grid_widget 1.0.2

  • README.md
  • Example
  • Installing
  • Versions
  • 76

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.2] - 03/01/2019

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

[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 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)));

  //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.2

2. Install it

You can install packages from the command line:

with Flutter:

$ flutter packages get

Alternatively, your editor might support flutter packages 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';
Version Uploaded Documentation Archive
1.0.2 Mar 2, 2019 Go to the documentation of hexagonal_grid_widget 1.0.2 Download hexagonal_grid_widget 1.0.2 archive
1.0.1 Jan 17, 2019 Go to the documentation of hexagonal_grid_widget 1.0.1 Download hexagonal_grid_widget 1.0.1 archive
1.0.0 Jan 17, 2019 Go to the documentation of hexagonal_grid_widget 1.0.0 Download hexagonal_grid_widget 1.0.0 archive
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 Apr 16, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.2.0
  • pana: 0.12.14
  • Flutter: 1.4.7


Detected platforms: Flutter

References Flutter, and has no conflicting libraries.


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
flutter 0.0.0
hexagonal_grid ^1.0.4 1.0.5
tuple ^1.0.2 1.0.2
Transitive dependencies
collection 1.14.11
matcher 0.12.5
meta 1.1.6 1.1.7
path 1.6.2
quiver 2.0.3
sky_engine 0.0.99
stack_trace 1.9.3
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies