-
必要なパッケージのインポート: Flutterのpubspec.yamlファイルに以下のパッケージを追加してください。
dependencies: flutter: sdk: flutter flutter_gradient_colors: ^1.0.0
-
パッケージのインポート: エディタの先頭に以下のインポート文を追加してください。
import 'package:flutter/material.dart'; import 'package:flutter_gradient_colors/flutter_gradient_colors.dart';
-
エレベートドボタンの作成: フォーム内にエレベートドボタンを作成します。以下のコード例を参考にしてください。
ElevatedButton( onPressed: () { // ボタンが押された時の処理 }, style: ElevatedButton.styleFrom( padding: EdgeInsets.symmetric(vertical: 15, horizontal: 30), elevation: 5, // エレベーションの設定 shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(10), ), // ボタンの背景色をグラデーションに設定 backgroundGradient: LinearGradient( colors: GradientColors.blue, // グラデーションの色 begin: Alignment.topLeft, // グラデーションの開始位置 end: Alignment.bottomRight, // グラデーションの終了位置 ), ), child: Text( 'ボタン', style: TextStyle(fontSize: 18), ), )
上記のコードでは、エレベートドボタンのカスタマイズを行っています。必要に応じてパディング、エレベーション、ボーダーラジウスなどを調整してください。
これで、フォーム内にグラデーションを適用したエレベートドボタンを作成することができます。必要に応じてコードをカスタマイズし、デザインに合わせて調整してください。