[flutter] Flutter에서 경계 반경이있는 둥근 버튼 / 버튼 만들기

현재 Flutter에서 Android 앱을 개발 중입니다. 둥근 버튼을 어떻게 추가 할 수 있습니까?



답변

1. 솔루션 요약

당신은 사용할 수 있습니다 shape에 대한 FlatButtonRaisedButton.

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"),
)


답변

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


답변

간단하게 사용 RaisedButton하거나 InkWell사용자 정의 버튼과 onDoubleTap, onLongPressetc. 와 같은 속성을 얻는 데 사용할 수 있습니다 .

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

            },
          ),
        );


답변

이 문서의 다음 페이지에 익숙해 져야 할 것입니다 : 라운딩 코너 .

문서는 이미 익숙한 경우 구성 요소의 스타일과 CSS의 해당 스타일을 변경하는 방법을 보여줍니다.