未経験から最短3カ月でプログラマーへ！！【０円スクール】
この記事はで読むことができます。
ElevatedButtonは、Flutterアプリケーション内でボタンを表示するためのウィジェットですが、影のデザインをカスタマイズすることで、ボタンをより立体的に強調することができます。
この記事では、初心者向けにElevatedButtonの影を変更する方法を詳しく解説します。
この記事でわかること
- ElevatedButtonの基本的な使い方の復習
- ElevatedButtonの影を変更する方法
アプリ開発に必須なキャッチコピーやテキストをAI（人工知能）が自動作成
まず、デフォルトの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には、elevationプロパティを設定することで、影の強さを調整できます。
Dart
ElevatedButton(
onPressed: () {
// ボタンが押されたときの処理
},
style: ElevatedButton.styleFrom(
elevation: 10, // 影の強さを設定
),
child: Text('影の変更されたボタン'),
)
elevationプロパティを調整することで、影の効果を変更できます。
値を大きくするほど影が濃く、ボタンが浮き上がった印象になります。
Dart
ElevatedButton(
onPressed: () {
// ボタンが押されたときの処理
},
style: ElevatedButton.styleFrom(
elevation: 30, // 影の強さを設定
),
child: Text('強い影のボタン'),
)
影を完全になくして、フラットなデザインのボタンを作成することもできます。elevationプロパティを0に設定することで、影をなくすことができます。
Dart
ElevatedButton(
onPressed: () {
// ボタンが押されたときの処理
},
style: ElevatedButton.styleFrom(
elevation: 0, // 影をなくす
),
child: Text('フラットなボタン'),
)
ElevatedButtonの影を変更することで、ボタンのデザインをより立体的に調整することができます。elevationプロパティを調整して、ボタンの影の効果を変更してみましょう。
アプリケーションのデザインに合わせて、魅力的なUIを実現してください！
