【Flutter】ElevatedButtonの大きさを変更する方法

Flutter入門:ElevatedButtonの大きさを変更する方法

この記事はで読むことができます。

ElevatedButtonは、Flutterアプリケーション内でボタンを表示するための便利なウィジェットですが、ボタンの大きさをカスタマイズすることで、UIデザインをより制御しやすくすることができます。
この記事では、初心者向けにElevatedButtonの大きさを変更する方法を詳しく解説します。

デフォルトのElevatedButtonの大きさ

まず、デフォルトのElevatedButtonの大きさを確認してみましょう。以下は、通常のElevatedButtonのコード例です。

実装例

Dart
ElevatedButton(
  onPressed: () {},
  child: Text('ボタン'),
),

実行結果

ボタンの大きさを変更する

ElevatedButtonの大きさを変更するためには、styleプロパティを使ってElevatedButton.styleFromを利用しますstyleFromには、minimumSizefixedSizeなどのプロパティを設定することで、ボタンの大きさを調整できます。

実装例

Dart
  ElevatedButton(
    onPressed: () {
      // ボタンが押されたときの処理
    },
    style: ElevatedButton.styleFrom(
      // 幅150、高さ50のボタン 
      minimumSize: Size(150, 50),
    ),
    child: Text('カスタマイズされたボタン'),
  );

styleFrom には、背景色、テキスト色、パディングなど他のプロパティも追加でき、デザインの一貫性を保てます。

実行結果

ボタンの幅だけを変更する

minimumSizeプロパティを使用してボタンの大きさを変更する場合、幅と高さを同時に変更することになります。ボタンの幅だけを変更したい場合は、fixedSizeプロパティを使用します。

実装例

Dart
 ElevatedButton(
    onPressed: () {
      // ボタンが押されたときの処理
    },
    style: ElevatedButton.styleFrom(
      // 幅200、高さは自動
      fixedSize: Size(200, double.infinity),
    ),
    child: Text('幅が200のボタン'),
  )

余分なコードを書かず、fixedSize の高さに double.infinity を設定するだけで実現できます。

実行結果

ボタンの高さだけを変更する

同様に、ボタンの高さだけを変更したい場合も、fixedSizeプロパティを使用します。

実装例

Dart
 ElevatedButton(
    onPressed: () {
      // ボタンが押されたときの処理
    },
    style: ElevatedButton.styleFrom(
      // 幅は自動、高さ100
      fixedSize: Size(double.infinity, 100),
    ),
    child: Text('高さが100のボタン'),
  ),

幅は自動的に調整されるため、余分なスタイル指定が不要です。

実行結果

まとめ

ElevatedButtonの大きさを変更することで、UIデザインをより制御しやすくすることができます。minimumSizefixedSizeプロパティを使用して、ボタンの幅や高さをカスタマイズしてみましょう。アプリケーションのデザインに合わせて、魅力的なボタンを作成してください!

4 COMMENTS

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です