颤振警报对话框形状 - Dart

Flutter是Google推出的一个用于构建跨平台应用程序的框架。框架中包含了非常丰富的组件，以便开发者开发出各种美观、多元化的应用界面。在Flutter的组件库中，有一个叫做showDialog的组件，可以在一定区域内弹出一个提示框。而当这个提示框需要表达紧急程度非常高的警告信息，开发者将需要使用到颤振警报对话框形状。

概述

Flutter提供了一种叫做ShapeBorder的类，用于设置一个边框的形状。它是一个抽象类，官方提供了多个子类，开发者也可以自定义子类。而颤振警报对话框形状，就是一个自定义ShapeBorder的子类，用于实现一个极度突出的尖角效果，以表达强烈的警告信息。

代码

为了方便开发者调用该形状，本文提供了该形状的实现代码，开发者可以直接将其复制粘贴至代码中使用。

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

class ShakeDialogShape extends ShapeBorder {
  @override
  EdgeInsetsGeometry get dimensions => EdgeInsets.zero;

  @override
  ShapeBorder scale(double t) {
    return this;
  }

  @override
  void paint(Canvas canvas, Rect rect, {TextDirection? textDirection}) {
    final double triangleHeight = 20;
    final double halfTriangleBase = triangleHeight / tan(pi / 6);
    final Path path = Path()
      ..moveTo(rect.left, rect.top + triangleHeight)
      ..lineTo(rect.left + halfTriangleBase, rect.top)
      ..lineTo(rect.right - halfTriangleBase, rect.top)
      ..lineTo(rect.right, rect.top + triangleHeight)
      ..lineTo(rect.right, rect.bottom)
      ..lineTo(rect.left, rect.bottom)
      ..close();

    canvas.drawPath(path, Paint()..color = Colors.red);
  }
}

使用

使用ShakeDialogShape，用户可以在ShapeBorder属性上直接传递该类的实例对象。

showDialog(
  context: context,
  builder: (_) {
    return AlertDialog(
      shape: ShakeDialogShape(),
      title: Text('警告'),
      content: Text('致命错误，即将关闭应用！'),
      actions: [
        TextButton(
          onPressed: () => Navigator.of(context).pop(),
          child: Text('确定'),
        ),
      ],
    );
  }
);

上述代码将在屏幕中央弹出一个警告对话框，界面风格极其突出，十分适合表达紧急警告信息。