현재 Flutter에서 Android 앱을 개발 중입니다. 둥근 버튼을 어떻게 추가 할 수 있습니까?
답변
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)),
),
],
)
답변
RaisedButton 위젯을 사용할 수 있습니다. 제기 버튼 위젯에는 아래 스 니펫과 같이 활용할 수있는 모양 속성이 있습니다.
RaisedButton(
child: Text("Press Me"),
onPressed: null,
shape: RoundedRectangleBorder(borderRadius: new BorderRadius.circular(30.0))
)
답변
여러 가지 방법이 있습니다. 나는 여기에 몇 가지를 나열하고 있습니다.
(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"),
)
답변
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
답변
간단하게 사용 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사용 하십시오 (장식 속성 삭제). 왜 그런가요? 여기 .MaterialInkWell
답변
아래 코드를 사용하여 그라디언트 색상의 둥근 버튼을 만들 수 있습니다.
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: () {
},
),
);
