Блог

Главная - Вопросы по программированию - Как спроектировать кнопку с прямоугольным верхом и полукруглым низом

Как спроектировать кнопку с прямоугольным верхом и полукруглым низом

#flutter #flutter-layout

Вопрос:

введите описание изображения здесь

Пожалуйста, помогите мне создать эту фигуру в flutter.

Комментарии:

1. используйте виджет CustomPaint api.flutter.dev/flutter/widgets/CustomPaint-class.html

Ответ №1:

Я не знаю, достаточно ли этого для тебя, потому что это не совсем то же самое

 Container(
      width: 140,
      height: 50,
      child: Card(
        color: Colors.amber,//Use a gradient here
        shadowColor: Color.fromRGBO(0, 0, 0, 170),
        elevation: 20.0,
        clipBehavior: Clip.hardEdge,
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.only(bottomRight: Radius.circular(30.0), bottomLeft: Radius.circular(30.0),)),
        child: InkWell(
          child: Padding(padding: EdgeInsets.only(left: 15),
            child: Row(
              children: [
                Icon(Icons.add_circle_outline_sharp,
                color: Colors.white,),//Change this for your icon
                Text(" My Shoppe!",
                  style: TextStyle(
                    color: Colors.white
                  ),),//Change this for your text font
              ],
            ),),
          onTap: () {},
        ),
      ),
    ),

Самый простой способ-создать эту фигуру на figma или photoshop, затем использовать ее в качестве изображения внутри контейнера и сложить контейнер с текстом и значком

Метки: