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

174

В настоящее время я разрабатываю приложение для Android во Флаттере. Как добавить кнопку с закругленными углами?

Kingsley Kbc Comics
источник
1
Вы можете использовать RaisedButtonилиInkWell
Blasanka
Здесь упоминалось несколько способов: mightytechno.com/ounded-button-flutter
Ишан Фернандо

Ответы:

303

1. Краткое изложение решения

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

2. Закругленная кнопка

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

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

Квадратная кнопка

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

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

Полный пример

Row(
  mainAxisAlignment: MainAxisAlignment.end,
  children: <Widget>[
    FlatButton(
      shape: RoundedRectangleBorder(
        borderRadius: 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: RoundedRectangleBorder(
        borderRadius: 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)),
    ),
  ],   
)
Аброр Эсоналиев
источник
1
Привет, Аброр, это было так полезно для меня. Спасибо вам большое!
Jkoech
198

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

 RaisedButton(
          child: Text("Press Me"),
          onPressed: null,
          shape: RoundedRectangleBorder(borderRadius: new BorderRadius.circular(30.0))
        )
dhuma1981
источник
37

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

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

(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"),
)
CopsOnRoad
источник
31

Вы можете просто использовать 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),
    ),
  ),
)

Вывод:

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

Больше информации: RSCoder

Рахул Шукла
источник
1
Спасибо! Я ищу ответ, который вы упомянули.
Прамеш Бхалала
28

Вы можете просто использовать RaisedButtonили вы можете использовать, InkWellчтобы получить пользовательские кнопки, а также свойства, такие как onDoubleTap, onLongPressи 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виджета вместо украшения контейнера (удаление украшения имущества). Читай почему? сюда .

Blasanka
источник
4
Если вы хотите , InkWellчтобы обрезать закругленные углы , то вам нужно добавить borderRadius: BorderRadius.circular(10.0)к InkWellвиджет также в противном случае он будет идти к краям прямоугольника.
Виктор
@VictorRendina Я искал способ округлить рябь, спасибо за ваш комментарий. добавьте это как отдельный ответ на вопросы о чернильнице, так как многие не упоминают об этом.
sudesh
5

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

 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's 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: () {

            },
          ),
        );
Tahseen Quraishi
источник
3

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

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

Девин Филдс
источник
3

Вы можете использовать этот код для прозрачной закругленной кнопки, передав прозрачный цвет свойству color внутри BoxDecoration. например. 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,
                            ),
                        ),
                    )
                ],
            ),
        ),
    ),
)

Прозрачная фоновая кнопка

mjhansen3
источник
1

Если кто-то ищет полную круглую кнопку, я достиг этого.

Center(
            child: SizedBox.fromSize(
              size: Size(80, 80), // button width and height
              child: ClipOval(
                child: Material(
                  color: Colors.pink[300], // button color
                  child: InkWell(
                    splashColor: Colors.yellow, // splash color
                    onTap: () {}, // button pressed
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Icon(Icons.linked_camera), // icon
                        Text("Picture"), // text
                      ],
                    ),
                  ),
                ),
              ),
            ),
          )
Speedy11
источник
0

Вы всегда можете использовать кнопку материала, если вы используете 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),),
    ),
  ),
)
Matias
источник
0

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

Если вы хотите установить какой-либо стиль и оформление, поместите этот виджет в 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"),
)
Sanjayrajsinh
источник
0

чтобы использовать любую фигуру в You'r Button, убедитесь, что вы выполняете весь код внутри виджета Button

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

если вы хотите сделать это Square, используйте `BorderRadius.circular (0.0), он автоматически превратится в Square

кнопка как это

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

Вот весь исходный код для экрана интерфейса пользователя

 Scaffold(
    backgroundColor: Color(0xFF8E44AD),
    body: new Center(
      child: Column(
        children: <Widget>[
          Container(
            margin: EdgeInsets.fromLTRB(90, 10, 20, 0),
            padding: new EdgeInsets.only(top: 92.0),
            child: Text(
              "Currency Converter",
              style: TextStyle(
                fontSize: 48,
                fontWeight: FontWeight.bold,
                color: Colors.white,
              ),
            ),
          ),
          Container(
            margin: EdgeInsets.only(),
            padding: EdgeInsets.all(25),
            child: TextFormField(
              decoration: new InputDecoration(
                filled: true,
                fillColor: Colors.white,
                labelText: "Amount",
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(10),
                ),
              ),
            ),
          ),
          Container(
            padding: EdgeInsets.all(25),
            child: TextFormField(
              decoration: new InputDecoration(
                filled: true,
                fillColor: Colors.white,
                labelText: "From",
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(10),
                ),
              ),
            ),
          ),
          Container(
            padding: EdgeInsets.all(25),
            child: TextFormField(
              decoration: new InputDecoration(
                  filled: true,
                  fillColor: Colors.white,
                  labelText: "To",
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(10),
                  )),
            ),
          ),
          SizedBox(height: 20.0),
          MaterialButton(
            height: 58,
            minWidth: 340,
            shape: RoundedRectangleBorder(
                borderRadius: new BorderRadius.circular(12)),
            onPressed: () {},
            child: Text(
              "CONVERT",
              style: TextStyle(
                fontSize: 24,
                color: Colors.black,
              ),
            ),
            color: Color(0xFFF7CA18),
          ),
        ],
      ),
    ),
  ),
);
Champ 96k
источник
0

вот другое решение

 Container(
                    height: MediaQuery.of(context).size.height * 0.10,
                    width: MediaQuery.of(context).size.width,
                    child: ButtonTheme(
                      minWidth: MediaQuery.of(context).size.width * 0.75,
                      child: RaisedButton(
                        shape: RoundedRectangleBorder(
                            borderRadius: new BorderRadius.circular(25.0),
                            side: BorderSide(color: Colors.blue)),
                        onPressed: () async {
                           // do something 
                        },
                        color: Colors.red[900],
                        textColor: Colors.white,
                        child: Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Text("Button Text,
                              style: TextStyle(fontSize: 24)),
                        ),
                      ),
                    ),
                  ),
ekoRem
источник
0

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

    new Container(
      alignment: Alignment.center,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(15.0)),
        color: Colors.blue,
      ),

      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.all(10.0),
            child: new Text(
              "Next",
              style: new TextStyle(
                 fontWeight: FontWeight.w500,
                  color: Colors.white,
                  fontSize: 15.0,
               ),
             ),
          ),
        ],
      ),
    ),
Парас Шарма
источник
0
RaisedButton(
          child: Text("Button"),
          onPressed: (){},
          shape: RoundedRectangleBorder(borderRadius: new BorderRadius.circular(30.0),
          side: BorderSide(color: Colors.red))
        )
Шилпа Навале
источник
1
Хотя этот код может решить вопрос, в том числе объяснение того, как и почему это решает проблему, действительно поможет улучшить качество вашего сообщения и, вероятно, получит больше голосов "за". Помните, что вы отвечаете на вопрос для читателей в будущем, а не только для того, кто спрашивает сейчас. Пожалуйста, отредактируйте свой ответ, чтобы добавить объяснения и указать, какие ограничения и предположения применяются.
Богдан Опир
Хорошо, спасибо, скажи мне, где я не прав
Шилпа Навале