未経験から最短3カ月でプログラマーへ！！【０円スクール】
この記事はで読むことができます。
ElevatedButtonは、Flutterアプリケーション内でボタンを表示するための便利なウィジェットですが、ボタンの角を丸くすることで、ボタンがより親しみやすいデザインになります。
この記事では、初心者向けにElevatedButtonの角を丸くする方法を詳しく解説します。
この記事でわかること
- ElevatedButtonの基本的な使い方の復習
- ElevatedButtonの角を丸くする方法
まず、デフォルトのElevatedButtonの角を確認してみましょう。
以下は、通常のElevatedButtonのコード例です。
Dart
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('ElevatedButtonを角丸')),
body: Center(
child: ElevatedButton(
onPressed: () {
// ボタンが押されたときの処理
},
child: Text('ボタン'),
),
),
),
);
}
}
ElevatedButtonの角を丸くするためには、styleプロパティを使ってElevatedButton.styleFromを利用します。styleFromには、shapeプロパティを設定することで、ボタンの形状をカスタマイズできます。
角を丸くするには、RoundedRectangleBorderを使用します。
Dart
ElevatedButton(
onPressed: () {
// ボタンが押されたときの処理
},
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
// 角を丸くする
borderRadius: BorderRadius.circular(10),
),
),
child: Text('角丸ボタン'),
)
borderRadiusプロパティの値を変更することで、角丸の半径を調整できます。
値を大きくするほど、角がより丸くなります。
Dart
ElevatedButton(
onPressed: () {
// ボタンが押されたときの処理
},
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
// 角の丸さを調整
borderRadius: BorderRadius.circular(20),
),
),
child: Text('より丸い角ボタン'),
)
ElevatedButtonの角を丸くすることで、より親しみやすいボタンを作成することができます。shapeプロパティを使用して、RoundedRectangleBorderを指定し、borderRadiusプロパティを調整して角丸の半径を変更できることを覚えておきましょう。
アプリケーションのデザインに合わせて、ユーザーエクスペリエンスを向上させましょう！
