Виджет кнопки нестандартной формы Flutter

Question

Привет, я конвертирую дизайн html / css в код дротика, чтобы создать этот пользовательский виджет в форме кнопки. Думаю, нужны навыки художника. Кто-нибудь может помочь?

Answer 1

Вы можете использовать BeveledRectangleBorder чтобы получить эту форму:-

      Material(
            clipBehavior: Clip.antiAlias,
            color: Colors.black,
            shape: BeveledRectangleBorder(
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(30),
                bottomRight: Radius.circular(30),
              ),
            ),
            child: Container(
              alignment:Alignment.center,
              height: 80,
              width: 180,
              color:Colors.black,
              child: Text("Apply now",style:TextStyle(color:Colors.white)),
            ),
          ),

Answer 2

Чтобы создать такую ​​форму, вам нужно работать с CustomPainter.Посмотрите на это репо, оно имеет специально разработанную кнопку. Чтобы быть конкретным, класс ShapePainter - это то, что вы ищете.

Answer 3

Чтобы сделать кнопки нестандартной формы во Flutter, укажите свою форму в shapeатрибут вашей кнопки style.

      ElevatedButton(
    style: ElevatedButton.styleFrom(
        shape: const MyShapeBorder(),
        primary: Colors.myColor
    ),
    onPressed: () {
        doSomething();
    },
    child: Text("My Button")
)

Вы можете использовать любую из кнопок Материала таким образом.

Ваш MyShapeBorderкласс должен переопределить getInnerPath(), getOuterPath(), paint(), scale(), а также copyWith(). Вы можете продлить OutlinedBorder.

Не забудьте центрировать фигуру, чтобы текст правильно отображался внутри!