В настоящее время я разрабатываю приложение для Android во Flutter. Как добавить кнопку с закругленными углами?
Создайте закругленную кнопку/кнопку с радиусом границы в 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)
),
),