-
RaisedButtonを使用する場合: RaisedButtonは角丸のボタンを作成するためのウィジェットです。ボタンの角丸を設定するには、RaisedButtonのshapeプロパティを使用します。
RaisedButton( shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(10.0), ), child: Text('ボタン'), onPressed: () { // ボタンが押された時の処理 }, )
上記の例では、
borderRadius
プロパティに角丸の半径を指定しています。適宜、半径の値を変更してください。 -
FlatButtonを使用する場合: FlatButtonも角丸のボタンを作成するためのウィジェットです。shapeプロパティを使用して角丸の半径を設定します。
FlatButton( shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(10.0), ), child: Text('ボタン'), onPressed: () { // ボタンが押された時の処理 }, )
同様に、
borderRadius
プロパティに角丸の半径を指定します。 -
自作のボタンを作成する場合: 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でボタンの角丸を設定することができます。適切な半径の値を選択し、デザインに合わせて調整してください。