Создайте закругленную кнопку/кнопку с радиусом границы в Flutter

Ответ 1

Вы можете использовать форму для FlatButton и RaisedButton.

для закругленной кнопки:

shape: RoundedRectangleBorder(
        borderRadius: new BorderRadius.circular(18.0),
        side: BorderSide(color: Colors.red)
),

для квадратной кнопки:

shape: RoundedRectangleBorder(
           borderRadius: new BorderRadius.circular(0.0),
           side: BorderSide(color: Colors.red)
),

Row(
    mainAxisAlignment: MainAxisAlignment.end,
    children: <Widget>[
      FlatButton(
        shape: new RoundedRectangleBorder(
            borderRadius: new BorderRadius.circular(18.0),
            side: BorderSide(color: Colors.red)),
        color: Colors.white,
        textColor: Colors.red,
        padding: EdgeInsets.all(8.0),
        onPressed: () {},
        child: Text(
          "Add to Cart".toUpperCase(),
          style: TextStyle(
            fontSize: 14.0,
          ),
        ),
      ),
      SizedBox(width: 10),
      RaisedButton(
        shape: new RoundedRectangleBorder(
            borderRadius: new BorderRadius.circular(18.0),
            side: BorderSide(color: Colors.red)),
        onPressed: () {},
        color: Colors.red,
        textColor: Colors.white,
        child: Text("Buy now".toUpperCase(),
            style: TextStyle(fontSize: 14)),
      ),
    ],   
)

Ответ 2

Вы можете использовать виджет RaisedButton. Raised Button Widget имеет свойство shape, которое вы можете использовать, как показано ниже.

 RaisedButton(
          child: Text("Press Me"),
          onPressed: null,
          shape: RoundedRectangleBorder(borderRadius: new BorderRadius.circular(30.0))
        )

Ответ 3

Вы можете просто использовать RaisedButton или вы можете использовать InkWell чтобы получить пользовательскую кнопку, а также такие свойства, как onDoubleTap, onLongPress и etc. etc.:

new InkWell(
  onTap: () => print('hello'),
  child: new Container(
    //width: 100.0,
    height: 50.0,
    decoration: new BoxDecoration(
      color: Colors.blueAccent,
      border: new Border.all(color: Colors.white, width: 2.0),
      borderRadius: new BorderRadius.circular(10.0),
    ),
    child: new Center(child: new Text('Click Me', style: new TextStyle(fontSize: 18.0, color: Colors.white),),),
  ),
),

Если вы хотите использовать splashColor, свойства highlightColor в InkWell, используйте виджет Material в качестве родителя виджета InkWell вместо украшения контейнера (удаление свойства украшения). Читайте почему? здесь.

Ответ 4

Вы можете просто использовать RaisedButton

Padding(
  padding: EdgeInsets.only(left: 150.0, right: 0.0),
  child: RaisedButton(
    textColor: Colors.white,
    color: Colors.black,
    child: Text("Search"),
    onPressed: () {},
    shape: new RoundedRectangleBorder(
      borderRadius: new BorderRadius.circular(30.0),
    ),
  ),
)

Выход:

Ответ 5

Есть много способов сделать это. Я перечисляю несколько здесь.

(1) Использование RoundedRectangleBorder

RaisedButton(
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
  onPressed: () {},
  child: Text("Button"),
)

(2) Использование ClipRRect

ClipRRect(
  borderRadius: BorderRadius.circular(40),
  child: RaisedButton(
    onPressed: () {},
    child: Text("Button"),
  ),
)

(3) Использование ClipOval

ClipOval(
  child: RaisedButton(
    onPressed: () {},
    child: Text("Button"),
  ),
)

(4) Использование ButtonTheme

ButtonTheme(
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
  child: RaisedButton(
    onPressed: () {},
    child: Text("Button"),
  ),
)

(5) Использование StadiumBorder

RaisedButton(
  shape: StadiumBorder(),
  onPressed: () {},
  child: Text("Button"),
)

Ответ 6

Вы можете использовать приведенный ниже код, чтобы сделать закругленную кнопку с градиентным цветом.

 Container(
          width: 130.0,
          height: 43.0,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(30.0),
            gradient: LinearGradient(
              // Where the linear gradient begins and ends
              begin: Alignment.topRight,
              end: Alignment.bottomLeft,
              // Add one stop for each color. Stops should increase from 0 to 1
              stops: [0.1, 0.9],
              colors: [
                // Colors are easy thanks to Flutter Colors class.
                Color(0xff1d83ab),
                Color(0xff0cbab8),
              ],
            ),
          ),
          child: FlatButton(
            child: Text(
              'Sign In',
              style: TextStyle(
                fontSize: 16.0,
                fontFamily: 'Righteous',
                fontWeight: FontWeight.w600,
              ),
            ),
            textColor: Colors.white,
            color: Colors.transparent,
            shape:
                RoundedRectangleBorder(borderRadius: BorderRadius.circular(30.0)),
            onPressed: () {

            },
          ),
        );

Ответ 7

Возможно, вам стоит ознакомиться с этой страницей документов, в частности: закругления углов.

Документы показывают, как изменить стиль компонента и эквивалентный стиль в css, если вы уже знакомы с этим.

Ответ 8

Вы можете использовать этот код для прозрачной закругленной кнопки, передав прозрачный цвет свойству color внутри BoxDecoration. например. color: Colors.transparent. color: Colors.transparent. Также обратите внимание, что эта кнопка использует только виджеты Container и GestureDetector.

Container(
    height: 50.0,
    child: GestureDetector(
        onTap: () {},
        child: Container(
            decoration: BoxDecoration(
                border: Border.all(
                    color: Color(0xFFF05A22),
                    style: BorderStyle.solid,
                    width: 1.0,
                ),
                color: Colors.transparent,
                borderRadius: BorderRadius.circular(30.0),
            ),
            child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                    Center(
                        child: Text(
                           "BUTTON",
                            style: TextStyle(
                                color: Color(0xFFF05A22),
                                fontFamily: 'Montserrat',
                                fontSize: 16,
                                fontWeight: FontWeight.w600,
                                letterSpacing: 1,
                            ),
                        ),
                    )
                ],
            ),
        ),
    ),
)

Ответ 9

Вы всегда можете использовать кнопку материала, если вы используете Material App в качестве основного виджета.

Padding(
  padding: EdgeInsets.symmetric(vertical: 16.0),
  child: Material(
    borderRadius: BorderRadius.circular(30.0),//Set this up for rounding corners.
    shadowColor: Colors.lightBlueAccent.shade100,
    child: MaterialButton(
      minWidth: 200.0,
      height: 42.0,
      onPressed: (){//Actions here//},
      color: Colors.lightBlueAccent,
      child: Text('Log in', style: TextStyle(color: Colors.white),),
    ),
  ),
)

Ответ 10

  В виджете Flutter Container() используется для стилизации вашего виджета. Используя виджет Container(), вы можете установить границу или закругленный angular любого виджета

Если вы хотите установить любой тип стиля & установка украшений поместите этот виджет в виджет Container(), который предоставляет множество свойств для украшений.

Container(
  width: 100,
  padding: EdgeInsets.all(10),
  alignment: Alignment.center,
  decoration: BoxDecoration(
          color: Colors.blueAccent,
          borderRadius: BorderRadius.circular(30)), // make rounded corner
  child: Text("Click"),
)

Ответ 11

Если вы используете MaterialButton, и он не показывает радиус границы, возможно, вам придется установить свойство clipBehavious.

Смотрите обсуждение этого здесь. https://github.com/flutter/flutter/issues/21926

установите clipBehavior на Clip.antiAlias, и вы увидите, что применяется радиус границы.

пример

MaterialButton(
    clipBehavior: Clip.antiAlias,
    onPressed: () => {},
    child: Text("Button"),
    shape: RoundedRectangleBorder(
         borderRadius: BorderRadius.circular(5)
     ),
 ),