Flutter에서 Widget이 Material Design 설명서에 따라 구성되었는지 확인하는 방법

개시하다

Flutter로 개발하면 대부분 Material Componentspackage:flutter/material.dart를 사용한다고 생각합니다.
Components - Material Design
어차피 부품(이하 부품이라고 함)의 구성도 머티리얼 디자인 가이드라인(부품과 8dp 간격의 격자를 맞추는 것)에 따르면 예뻐 보이고 쉽게 볼 수 있다.
Spacing methods - Material Design
그러나 Flutter 표준 디버깅 기능Show debug paint에서는 애플릿이'8dp 간격의 격자'(이하 격자)를 따라가는지 확인할 수 없다.
좋은 방법이 있나요?이렇게 혼잣말을 할 때 다음과 같은 조언을 받았다.
똑똑하다!그래서 우리는 격자를 그리는 데 사용되는 일반적인 Widget을 만들었다.
또 제작된 부품은 포장해 이곳에 공개했다.
material_spacing_checker | Flutter Package
본고는 격자를 그리는 작은 위젯을 만드는 방법을 소개했다.

메서드

방법상 다음과 같은 절차를 채택하다.

화면 크기 확보

화면 사이즈를 바탕으로 격자를 그릴 때 세로로 몇 개의 선을 그리는 것이 좋다

CustomPaint를 사용하여 메쉬 그리기

Stack를 사용하여 메쉬CustomPaint와 기타 Widget을 중첩

그럼 이걸로 하자.

설치 방법

우선 화면의 사이즈는 다음과 같다.

final screenSize = MediaQuery.of(context).size;

이것screenSize을 바탕으로 종횡 방향으로 그려야 할 선의 수량을 계산한다.

/// 8dpグリッドを描画するCustomPainter
class _GridPaint extends CustomPainter {
  _GridPaint({
    @required this.screenSize,
  });
  final Size screenSize;

  @override
  void paint(Canvas canvas, Size size) {
    final lineSpacing = 8;
    // 画面トップは4dp間隔を空けないと、グリッドがずれる
    final topMargin = 4;

    // +1しておかないと、線の数が足りないことがある
    final horizontalLineCount = screenSize.width ~/ lineSpacing + 1;
    final paint = Paint()
      ..color = Colors.red.withOpacity(0.7);

    // 水平方向に線を引く
    for (var i = 0; i < horizontalLineCount; i++) {
      canvas.drawLine(
        Offset(
          (lineSpacing * i).toDouble(),
          0,
        ),
        Offset(
          (lineSpacing * i).toDouble(),
          screenSize.height,
        ),
        paint,
      );
    }

    // 垂直方向に線を引く
    for (var i = 0; i < verticalLineCount; i++) {
      canvas.drawLine(
        Offset(
          0,
          (lineSpacing * i).toDouble() + topMargin,
        ),
        Offset(
          screenSize.width,
          (lineSpacing * i).toDouble() + topMargin,
        ),
        paint,
      );
    }
  }
}

이후 Stack를 사용하여 겹치면 다른 작은 위젯에 격자를 그릴 수 있습니다.

Widget build(BuildContext context) {
    final screenSize = MediaQuery.of(context).size;
    return Stack(
      children: [
        child,// グリッドを重ね合わせたいWidget
        CustomPaint(
          painter: _GridPaint(
            screenSize: screenSize,
          ),
        )
      ],
    );
  }

실제로 사용하면 이런 느낌이 든다.

참고 문헌

Spacing methods - Material Design