带边框的菱形按钮

Question

有人知道如何设计这个扣子吗？这是一个镶有边框颜色的菱形按钮。

​

​

Answer 1

结果

​

​

全码

import 'dart:math' as math;

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: Center(
        child: Transform(
          alignment: Alignment.center,
          transform: Matrix4.rotationZ(
            math.pi / 4,
          ),
          child: Container(
            width: 100,
            height: 100,
            decoration: BoxDecoration(
              color: Colors.transparent,
              border: Border.all(
                width: 3,
                color: Colors.amber,
              ),
            ),
            child: InkWell(
              splashColor: Colors.blueAccent,
              onTap: () {},
              child: Center(
                child: Transform(
                  alignment: Alignment.center,
                  transform: Matrix4.rotationZ(
                    -math.pi / 4,
                  ),
                  child: Text(
                    "Click",
                    style: TextStyle(color: Colors.white),
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Answer 2

您有多种方法，您可以创建一个具有边框颜色和透明内部的容器，并使用transform.translate对其进行转换；另一种方法是使用定制的画图，这有点困难。

Answer 3

您应该尝试使用下面的代码，将此依赖项添加到pubspec.yaml文件flutter_custom_clippers：^1.1.2 在这里找到的包裹

          ClipPath(
            clipper: ParallelogramClipper(),
            child: Container(
              height: 50,
              width: 50,
              color: Colors.pinkAccent,
              child: TextButton(
                onPressed: () {
                  print('object');
                },
                child: Text('OK'),
              ),
            ),
          ),