[flutter (플루터 앱 개발)] Flutter Canvas 그리기 예제 - (2) Grid 격자 그리기

Flutter의 Canvas를 활용하여 그리드를 그리는 방법을 두 가지로 설명합니다. 첫 번째는 화면 크기에 맞춘 10x10 Grid, 두 번째는 고정된 간격으로 그리는 Grid입니다. 아래는 코드와 설명을 포함한 가이드입니다.

1. 10x10 Grid 그리기

화면 크기에 따라 10x10으로 동적으로 크기가 조정되는 격자입니다.

코드

 import 'package:flutter/material.dart';

class GridPage extends StatelessWidget {
  const GridPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomPaint(
        child: Container(),
        painter: GridPainter(),
      ),
    );
  }
}

class GridPainter extends CustomPainter {
  static const int rows = 10;
  static const int cols = 10;

  @override
  void paint(Canvas canvas, Size size) {
    // 배경 색상
    var backgroundPaint = Paint()
      ..style = PaintingStyle.fill
      ..color = Colors.lime
      ..isAntiAlias = true;

    Rect rect = Rect.fromLTWH(0, 0, size.width, size.height);
    canvas.drawRect(rect, backgroundPaint);

    // 격자 선 색상
    var linePaint = Paint()
      ..style = PaintingStyle.stroke
      ..color = Colors.black38
      ..isAntiAlias = true;

    final double gridWidth = size.width / cols;
    final double gridHeight = size.height / rows;

    // 가로선
    for (int row = 0; row <= rows; row++) {
      final double y = row * gridHeight;
      canvas.drawLine(Offset(0, y), Offset(size.width, y), linePaint);
    }

    // 세로선
    for (int col = 0; col <= cols; col++) {
      final double x = col * gridWidth;
      canvas.drawLine(Offset(x, 0), Offset(x, size.height), linePaint);
    }
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

설명

• CustomPainter를 활용하여 격자를 그립니다.
• paint 메서드에서 Canvas와 Size를 사용하여 그리드를 동적으로 계산합니다.
• 화면 크기에 따라 각 셀의 크기가 동적으로 변경됩니다.

2. 고정 간격 Grid 그리기

화면 크기와 상관없이 고정된 간격으로 격자를 그립니다.

코드

 import 'package:flutter/material.dart';

class GridPage extends StatelessWidget {
  const GridPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomPaint(
        child: Container(),
        painter: GridPainter(),
      ),
    );
  }
}

class GridPainter extends CustomPainter {
  static const double gridWidth = 50.0;
  static const double gridHeight = 50.0;

  @override
  void paint(Canvas canvas, Size size) {
    // 배경 색상
    var backgroundPaint = Paint()
      ..style = PaintingStyle.fill
      ..color = Colors.lime
      ..isAntiAlias = true;

    canvas.drawRect(Rect.fromLTWH(0, 0, size.width, size.height), backgroundPaint);

    // 격자 선 색상
    var linePaint = Paint()
      ..style = PaintingStyle.stroke
      ..color = Colors.black38
      ..isAntiAlias = true;

    // 가로선
    for (double y = 0; y <= size.height; y += gridHeight) {
      canvas.drawLine(Offset(0, y), Offset(size.width, y), linePaint);
    }

    // 세로선
    for (double x = 0; x <= size.width; x += gridWidth) {
      canvas.drawLine(Offset(x, 0), Offset(x, size.height), linePaint);
    }
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

설명

• gridWidth와 gridHeight를 고정값으로 설정하여 일정 간격의 격자를 만듭니다.
• 화면 크기가 작아도 고정된 간격의 격자가 유지됩니다.

결론

Flutter Canvas는 다양한 방식으로 화면에 그리드를 그릴 수 있는 강력한 도구입니다. 첫 번째 방법은 동적 크기 조절이 필요한 경우, 두 번째 방법은 고정된 격자를 원하는 경우에 적합합니다. 두 방법 모두 Flutter 앱 디자인에 유용하게 활용될 수 있습니다.

해당 코드로 직접 격자를 구현하며 Flutter Canvas의 가능성을 탐험해보세요!