【Flutter】六角形グリッドUIを完全自作！RenderObjectWidgetと幾何学計算で作るハニカム構造ウィジェット【HexGrid】

import 'package:flutter/material.dart';

class HexGridRenderObjectWidget extends LeafRenderObjectWidget {
  final double cellRadius;
  final double cellSpacing;
  final int columns;
  final int rows;
  final Color defaultCellColor; // セルのデフォルトの色
  final Color selectedCellColor;
  final ValueChanged<Offset>? onCellTapped;

  const HexGridRenderObjectWidget({
    super.key,
    required this.cellRadius,
    required this.cellSpacing,
    required this.columns,
    required this.rows,
    this.defaultCellColor = const Colors.black,
    this.selectedCellColor = const Colors.blueAccent,
    this.onCellTapped,
  });

  @override
  RenderObject createRenderObject(BuildContext context) {
    return _RenderHexGrid(
      cellRadius: cellRadius,
      cellSpacing: cellSpacing,
      columns: columns,
      rows: rows,
      defaultCellColor: defaultCellColor,
      selectedCellColor: selectedCellColor,
      onCellTapped: onCellTapped,
    );
  }

  @override
  void updateRenderObject(
    BuildContext context,
    covariant _RenderHexGrid renderObject,
  ) {
    renderObject
      ..cellRadius = cellRadius
      ..cellSpacing = cellSpacing
      ..columns = columns
      ..rows = rows
      ..defaultCellColor = defaultCellColor
      ..selectedCellColor = selectedCellColor
      ..onCellTapped = onCellTapped;
  }
}

Copy

import 'dart:math' as math;

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

class _RenderHexGrid extends RenderBox {
  _RenderHexGrid({
    required double cellRadius,
    required double cellSpacing,
    required int columns,
    required int rows,
    required Color defaultCellColor,
    required Color selectedCellColor,
    ValueChanged<Offset>? onCellTapped,
  }) : _cellRadius = cellRadius,
       _cellSpacing = cellSpacing,
       _columns = math.max(1, columns), // 列数は1以上に制限
       _rows = math.max(1, rows), // 行数は1以上に制限
       _defaultCellColor = defaultCellColor,
       _selectedCellColor = selectedCellColor,
       _onCellTapped = onCellTapped {
    _updateHexPath(); // 六角形のパスを初期化
  }

  late Path _hexPath; // 六角形のパスを保持するための変数
  final List<Offset> _cellCenters = []; // 各セルの中心座標を保持するリスト
  int? _selectedCellIndex; // 選択されたセルのインデックス

  double _cellRadius;
  double get cellRadius => _cellRadius;
  set cellRadius(double value) {
    if (_cellRadius == value) return;
    _cellRadius = value;
    _updateHexPath();
    markNeedsLayout();
  }

  double _cellSpacing;
  double get cellSpacing => _cellSpacing;
  set cellSpacing(double value) {
    if (_cellSpacing == value) return;
    _cellSpacing = value;
    markNeedsLayout();
  }

  int _columns;
  int get columns => _columns;
  set columns(int value) {
    if (_columns == value) return;
    _columns = value;
    markNeedsLayout();
  }

  int _rows;
  int get rows => _rows;
  set rows(int value) {
    if (_rows == value) return;
    _rows = value;
    markNeedsLayout();
  }

  Color _defaultCellColor;
  Color get defaultCellColor => _defaultCellColor;
  set defaultCellColor(Color value) {
    if (_defaultCellColor == value) return;
    _defaultCellColor = value;
    markNeedsPaint();
  }

  Color _selectedCellColor;
  Color get selectedCellColor => _selectedCellColor;
  set selectedCellColor(Color value) {
    if (_selectedCellColor == value) return;
    _selectedCellColor = value;
    markNeedsPaint();
  }

  ValueChanged<Offset>? _onCellTapped;
  ValueChanged<Offset>? get onCellTapped => _onCellTapped;
  set onCellTapped(ValueChanged<Offset>? value) {
    if (_onCellTapped == value) return;
    _onCellTapped = value;
  }

  void _updateHexPath() {
    _hexPath = Path();
    for (int i = 0; i < 6; i++) {
      final double angle = math.pi / 3 * i; // 30度ずつ回転
      final double x = _cellRadius * math.sin(angle);
      final double y = _cellRadius * math.cos(angle);
      if (i == 0) {
        _hexPath.moveTo(x, y);
      } else {
        _hexPath.lineTo(x, y);
      }
    }
    _hexPath.close();
  }

  @override
  void performLayout() {
    final double hexWidth = cellRadius * math.sqrt(3);
    final double hexHeight = cellRadius * 2;
    final double horizontalSpacing = cellSpacing;
    final double verticalSpacing = cellSpacing * math.sqrt(3) / 2;
    final double oddRowOffset = (hexWidth + cellSpacing) / 2;
    final double hexAdditionalWidth = hexWidth + horizontalSpacing;
    final double hexAdditionalHeight = cellRadius * 1.5 + verticalSpacing;

    double totalWidth =
        hexWidth + (columns - 1) * hexAdditionalWidth;
    if (rows > 1) {
      totalWidth += oddRowOffset;
    }
    final double totalHeight =
        hexHeight + (rows - 1) * hexAdditionalHeight;

    size = constraints.constrain(Size(totalWidth, totalHeight));
    _calculateCellCenters();
  }

  void _calculateCellCenters() {
    _cellCenters.clear();
    final double hexWidth = cellRadius * math.sqrt(3);
    final double hexHeight = cellRadius * 2;
    final double horizontalSpacing = cellSpacing;
    final double verticalSpacing = cellSpacing * math.sqrt(3) / 2;
    final double hexAdditionalWidth = hexWidth + horizontalSpacing;
    final double hexAdditionalHeight = cellRadius * 1.5 + verticalSpacing;
    final double oddRowOffset = (hexWidth + cellSpacing) / 2;

    final double originX = hexWidth / 2;
    final double originY = hexHeight / 2;

    for (int row = 0; row < rows; row++) {
      for (int col = 0; col < columns; col++) {
        double xCenter = originX + col * hexAdditionalWidth;
        if (row % 2 == 1) {
          xCenter += oddRowOffset;
        }
        final double yCenter = originY + row * hexAdditionalHeight;

        _cellCenters.add(Offset(xCenter, yCenter));
      }
    }
  }

  @override
  void paint(PaintingContext context, Offset offset) {
    final Canvas canvas = context.canvas;
    final Paint defaultPaint = Paint()..color = defaultCellColor;
    final Paint selectedPaint = Paint()..color = selectedCellColor;

    for (int i = 0; i < _cellCenters.length; i++) {
      final Offset center = _cellCenters[i];
      final bool isSelected = i == _selectedCellIndex;

      canvas.save();
      canvas.translate(offset.dx + center.dx, offset.dy + center.dy);
      canvas.drawPath(_hexPath, isSelected ? selectedPaint : defaultPaint);
      canvas.restore();
    }
  }

  @override
  bool hitTestSelf(Offset position) => size.contains(position);

  @override
  void handleEvent(PointerEvent event, covariant HitTestEntry entry) {
    if (event is PointerDownEvent) {
      final Offset localPosition = event.localPosition;
      for (int i = 0; i < _cellCenters.length; i++) {
        final Offset center = _cellCenters[i];
        if ((localPosition - center).distance <= _cellRadius) {
          _selectedCellIndex = (_selectedCellIndex == i) ? null : i;
          _onCellTapped?.call(center);
          markNeedsPaint();
          return;
        }
      }
      _selectedCellIndex = null;
      markNeedsPaint();
    }
  }
}

Copy

class _RenderHexGrid extends RenderBox {
  _RenderHexGrid({
    required double cellRadius,
    required double cellSpacing,
    required int columns,
    required int rows,
    required Color defaultCellColor,
    required Color selectedCellColor,
    ValueChanged<Offset>? onCellTapped,
  }) : _cellRadius = cellRadius,
       _cellSpacing = cellSpacing,
       _columns = math.max(1, columns), // 列数は1以上に制限
       _rows = math.max(1, rows), // 行数は1以上に制限
       _defaultCellColor = defaultCellColor,
       _selectedCellColor = selectedCellColor,
       _onCellTapped = onCellTapped {
    _updateHexPath(); // 六角形のパスを初期化
  }

Copy

  double _cellRadius;

  // getter
  double get cellRadius => _cellRadius;

  // setter 
  set cellRadius(double value) {
    if (_cellRadius == value) return;
    _cellRadius = value;
    _updateHexPath();
    markNeedsLayout();
  }

Copy

  void _updateHexPath() {
    _hexPath = Path();
    for (int i = 0; i < 6; i++) {
      final double angle = math.pi / 3 * i;
      final double x = _cellRadius * math.sin(angle);
      final double y = _cellRadius * math.cos(angle);
      if (i == 0) {
        _hexPath.moveTo(x, y);
      } else {
        _hexPath.lineTo(x, y);
      }
    }
    _hexPath.close();
  }

Copy

  @override
  void performLayout() {
    // 六角形の基本寸法の計算
    final double hexWidth = cellRadius * math.sqrt(3);
    final double hexHeight = cellRadius * 2;

    // 六角形間の間隔を考慮した移動量
    final double horizontalSpacing = cellSpacing;
    final double verticalSpacing = cellSpacing * math.sqrt(3) / 2;

    // 隣接するセルの中心への移動距離
    final double hexAdditionalWidth = hexWidth + horizontalSpacing;
    final double hexAdditionalHeight = cellRadius * 1.5 + verticalSpacing;

    // 奇数行の六角形を水平方向に半セル分ずらすためのオフセット
    final double oddRowOffset = (hexWidth + cellSpacing) / 2;

    // グリッド全体のサイズを決定
    double totalWidth = hexWidth + (columns - 1) * hexAdditionalWidth;
    if (rows > 1) {
      totalWidth += oddRowOffset;
    }
    final double totalHeight = hexHeight + (rows - 1) * hexAdditionalHeight;

    size = constraints.constrain(Size(totalWidth, totalHeight));
    _calculateCellCenters();
  }

Copy

  void _calculateCellCenters() {
    _cellCenters.clear();
    // レイアウト計算で定義した値の再利用
    final double hexWidth = cellRadius * math.sqrt(3);
    final double hexHeight = cellRadius * 2;
    final double horizontalSpacing = cellSpacing;
    final double verticalSpacing = cellSpacing * math.sqrt(3) / 2;
    final double oddRowOffset = (hexWidth + cellSpacing) / 2;
    final double hexAdditionalWidth = hexWidth + horizontalSpacing;
    final double hexAdditionalHeight = cellRadius * 1.5 + verticalSpacing;

    final double originX = hexWidth / 2;
    final double originY = hexHeight / 2;

    for (int row = 0; row < rows; row++) {
      for (int col = 0; col < columns; col++) {
        double xCenter = originX + col * hexAdditionalWidth;
        // 奇数行の場合、X座標にオフセットを適用
        if (row % 2 == 1) {
          xCenter += oddRowOffset;
        }
        final double yCenter = originY + row * hexAdditionalHeight;

        _cellCenters.add(Offset(xCenter, yCenter));
      }
    }
  }

Copy

  @override
  void paint(PaintingContext context, Offset offset) {
    final Canvas canvas = context.canvas;
    final Paint defaultPaint = Paint()..color = defaultCellColor;
    final Paint selectedPaint = Paint()..color = selectedCellColor;

    for (int i = 0; i < _cellCenters.length; i++) {
      final Offset center = _cellCenters[i];
      final bool isSelected = i == _selectedCellIndex;

      canvas.save();
      canvas.translate(offset.dx + center.dx, offset.dy + center.dy);
      canvas.drawPath(_hexPath, isSelected ? selectedPaint : defaultPaint);
      canvas.restore();
    }
  }

Copy

  @override
  bool hitTestSelf(Offset position) => size.contains(position);

  @override
  void handleEvent(PointerEvent event, covariant HitTestEntry entry) {
    if (event is PointerDownEvent) {
      final Offset localPosition = event.localPosition;
      for (int i = 0; i < _cellCenters.length; i++) {
        final Offset center = _cellCenters[i];
        if ((localPosition - center).distance <= _cellRadius) {
          _selectedCellIndex = (_selectedCellIndex == i) ? null : i;
          _onCellTapped?.call(center);
          markNeedsPaint();
          return;
        }
      }
      _selectedCellIndex = null;
      markNeedsPaint();
    }
  }

Copy

import 'package:flutter/material.dart';
import 'package:some/hex_grid_render_object_widget.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(title: 'Hex Grid Demo', home: const HexGridPage());
  }
}

class HexGridPage extends StatefulWidget {
  const HexGridPage({super.key});

  @override
  State<HexGridPage> createState() => _HexGridPageState();
}

class _HexGridPageState extends State<HexGridPage> {
  double _cellRadius = 40.0;
  double _cellSpacing = 2.0;
  int _columns = 5;
  int _rows = 5;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Hex Grid Demo')),
      body: Center(
        child: SingleChildScrollView(
          child: SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: HexGridRenderObjectWidget(
              cellRadius: _cellRadius,
              cellSpacing: _cellSpacing,
              columns: _columns,
              rows: _rows,
            ),
          ),
        ),
      ),
      bottomNavigationBar: _buildParameterControls(),
    );
  }

  Widget _buildParameterControls() {
    return Container(
      padding: const EdgeInsets.all(16.0),
      color: Colors.grey[100],
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          _buildSlider(
            title: 'Cell Radius',
            value: _cellRadius,
            min: 20.0,
            max: 100.0,
            onChanged: (value) {
              setState(() {
                _cellRadius = value;
              });
            },
          ),
          _buildSlider(
            title: 'Cell Spacing',
            value: _cellSpacing,
            min: 0.0,
            max: 10.0,
            onChanged: (value) {
              setState(() {
                _cellSpacing = value;
              });
            },
          ),
          _buildSlider(
            title: 'Columns',
            value: _columns.toDouble(),
            min: 1.0,
            max: 15.0,
            divisions: 14,
            onChanged: (value) {
              setState(() {
                _columns = value.toInt();
              });
            },
          ),
          _buildSlider(
            title: 'Rows',
            value: _rows.toDouble(),
            min: 1.0,
            max: 15.0,
            divisions: 14,
            onChanged: (value) {
              setState(() {
                _rows = value.toInt();
              });
            },
          ),
        ],
      ),
    );
  }

  Widget _buildSlider({
    required String title,
    required double value,
    required double min,
    required double max,
    int? divisions,
    required ValueChanged<double> onChanged,
  }) {
    return Row(
      children: [
        SizedBox(
          width: 100,
          child: Text('$title: ${value.toStringAsFixed(1)}'),
        ),
        Expanded(
          child: Slider(
            value: value,
            min: min,
            max: max,
            divisions: divisions,
            onChanged: onChanged,
          ),
        ),
      ],
    );
  }
}

Copy