flutter - 带边框的菱形按钮

Question

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

标签： flutterdart

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),
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}