未経験から最短3カ月でプログラマーへ！！【０円スクール】
この記事はで読むことができます。
Flutterは、モダンなUIを簡単に構築できる便利なフレームワークです。
ボタン（Button）は、アプリケーションのユーザーインタラクションを実現するための重要な要素です。
この記事では、Flutterでボタンを使用する方法について初心者向けに解説します。
この記事でわかること
- ElevatedButton、TextButton、およびOutlinedButtonの基本的な役割と違い
- 各ボタンの使い方
アプリ開発に必須なキャッチコピーやテキストをAI（人工知能）が自動作成
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('ボタンの使い方')),
body: Center(
child: ElevatedButton(
onPressed: () {
//ボタン押下時の挙動
},
child: Text('ElevatedButton'),
),
),
),
);
}
}
TextButtonは、テキストベースのボタンを表示するためのウィジェットです。
以下は、基本的な使い方です。
Dart
TextButton(
onPressed: () {},
child: Text('TextButton'),
);
OutlinedButtonは、外枠のみが表示されるボタンを表示するためのウィジェットです。
以下は、基本的な使い方です。
Dart
OutlinedButton(
onPressed: () {},
child: Text('OutlinedButton'),
);
それぞれのボタンには、外観をカスタマイズするためのstyleプロパティがあります。
以下は、ボタンの色やスタイルを変更する例です。
Dart
ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
primary: Colors.blue,
textStyle: TextStyle(fontSize: 18),
),
child: Text('カスタマイズされたElevatedButton'),
);
スタイルについては、下記の記事をご覧ください。
Flutterでボタンを使用するには、ElevatedButton、TextButton、OutlinedButtonを使います。
これらのボタンウィジェットを組み合わせて、アプリケーション内のユーザーインタラクションを効果的に実現しましょう。外観のカスタマイズも容易であり、アプリのデザインに合わせてボタンを設定することができます。
