개발하자

테두리 반지름이 있는 둥근 단추/단추를 Flott에 작성합니다.

Cuire 2022. 12. 29. 00:24
반응형

테두리 반지름이 있는 둥근 단추/단추를 Flott에 작성합니다.

나는 현재 Fluter에서 안드로이드 앱을 개발하고 있다. 둥근 단추를 추가하려면 어떻게 해야 하나요?




위젯을 사용할 수 있습니다. 상승 버튼 위젯에는 아래 스니펫에 표시된 대로 사용할 수 있는 속성이 있습니다.

ElevatedButton(
      style: ButtonStyle(
          shape: MaterialStateProperty.all<RoundedRectangleBorder>(
              RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(18.0),
                  side: BorderSide(
                      color: Colors.teal, 
                      width: 2.0,
                  ),
              ),
          ),
      ),
      child: Text('Submit'),
      onPressed: () {},
),



또는 를 사용하여 사용자 지정 단추와 , , 등의 속성을 얻을 수 있습니다.

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

Enter image description here

위젯에서 및 속성을 사용하려면 컨테이너를 장식하는 대신 위젯을 위젯의 상위 항목으로 사용합니다(장식 속성 삭제).




재료 앱을 기본 위젯으로 사용하는 경우 재료 단추를 항상 사용할 수 있습니다.

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



간단하게 사용할 수 있습니다.


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

출력:

enter image description here

추가 정보:




아래 코드를 사용하여 그라데이션 색상의 둥근 단추를 만들 수 있습니다.

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

            },
          ),
        );



이 코드는 투명 색상을 내부 색상 속성으로 전달하여 둥근 단추에 사용할 수 있습니다. 또한 이 단추는 및 위젯만 사용합니다.

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

Transaparent Background Button




갱신하다

이제 왼쪽 단추가 더 이상 사용되지 않으므로 오른쪽 단추를 사용하십시오.

Deprecated    -->   Recommended

RaisedButton  -->   ElevatedButton
OutlineButton -->   OutlinedButton
FlatButton    -->   TextButton

  • ElevatedButton

  1. 사용.

    enter image description here

    ElevatedButton(
      onPressed: () {},
      child: Text('Button'),
      style: ElevatedButton.styleFrom(shape: StadiumBorder()),
    )
    
  2. 사용.

    enter image description here

    ElevatedButton(
      onPressed: () {},
      child: Text('Button'),
      style: ElevatedButton.styleFrom(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(12), // <-- Radius
        ),
      ),
    )
    
  3. 사용.

    enter image description here

    ElevatedButton(
      onPressed: () {},
      child: Text('Button'),
      style: ElevatedButton.styleFrom(
        shape: CircleBorder(),
        padding: EdgeInsets.all(24),
      ),
    )
    
  4. 사용.

    enter image description here

    ElevatedButton(
      onPressed: () {},
      child: Text('Button'),
      style: ElevatedButton.styleFrom(
        shape: BeveledRectangleBorder(
          borderRadius: BorderRadius.circular(12)
        ),
      ),
    )
    

OutlinedButton

  1. 사용.

    enter image description here

    OutlinedButton(
      onPressed: () {},
      child: Text('Button'),
      style: OutlinedButton.styleFrom(
        shape: StadiumBorder(),
      ),
    )
    
  2. 사용.

    enter image description here

    OutlinedButton(
      onPressed: () {},
      child: Text('Button'),
      style: OutlinedButton.styleFrom(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(12),
        ),
      ),
    )
    
  3. 사용:

    enter image description here

    OutlinedButton(
      onPressed: () {},
      child: Text('Button'),
      style: OutlinedButton.styleFrom(
        shape: CircleBorder(),
        padding: EdgeInsets.all(24),
      ),
    )
    
  4. 사용.

    enter image description here

    OutlinedButton(
      onPressed: () {},
      child: Text('Button'),
      style: OutlinedButton.styleFrom(
        shape: BeveledRectangleBorder(
          borderRadius: BorderRadius.circular(12),
        ),
      ),
    )
    

텍스트 단추

또한 와 유사하게 작동하지만, 버튼을 눌러야 모양을 볼 수 있습니다.




1. 솔루션 요약

더 이상 사용되지 않습니다.

따라서 속성에 배치된 항목을 및 에 사용할 수 있습니다.

Flower 2.0 이후로 몇 가지 변경 사항이 있습니다.

  • : 속성 유형이 다음으로 변경되었습니다.
  • : 속성 유형이 다음으로 변경되었습니다.

2. 둥근 단추

속성 내부에 다음 속성이 있습니다.

style: ButtonStyle(
  shape: MaterialStateProperty.all<RoundedRectangleBorder>(
    RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(18.0),
      side: BorderSide(color: Colors.red)
    )
  )
)

Enter image description here

사각 단추

사각 단추의 경우 다음을 사용하거나 추가할 수 있습니다.

style: ButtonStyle(
  shape: MaterialStateProperty.all<RoundedRectangleBorder>(
    RoundedRectangleBorder(
      borderRadius: BorderRadius.zero,
      side: BorderSide(color: Colors.red)
    )
  )
)

Enter image description here

전체 예제

Row(
  mainAxisAlignment: MainAxisAlignment.end,
  children: [
    TextButton(
      child: Text(
        "Add to cart".toUpperCase(),
        style: TextStyle(fontSize: 14)
      ),
      style: ButtonStyle(
        padding: MaterialStateProperty.all<EdgeInsets>(EdgeInsets.all(15)),
        foregroundColor: MaterialStateProperty.all<Color>(Colors.red),
        shape: MaterialStateProperty.all<RoundedRectangleBorder>(
          RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(18.0),
            side: BorderSide(color: Colors.red)
          )
        )
      ),
      onPressed: () => null
    ),
    SizedBox(width: 10),
    ElevatedButton(
      child: Text(
        "Buy now".toUpperCase(),
        style: TextStyle(fontSize: 14)
      ),
      style: ButtonStyle(
        foregroundColor: MaterialStateProperty.all<Color>(Colors.white),
        backgroundColor: MaterialStateProperty.all<Color>(Colors.red),
        shape: MaterialStateProperty.all<RoundedRectangleBorder>(
          RoundedRectangleBorder(
            borderRadius: BorderRadius.zero,
            side: BorderSide(color: Colors.red)
          )
        )
      ),
      onPressed: () => null
    )
  ]
)




플러터에서 위젯은 위젯 스타일을 지정하는 데 사용됩니다. 위젯을 사용하여 위젯의 테두리 또는 둥근 모서리를 설정할 수 있습니다.

스타일을 설정하고 장식을 설정하려면 해당 위젯을 위젯에 넣습니다. 그것은 장식에 많은 특성을 제공한다.

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



만약 누군가 완전한 원형 버튼을 찾고 있다면, 나는 다음과 같은 방법으로 그것을 달성했다:

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



에서 도형을 사용하려면 위젯 내부의 모든 코드를 수행해야 합니다.

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

만약 당신이 그것을 만들고 싶다면, 그것을 자동적으로 그것으로 만든다를 사용하세요.

버튼은 다음과 같습니다.

Enter image description here

다음은 UI 지정 화면의 모든 소스 코드입니다.

 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),
          ),
        ],
      ),
    ),
  ),
);



다음은 다른 솔루션입니다.

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



여기 당신의 문제에 대한 코드가 있습니다. 상자 장식에 테두리 반경이 있는 간단한 용기만 가져가시면 됩니다.

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



RaisedButton(
          child: Text("Button"),
          onPressed: (){},
          shape: RoundedRectangleBorder(borderRadius: new BorderRadius.circular(30.0),
          side: BorderSide(color: Colors.red))
        )



사용자 정의 보기를 만들어 제스처 디텍터 안에 넣어 단추처럼 작동하도록 할 수 있습니다. 사용자 정의 장식의 무한한 유형(지정된 반경으로 둥글게 만드는 것 포함)을 용기에 제공할 수 있다는 이점이 있습니다.




이제 둥근 버튼 클릭 및 오버레이를 수행할 수 있는 버튼이 있습니다. 그러나 배경색은 아직 사용할 수 없지만 다음과 같이 서클 아바타 위젯에서도 동일하게 사용할 수 있습니다.

CircleAvatar(
    backgroundColor: const Color(0xffF4F3FA),
    child: IconButton(
        onPressed: () => FlushbarHelper.createInformation(
                             message: 'Work in progress...')
                             .show(context),
        icon: Icon(Icons.more_vert),
    ),
),



다음을 사용할 수도 있습니다.

Enter image description here

다음은 코드 예제입니다.

ButtonTheme(
    minWidth: 200.0,
    shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(18.0),
        side: BorderSide(color: Colors.green)),
    child: RaisedButton(
        elevation: 5.0,
        hoverColor: Colors.green,
        color: Colors.amber,
        child: Text(
            "Place Order",
            style: TextStyle(
                     color: Colors.white, fontWeight: FontWeight.bold),
        ),
        onPressed: () {},
    ),
),



둥근 단추를 만드는 가장 간단한 방법 중 하나는 를 사용한 다음 속성을 설정하여 둥근 단추를 지정하는 것입니다. 아래 코드를 따르십시오.

FlatButton(
  padding: EdgeInsets.all(30.0),
  color: Colors.black,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(20.0)),
  child: child: Text(
    "Button",
    style: TextStyle(color: Colors.white),
  ),
  onPressed: () {
    print('Button pressed');
  },
),

참고: 원형도를 변경하려면 내부 값을 조정하십시오.




     Container(
        width: yourWidth,
        height: yourHeight ,
        decoration: BoxDecoration(
            borderRadius: radius,
            gradient: yourGradient,
            border: yourBorder),
        child: FlatButton(
          onPressed: {} (),
          shape: RoundedRectangleBorder(borderRadius: radius),
    .......

같은 반경을 사용합니다.




2020년 9월 이후, Flower 1.22.0:

"Raised Button"과 "Flat Button"은 더 이상 사용되지 않습니다.

가장 최신 솔루션은 다음과 같은 새 버튼을 사용하는 것입니다.

1. :

Button without an icon

Button with an icon

코드:

ElevatedButton(
  child: Text("ElevatedButton"),
  onPressed: () => print("it's pressed"),
  style: ElevatedButton.styleFrom(
    primary: Colors.red,
    onPrimary: Colors.white,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(32.0),
    ),
  ),
)

아이콘을 쉽게 추가할 수 있는 생성자도 있습니다.

ElevatedButton.icon(
  icon: Icon(Icons.thumb_up),
  label: Text("Like"),
  onPressed: () => print("it's pressed"),
  style: ElevatedButton.styleFrom(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(32.0),
    ),
  ),
)

2. :

Outlined button

코드:

OutlinedButton.icon(
  icon: Icon(Icons.star_outline),
  label: Text("OutlinedButton"),
  onPressed: () => print("it's pressed"),
  style: ElevatedButton.styleFrom(
    side: BorderSide(width: 2.0, color: Colors.blue),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(32.0),
    ),
  ),
)

3. :

윤곽선이나 색상 채우기를 원하지 않는 경우 언제든지 사용할 수 있습니다.




단추를 만드는 다른 방법은 다음과 같습니다.

상승 단추가 있는 상승 단추.styleFrom

ElevatedButton(
          style: ElevatedButton.styleFrom(
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(30.0),
            ),
          ),
          onPressed: () {},
          child:
              Text("Buy now".toUpperCase(), style: TextStyle(fontSize: 14)),
        ),

단추 스타일이 있는 상승 단추

ElevatedButton(
          style: ButtonStyle(
              shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                  RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(50.0),
          ))),
          onPressed: () {},
          child: Text("Submit".toUpperCase()),
        ),

라운드 버튼의 실제 데모는 아래의 Dartpad 링크에서 확인할 수 있습니다.

DartPad의 둥근 단추 데모 예제

Screenshot of dartpad




2021년에 작동하는 또 다른 멋진 솔루션:

TextButton(
    child: Padding(
        padding: const EdgeInsets.all(5.0),
        child: Text('Follow Us'.toUpperCase()),
    ),
    style: TextButton.styleFrom(
        backgroundColor: Colors.amber,
        shadowColor: Colors.red,
        elevation: 2,
        textStyle: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(5.0),)
    ),
    onPressed: () {
        print('Pressed');
    },
),



새 상승 버튼

스타일.

customElevatedButton({radius, color}) => ElevatedButton.styleFrom(
    shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(radius == null ? 100 : radius),
    ),
    primary: color,
);

아이콘

Widget saveIcon() => iconsStyle1(
    Icons.save,
);

// Common icon style

iconsStyle1(icon) => Icon(
    icon,
    color: white,
    size: 15,
);

버튼 사용

ElevatedButton.icon(
    icon: saveIcon(),
    style:
        customElevatedButton(color: Colors.green[700]),
    label: Text('Save',
        style: TextStyle(color: Colors.white)),
    onPressed: () {
    },
),



아래 코드 조각과 같이 컨테이너 위젯에서 텍스트 단추를 감습니다.

Container(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(5),
    border: Border.all(color: Colors.black),
  ),
  child: TextButton(
    onPressed: () {
      // To do
    },
    child: Text("Go to Change Language Screen "),
  ),
)



How it looks!

대신 사용하세요.

플랫 버튼, 레이즈드 버튼, 아웃라인 버튼과 같은 버튼은 2020년 10월 이후 더 이상 사용되지 않는다고 한다. 이것은 Fluter 개발 팀이 Fluter API를 단순화하고 일관성 있게 만들기 위한 노력 중 하나이며, 스타일 속성을 사용하여 스타일을 사용자 정의할 수 있습니다.

      TextButton(
        child: Padding(
          padding: const EdgeInsets.only(left: 10.0, right: 10.0),
          child: Text('Text here',
              style: TextStyle(
                  color: Colors.teal,
                  fontSize: 14,
                  fontWeight: FontWeight.w500)),
        ),
        style: TextButton.styleFrom(
          primary: Colors.teal,
          onSurface: Colors.yellow,
          side: BorderSide(color: Colors.teal, width: 2),
          shape: const RoundedRectangleBorder(
              borderRadius: BorderRadius.all(Radius.circular(25))),
        ),
        onPressed: () {
          print('Pressed');
        },
      ),



addButton() {
return Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Padding(
      padding: const EdgeInsets.symmetric(vertical: 10.0),
      child: SizedBox(
        height: 45,
        width: 200,
        child: ElevatedButton.icon(
          onPressed: () async {},
          style: ButtonStyle(
            shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(30.0),
                  )),
            elevation: MaterialStateProperty.all(1),
            backgroundColor: MaterialStateProperty.all(Colors.blue),
          ),
          icon: Icon(Icons.add, size: 18),
          label: Text("Add question"),
        ),
      ),
    ),
  ],
);

}




상승된 단추에 이 스타일을 사용하여 원형으로 만들 수 있습니다.

style: ButtonStyle(
              elevation: MaterialStateProperty.all(8.0),
              backgroundColor:
                  MaterialStateProperty.all(Constants().orangeColor),
              textStyle: MaterialStateProperty.all(
                TextStyle(
                  fontSize: 16.0,
                ),
              ),
              shape: MaterialStateProperty.all<CircleBorder>(
                CircleBorder(),
              ),
              shadowColor: MaterialStateProperty.all(Constants().orangeColor),
            ),



다음 코드를 사용할 수 있습니다.

ElevatedButton(
      onPressed: () {},
      style: ElevatedButton.styleFrom(
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.all(Radius.circular(borderRadius))),
      ),
      child: Text("ok"),
    )



만약 당신이 사용하고 싶다면,

이렇게 Given을 추가할 수 있습니다.

MaterialButton(
  onPressed: () {},
  minWidth: MediaQuery.of(context).size.width * 0.4,
  height: 34,
  color: colorWhite,
  highlightColor: colorSplash,
  splashColor: colorSplash,
  visualDensity: VisualDensity.compact,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(4),
    side: BorderSide(
      color: colorGrey,
      width: 0.6,
    ),
  ),
  child: Text("CANCEL"),
),



다른 방법으로는 적절한 반올림 단추에 부동 수행 단추를 사용하는 것입니다.

Scaffold(
      appBar: AppBar(
        title: const Text('Floating Action Button'),
      ),
      body: const Center(child: Text('Press the button below!')),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // Add your onPressed code here!
        },
        backgroundColor: Colors.green,
        child: const Icon(Icons.navigation),
      ),
    )



다음을 수행하십시오.

SizedBox(
  height: 40.0,
  child: MaterialButton(
    child: Text("Button"),
    color: Colors.blue,
    disabledColor: Colors.blue,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.all(
        Radius.circular(10.0), // Change your border radius here
      ),
    ),
    onPressed: () {},
  ),
),



Flower 버전 2에서 이것을 사용해 보세요.

ElevatedButton(
    style: ButtonStyle(
        shape: MaterialStateProperty.all<OutlinedBorder>(
            RoundedRectangleBorder(
                side:
                    BorderSide(width: 1.0, color: Colors.red,
                borderRadius:
                    BorderRadius.circular(5.0),),),
        backgroundColor: MaterialStateProperty.all<Color>(Colors.red),
        foregroundColor: MaterialStateProperty.all<Color>(Colors.green),
        elevation:
            MaterialStateProperty.all<double>(8.0),
        padding: MaterialStateProperty.all<EdgeInsetsGeometry>(
            const EdgeInsets.symmetric(
                horizontal: 15.0,
                vertical: 10.0),),),
    onPressed: (){},
    child: Text('Button'),)



Null 안전 후에는 문서에서 말하는 것처럼 상승 단추가 감가 상각되므로 상승 단추가 아닌 상승 단추를 사용하십시오.

             child: ElevatedButton(
                onPressed: () {},
                child: const Text('Add item to the list'),
                style: ButtonStyle(
                  backgroundColor:
                      MaterialStateProperty.all<Color>(Common.buttonColor),
                  shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                    RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(18.0),
                    ),
                  ),
                ),
              ),

enter image description here




둥근 테두리 색상의 용기:

Container(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(10),
    border: Border.all(color: Colors.red),
  ),
  child: Text("Some Text"),
)



새 업데이트에서는 플러터가 지침을 사용합니다.

어느 것에 의하면.

Default Button

  ElevatedButton(
          onPressed: () {}, child: const Text("Default Button ")),

enter image description here

Button with Border Radius Zero

 ElevatedButton(
          style: ElevatedButton.styleFrom(
              shape: const RoundedRectangleBorder(
                  borderRadius: BorderRadius.zero)),
          onPressed: () {},
          child: const Text("Border Radius Zero ")),

enter image description here

Button with custom border radius

  ElevatedButton(
          style: ElevatedButton.styleFrom(
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(50))),
          onPressed: () {},
          child: const Text("Border Radius Custom ")),

enter image description here

참고: 에 동일한 논리를 사용할 수 있습니다.

단추 스타일은 참조하십시오.


반응형