在 Flutter 中，如何创建像提供的图像中那样的自定义按钮？

Question

我如何在 flutter 中创建这样的东西？

Answer 1

最快的方法是使用容器，然后向其中添加手势检测器。

import 'package:flutter/material.dart';

class CircularButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {},
      child: Container(
        width: 50,
        height: 50,
        decoration: BoxDecoration(color: Colors.blue, shape: BoxShape.circle),
        child: Icon(Icons.add, color: Colors.white),
      ),
    );
  }
}

另一方面，奇怪的形状可以通过两种方式实现。您可以创建一个具有两个形状的单个容器，其中一个形状夹住另一个形状。这是我心中的

most straightforward

路径，但正确的方法是重写渲染方法，然后编写自定义坐标。

这会让你完成 70% 的任务。

class ButtonWithCurve extends CustomPainter{
  
  @override
  void paint(Canvas canvas, Size size) {
    
    

  // Square
  
  Paint paint_stroke_1 = Paint()
      ..color = const Color.fromARGB(255, 33, 150, 243)
      ..style = PaintingStyle.stroke
      ..strokeWidth = size.width*0.00
      ..strokeCap = StrokeCap.butt
      ..strokeJoin = StrokeJoin.miter;
     
         
    Path path_1 = Path();
    path_1.moveTo(0,0);
    path_1.quadraticBezierTo(size.width*0.4431818,0,size.width*0.5909091,0);
    path_1.quadraticBezierTo(size.width*0.6138636,size.height*0.7354167,size.width*0.9990909,size.height*1.0016667);
    path_1.lineTo(0,size.height*1.0033333);
    path_1.lineTo(0,0);
    path_1.close();

    canvas.drawPath(path_1, paint_stroke_1);
  
    
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
  
}