Flutterでボタンの角丸を設定する方法


  1. RaisedButtonを使用する場合: RaisedButtonは角丸のボタンを作成するためのウィジェットです。ボタンの角丸を設定するには、RaisedButtonのshapeプロパティを使用します。

    RaisedButton(
     shape: RoundedRectangleBorder(
       borderRadius: BorderRadius.circular(10.0),
     ),
     child: Text('ボタン'),
     onPressed: () {
       // ボタンが押された時の処理
     },
    )

    上記の例では、borderRadiusプロパティに角丸の半径を指定しています。適宜、半径の値を変更してください。

  2. FlatButtonを使用する場合: FlatButtonも角丸のボタンを作成するためのウィジェットです。shapeプロパティを使用して角丸の半径を設定します。

    FlatButton(
     shape: RoundedRectangleBorder(
       borderRadius: BorderRadius.circular(10.0),
     ),
     child: Text('ボタン'),
     onPressed: () {
       // ボタンが押された時の処理
     },
    )

    同様に、borderRadiusプロパティに角丸の半径を指定します。

  3. 自作のボタンを作成する場合: Flutterでは、CustomPaintを使用して独自のボタンを作成することもできます。CustomPainterを実装し、独自の描画ロジックを追加します。

    class MyButton extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return CustomPaint(
         painter: _MyButtonPainter(),
         child: GestureDetector(
           onTap: () {
             // ボタンが押された時の処理
           },
           child: Container(
             width: 100.0,
             height: 40.0,
             child: Center(
               child: Text('ボタン'),
             ),
           ),
         ),
       );
     }
    }
    class _MyButtonPainter extends CustomPainter {
     @override
     void paint(Canvas canvas, Size size) {
       // ボタンの描画ロジックを実装する
     }
     @override
     bool shouldRepaint(_MyButtonPainter oldDelegate) => false;
    }

    上記の例では、_MyButtonPainterクラス内でボタンの描画ロジックを実装します。自由にカスタマイズしてください。

これらの方法を使用して、Flutterでボタンの角丸を設定することができます。適切な半径の値を選択し、デザインに合わせて調整してください。