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

未経験から最短3カ月でプログラマーへ！！【０円スクール】

こんにちは、ふわふわです！

Flutterについて調べてみても、情報が多すぎて「結局どう実装すればいいのかわからない」とお悩みではないでしょうか？

そんな方に向けて、【Flutterの舞台裏】を始めました！

Flutterの舞台裏では、Flutter初心者の方を対象に、基本的な実装方法から具体的なコード例まで、必要な情報だけを分かりやすく解説します。

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

アプリ開発に必須なキャッチコピーやテキストをAI（人工知能）が自動作成

目次 閉じる

• Flutterにおける「状態管理」とは？
  • デフォルトのElevatedButtonの大きさ
• ボタンの大きさを変更する
• ボタンの幅だけを変更する
• ボタンの高さだけを変更する
• まとめ

Flutterにおける「状態管理」とは？

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

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

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

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

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

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

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

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

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