Flutter Elevated Buttonの使用方法


Elevated Buttonを使用するためには、まずFlutterプロジェクトを作成し、依存関係を設定する必要があります。プロジェクトが準備できたら、以下の手順に従ってElevated Buttonを実装できます。

  1. ボタンのテキストを指定する: Elevated Buttonにはテキストが必要です。例えば、以下のようにボタンに"クリックしてください"というテキストを表示させたい場合、以下のコードを使用します。

    ElevatedButton(
     onPressed: () {
       // ボタンが押された時の処理
     },
     child: Text('クリックしてください'),
    )
  2. ボタンのスタイルをカスタマイズする: Elevated Buttonにはデフォルトのスタイルがありますが、カスタマイズすることもできます。例えば、ボタンの背景色やテキストのスタイルを変更したい場合、以下のようなコードを使用します。

    ElevatedButton(
     onPressed: () {
       // ボタンが押された時の処理
     },
     style: ElevatedButton.styleFrom(
       primary: Colors.blue, // ボタンの背景色
       textStyle: TextStyle(
         fontSize: 20, // テキストのフォントサイズ
         fontWeight: FontWeight.bold, // テキストの太さ
       ),
     ),
     child: Text('クリックしてください'),
    )
  3. ボタンが押された時の処理を追加する: ボタンが押された時に特定の処理を実行したい場合は、onPressedコールバックを使用します。例えば、以下のようにボタンが押された時にメッセージを表示する処理を追加できます。

    ElevatedButton(
     onPressed: () {
       // ボタンが押された時の処理
       print('ボタンが押されました');
     },
     child: Text('クリックしてください'),
    )

以上の手順を実行することで、FlutterのElevated Buttonを使用してマテリアルデザインのスタイルを持つボタンを作成することができます。これらの例を参考にして、自分のアプリケーションに合わせたボタンを作成してみてください。