Flutter 開発ノート Flutterコンポーネント (3) Buttonコンポーネント

- 記事情報 -

著者: Jack Lee (jcLee95)
アクセスしてください: https://jclee95.blog.csdn.net
電子メール: [email protected]。
中国深セン
この記事のアドレス: https://blog.csdn.net/qq_28550263/article/details/131387856

【介绍】：本文介绍 Flutter 按钮类组件。

前のセクション: 「Flutter コンポーネント (2) テキストおよび入力ボックスコンポーネント」 | 次のセクション: 「Flutter コンポーネント (4) 画像コンポーネント」

~~1 隆起ボタン: RaizedButton コンポーネント~~
- 1.1 RaizedButton コンポーネントを作成する
- 1.2 RaizedButton スタイルを設定する
- 1.3 レイズドボタンの形状を設定する
- 1.4 RaizedButton クリックイベントを設定する
- 1.5 RaizedButton コンポーネントを無効にする
- 1.6 概要
- 1.7 非推奨: 代わりに TextButton が推奨されます。
~~2 フラットボタン: FlatButton コンポーネント~~
- 2.1 フラットボタンの作成
- 2.2 共通のプロパティ
- 2.3 例
- 2.4 非推奨: 代わりに ElevatedButton が推奨されます。
~~3. アウトラインボタン:OutlineButtonコンポーネント~~
- 3.1 アウトラインボタンコンポーネントの作成
- 3.2 アウトラインボタンのスタイルを設定する
- 3.3 アウトラインボタンの形状を設定する
- 3.4 アウトラインボタンのクリックイベントを設定する
- 3.5 アウトラインボタンコンポーネントを無効にする
- 3.6 概要
- 3.7 非推奨: 代わりにOutlinedButtonが推奨されます
4. アイコンボタン: IconButton コンポーネント
- 4.1 IconButtonコンポーネントの作成
- 4.2 IconButton スタイルの設定
- 4.3 IconButton クリックイベントの設定
- 4.4 IconButton コンポーネントを無効にする
- 4.5 概要
5. フローティングアクションボタン: FloatingActionButton コンポーネント
- 5.1 FloatingActionButton コンポーネントの作成
- 5.2 FloatingActionButton スタイルを設定する
- 5.3 FloatingActionButton クリックイベントの設定
- 5.4 FloatingActionButton コンポーネントを無効にする
- 5.5 概要
6. ポップアップメニューボタン: PopupMenuButton コンポーネント
- 6.1 PopupMenuButtonコンポーネントの作成
- 6.2 PopupMenuButton スタイルの設定
- 6.3 PopupMenuButtonのクリックイベントを設定する
- 6.4 PopupMenuButton メニュー項目をカスタマイズする
- 6.5 概要
7. iOS スタイルボタン: CupertinoButton コンポーネント
- 7.1 CupertinoButton コンポーネントの作成
- 7.2 CupertinoButton スタイルの設定
- 7.3 CupertinoButton クリックイベントの設定
- 7.4 CupertinoButton コンポーネントを無効にする
- 7.5 概要
8. テキストボタン: TextButton コンポーネント (輪郭や塗りつぶしの色のないボタン)
- 8.1 TextButtonコンポーネントの作成
- 8.2 TextButton スタイルの設定
- 8.3 TextButton クリックイベントの設定
- 8.4 TextButton コンポーネントを無効にする
- 8.5 概要
9. ボタンの昇格: ElevatedButton コンポーネント
- 9.1 ElevatedButton コンポーネントの作成
- 9.2 ElevatedButton のスタイルの設定
- 9.3 ElevatedButton クリックイベントの設定
- 9.4 ElevatedButton コンポーネントを無効にする
- 9.5 概要
10. アウトラインボタン:OutlinedButtonコンポーネント
- 10.1 アウトラインボタンコンポーネントの作成
- 10.2 アウトラインボタンスタイルの設定
- 10.3 アウトラインボタンクリックイベントの設定
- 10.4 アウトラインボタンコンポーネントを無効にする
- 10.5 概要
11. 塗りつぶしボタン: FilledButton コンポーネント
- 11.1 FilledButtonコンポーネントの作成
- 11.2 コンポーネントのスタイルの設定
- 11.3 イベント処理
- 11.4 概要

1 隆起ボタン: RaizedButton コンポーネント

RaizedButton コンポーネントは、Flutter の基本的なボタンコンポーネントであり、盛り上がった 3 次元効果があります。これを使用して、クリックイベントを持つボタンを作成できます。

1.1 RaizedButton コンポーネントを作成する

Flutter で RaizedButton コンポーネントを作成するには、RaizedButton コンストラクターを使用できます。例えば：

RaisedButton(
  onPressed: () {
    
    
    // 点击事件处理
  },
  child: Text('点击我'),
)

1.2 RaizedButton スタイルを設定する

color、などのプロパティを使用して、textColorRaizedButton コンポーネントのスタイルを設定できます。以下に例を示します。

RaisedButton(
  onPressed: () {
    
    
    // 点击事件处理
  },
  child: Text('点击我'),
  color: Colors.blue,
  textColor: Colors.white,
)

1.3 レイズドボタンの形状を設定する

shapeプロパティを使用して、RaizedButton コンポーネントの形状を設定できます。これを行うには、オブジェクトを作成してプロパティShapeBorderに渡す必要があります。shape以下に例を示します。

RaisedButton(
  onPressed: () {
    
    
    // 点击事件处理
  },
  child: Text('点击我'),
  color: Colors.blue,
  textColor: Colors.white,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10),
  ),
)

1.4 RaizedButton クリックイベントを設定する

onPressedプロパティを使用して、RaizedButton コンポーネントのクリックイベントを設定できます。以下に例を示します。

RaisedButton(
  onPressed: () {
    
    
    // 点击事件处理
    print('按钮被点击');
  },
  child: Text('点击我'),
  color: Colors.blue,
  textColor: Colors.white,
)

1.5 RaizedButton コンポーネントを無効にする

RaizedButton コンポーネントを無効にするには、onPressedプロパティをに設定しますnull。無効状態のボタンはクリックイベントに応答しません。以下に例を示します。

RaisedButton(
  onPressed: null,
  child: Text('禁用按钮'),
  color: Colors.blue,
  textColor: Colors.white,
)

1.6 概要

RaizedButton コンポーネントは、Flutter でよく使用されるボタンコンポーネントであり、盛り上がった 3 次元効果があります。スタイル、形状、クリックイベントなどのさまざまなプロパティを設定することで、ボタンの表示と機能を簡単にカスタマイズできます。次の章では、FlatButton コンポーネントや IconButton コンポーネントなどの他の基本コンポーネントについて学習します。

1.7 非推奨: 代わりに TextButton が推奨されます。

ドキュメントによると、FlatButton、RaizedButton、およびOutlineButtonは、それぞれTextButton、ElevatedButton、およびOutlinedButtonに置き換えられました。ButtonTheme も TextButtonTheme、ElevatedButtonTheme、OutlinedButtonTheme に置き換えられました。参照してください: https://docs.flutter.dev/release/breaking-changes/buttons

2 フラットボタン: FlatButton コンポーネント

FlatButton は Flutter のボタンコンポーネントで、立体感のないボタンで、目立たない操作によく使用されます。FlatButton は、ユーザーが操作すると、水の波紋などの視覚効果を表示します。次に、FlatButton コンポーネントの基本的な使い方とプロパティを紹介します。

2.1 フラットボタンの作成

FlatButton を作成するには、FlatButton コンストラクターを使用できます。簡単な例を次に示します。

FlatButton(
  onPressed: () {
    
    
    // 在这里处理按钮点击事件
  },
  child: Text('点击我'),
)

2.2 共通のプロパティ

FlatButton には多くのカスタマイズ可能なプロパティがあります。一般的に使用されるプロパティのいくつかを以下に示します。

onPressed: これは、ユーザーがボタンをクリックしたときにトリガーされるコールバック関数です。このプロパティが null の場合、ボタンは無効になります。
child: この属性は、ボタン内のコンテンツ (通常はテキストまたはアイコンコンポーネント) を定義します。
color：ボタンの背景色を設定します。
disabledColor：無効状態のボタンの背景色を設定します。
highlightColor：ボタンを押したときのハイライト色を設定します。
splashColor：ボタンをクリックしたときの水の波紋の色を設定します。
textColor: ボタン内のテキストの色を設定します。
padding: ボタン内のパディングを設定します。

2.3 例

FlatButton を使用した簡単な例を次に示します。

FlatButton(
  onPressed: () {
    
    
    // 在这里处理按钮点击事件
    print('FlatButton被点击了');
  },
  child: Text('点击我'),
  color: Colors.blue,
  textColor: Colors.white,
  padding: EdgeInsets.all(16.0),
)

この例では、青色の背景と白色のテキストを持つ FlatButton を作成します。ユーザーがボタンをクリックすると、コンソールには「FlatButton がクリックされました」と出力されます。

2.4 非推奨: 代わりに ElevatedButton が推奨されます。

3. アウトラインボタン:OutlineButtonコンポーネント

このセクションでは、Flutter の OutlineButton コンポーネントについて紹介します。これには、OutlineButton の作成、OutlineButton スタイルの設定、OutlineButton 形状の設定、OutlineButton クリックイベントの設定、OutlineButton コンポーネントの無効化などが含まれます。

3.1 アウトラインボタンコンポーネントの作成

アウトラインボタンを作成するには、アウトラインボタンコンストラクターを使用します。簡単な例を次に示します。

OutlineButton(
  onPressed: () {
    
    
    // 在这里处理按钮点击事件
  },
  child: Text('点击我'),
)

3.2 アウトラインボタンのスタイルを設定する

アウトラインボタンには多くのカスタマイズ可能なプロパティがあります。一般的に使用されるプロパティのいくつかを次に示します。

borderSide: ボタンの境界線のスタイルを設定します。
highlightedBorderColor：ボタンを押したときの枠線の色を設定します。
disabledBorderColor：無効状態のボタンの枠線の色を設定します。
splashColor：ボタンをクリックしたときの水の波紋の色を設定します。
textColor: ボタン内のテキストの色を設定します。
padding: ボタン内のパディングを設定します。

3.3 アウトラインボタンの形状を設定する

shapeプロパティを通じて、OutlineButton の形状を設定できます。たとえば、ボタンの角を丸く設定できます。

OutlineButton(
  onPressed: () {
    
    
    // 在这里处理按钮点击事件
  },
  child: Text('点击我'),
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10.0),
  ),
)

3.4 アウトラインボタンのクリックイベントを設定する

onPressedアウトラインボタンのクリックイベントを設定するには、プロパティにコールバック関数を提供する必要があります。このコールバック関数は、ユーザーがボタンをクリックすると起動されます。

OutlineButton(
  onPressed: () {
    
    
    // 在这里处理按钮点击事件
    print('OutlineButton被点击了');
  },
  child: Text('点击我'),
)

3.5 アウトラインボタンコンポーネントを無効にする

アウトラインボタンコンポーネントを無効にしたい場合は、onPressedプロパティをに設定するだけですnull。

OutlineButton(
  onPressed: null,
  child: Text('我是禁用的按钮'),
)

3.6 概要

このセクションでは、OutlineButton コンポーネントの基本的な使用法といくつかの共通プロパティを紹介します。OutlineButton を使用すると、枠線付きのボタンを Flutter アプリケーションに簡単に追加できます。

3.7 非推奨: 代わりにOutlinedButtonが推奨されます

4. アイコンボタン: IconButton コンポーネント

公式ドキュメントの場所: https://api.flutter.dev/flutter/material/IconButton-class.html

このセクションでは、IconButton の作成、IconButton スタイルの設定、IconButton クリックイベントの設定、IconButton コンポーネントの無効化など、Flutter の IconButton コンポーネントについて紹介します。

4.1 IconButtonコンポーネントの作成

IconButton を作成するには、IconButton コンストラクターを使用できます。

例えば：

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('IconButton Example')),
        body: Center(
          child: IconButton(
            icon: Icon(Icons.favorite),
            // 在这里处理按钮点击事件
            onPressed: () {
    
    
              print('IconButton pressed!');
            },
            color: Colors.red,
            iconSize: 48,
            tooltip: 'Add to favorites',
          ),
        ),
      ),
    );
  }
}

この例では、IconButtonコンポーネントを作成します。

このうち、icon属性はハートアイコンに設定されています。ここで使用されているアイコンは、Flutter に組み込まれている Google のアイコンです。アイコンはアイコンクラスです。ブログ投稿「Flutter でアイコンを使用する (自作アイコンライブラリを含む)」を参照してください。スキーム）」、アドレスはhttps://jclee95.blog.csdn.net/article/details/123309530です。

コードでは、onPressed 属性を設定し、アイコンボタンをクリックすると、コンソールに「IconButton pressed!」と表示されます。アイコンの色は赤、サイズは48です。Tooltip 属性を使用して、ユーザーがアイコンを長押ししたときに表示されるプロンプトメッセージ「お気に入りに追加」を設定します。
ここに画像の説明を挿入
クリックすると、コンソールに次の内容が表示されます。

4.2 IconButton スタイルの設定

IconButton にはカスタマイズ可能なプロパティが多数あります。一般的に使用されるプロパティのいくつかを以下に示します。

color：アイコンの色を設定します。
highlightColor：ボタンを押したときのハイライト色を設定します。
splashColor：ボタンをクリックしたときの水の波紋の色を設定します。
iconSize：アイコンのサイズを設定します。

4.3 IconButton クリックイベントの設定

IconButton のクリックイベントを設定するには、onPressedプロパティにコールバック関数を提供する必要があります。このコールバック関数は、ユーザーがボタンをクリックすると起動されます。

IconButton(
  onPressed: () {
    
    
    // 在这里处理按钮点击事件
    print('IconButton被点击了');
  },
  icon: Icon(Icons.favorite),
)

4.4 IconButton コンポーネントを無効にする

IconButton コンポーネントを無効にしたい場合は、onPressedプロパティをに設定するだけですnull。

IconButton(
  onPressed: null,
  icon: Icon(Icons.favorite),
)

4.5 概要

このセクションでは、IconButton コンポーネントの基本的な使用法といくつかの共通プロパティを紹介します。IconButton を使用すると、Flutter アプリケーションにアイコンボタンを簡単に追加できます。

5. フローティングアクションボタン: FloatingActionButton コンポーネント

公式ドキュメントの場所: https://api.flutter.dev/flutter/material/FloatingActionButton-class.html

このセクションでは、FloatingActionButton の作成、FloatingActionButton スタイルの設定、FloatingActionButton クリックイベントの設定、FloatingActionButton コンポーネントの無効化など、Flutter の FloatingActionButton コンポーネントについて紹介します。

5.1 FloatingActionButton コンポーネントの作成

FloatingActionButton を作成するには、FloatingActionButton コンストラクターを使用できます。

例えば：

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('FloatingActionButton Example')),
        body: Center(
          child: Text('Floating Action Button Example'),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
    
    
            print('FloatingActionButton pressed!');
          },
          child: Icon(Icons.add),
          backgroundColor: Colors.blue,
          tooltip: 'Add new item',
        ),
      ),
    );
  }
}

ここに画像の説明を挿入
この例では、 FloatingActionButtonボタンを作成し、そのonPressedプロパティを設定します。ボタンをクリックすると、コンソールに「FloatingActionButton pressed!」と出力されます。

ボタンの子コンポーネントはプラスアイコンです。ボタンの背景色は青色です。

この属性を使用してtooltip、ユーザーがボタンを長押ししたときに表示される「新しい項目を追加」というプロンプトメッセージを設定します。FloatingActionButton がScaffoldプロパティに追加されfloatingActionButton、画面の右下隅にフロート表示されます。

5.2 FloatingActionButton スタイルを設定する

FloatingActionButton には多くのカスタマイズ可能なプロパティがあります。一般的に使用されるスタイルプロパティのいくつかを次に示します。

backgroundColor：ボタンの背景色を設定します。
foregroundColor：ボタン内のアイコンの色を設定します。
splashColor：ボタンをクリックしたときの水の波紋の色を設定します。
elevation：ボタンの影のサイズを設定します。
shape：ボタンの形状を設定します。

5.3 FloatingActionButton クリックイベントの設定

FloatingActionButton のクリックイベントを設定するには、onPressedプロパティにコールバック関数を提供する必要があります。このコールバック関数は、ユーザーがボタンをクリックすると起動されます。

FloatingActionButton(
  onPressed: () {
    
    
    // 在这里处理按钮点击事件
    print('FloatingActionButton被点击了');
  },
  child: Icon(Icons.add),
)

5.4 FloatingActionButton コンポーネントを無効にする

FloatingActionButton コンポーネントを無効にしたい場合は、onPressedプロパティをに設定するだけですnull。

FloatingActionButton(
  onPressed: null,
  child: Icon(Icons.add),
)

5.5 概要

このセクションでは、FloatingActionButton コンポーネントの基本的な使用法といくつかの共通プロパティを紹介します。FloatingActionButton を使用すると、通常、アプリケーション内で主要なアクションを実行するために使用されるフローティングアクションボタンを Flutter アプリケーションに簡単に追加できます。

6. ポップアップメニューボタン: PopupMenuButton コンポーネント

公式ドキュメントの場所: https://api.flutter.dev/flutter/material/PopupMenuButton-class.html

このセクションでは、PopupMenuButton の作成、PopupMenuButton スタイルの設定、PopupMenuButton クリックイベントの設定、PopupMenuButton メニュー項目のカスタマイズなど、Flutter の PopupMenuButton コンポーネントを紹介します。

6.1 PopupMenuButtonコンポーネントの作成

PopupMenuButton を作成するには、PopupMenuButton コンストラクターを使用できます。

例えば：

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('PopupMenuButton Example')),
        body: Center(
          child: PopupMenuButton<String>(
            itemBuilder: (BuildContext context) {
    
    
              return {
    
    'Option 1', 'Option 2', 'Option 3'}
                  .map((String choice) {
    
    
                return PopupMenuItem<String>(
                  value: choice,
                  child: Text(choice),
                );
              }).toList();
            },
            onSelected: (String value) {
    
    
              print('Selected: $value');
            },
            icon: Icon(Icons.more_vert),
            tooltip: 'Show menu',
          ),
        ),
      ),
    );
  }
}

この例では、PopupMenuButton コンポーネントを作成します。itemBuilder属性はポップアップメニューのオプションを構築するために使用されます。ここでは「オプション 1」、「オプション 2」、「オプション 3」という 3 つのオプションを作成しました。プロパティが set であるためonSelected、ユーザーがオプションを選択すると、「Selected:」とオプションの値がコンソールに出力されます。iconプロパティを垂直の 3 点アイコンに設定します。この属性を使用してtooltip、ユーザーがボタンを長押ししたときに表示されるプロンプトメッセージ「メニューを表示」を設定します。図に示すように:
ここに画像の説明を挿入
コンソールで印刷結果を確認できます。

6.2 PopupMenuButton スタイルの設定

PopupMenuButton には多くのカスタマイズ可能なプロパティがあります。一般的に使用されるプロパティのいくつかを以下に示します。

icon：ボタンのアイコンを設定します。
color：ボタンの色を設定します。
shape：ボタンの形状を設定します。
elevation：ボタンの影のサイズを設定します。

6.3 PopupMenuButtonのクリックイベントを設定する

PopupMenuButton のクリックイベントを設定するには、onSelectedプロパティにコールバック関数を提供する必要があります。このコールバック関数は、ユーザーがメニュー項目をクリックするとトリガーされます。

PopupMenuButton(
  itemBuilder: (BuildContext context) {
    
    
    return [
      PopupMenuItem(
        value: 'item1',
        child: Text('菜单项1'),
      ),
      PopupMenuItem(
        value: 'item2',
        child: Text('菜单项2'),
      ),
    ];
  },
  onSelected: (value) {
    
    
    // 在这里处理菜单项点击事件
    print('选中的菜单项：$value');
  },
)

6.4 PopupMenuButton メニュー項目をカスタマイズする

PopupMenuItemプロパティを変更することで、メニュー項目のスタイルをカスタマイズできます。よく使用されるプロパティをいくつか示します。

value: メニュー項目の値を設定します。ユーザーがメニュー項目をクリックすると、この値がコールバック関数に渡されますonSelected。
height: メニュー項目の高さを設定します。
enabled: メニュー項目をクリックできるかどうかを設定します。
textStyle: メニュー項目のテキストのスタイルを設定します。

6.5 概要

このセクションでは、PopupMenuButton コンポーネントの基本的な使用法といくつかの共通プロパティを紹介します。PopupMenuButton を使用すると、Flutter アプリケーションにポップアップメニューボタンを簡単に追加でき、より豊富な操作オプションを提供できます。

7. iOS スタイルボタン: CupertinoButton コンポーネント

公式ドキュメントの場所: https://api.flutter.dev/flutter/cupertino/CupertinoButton-class.html

このセクションでは、CupertinoButton の作成、CupertinoButton スタイルの設定、CupertinoButton クリックイベントの設定、CupertinoButton コンポーネントの無効化など、Flutter の CupertinoButton コンポーネントについて紹介します。CupertinoButton コンポーネントは iOS 用に設計されたボタンスタイルで、iOS ネイティブアプリケーションと同様のインターフェイス効果を簡単に実現できます。

7.1 CupertinoButton コンポーネントの作成

CupertinoButton を作成するには、CupertinoButton コンストラクターを使用できます。簡単な例を次に示します。

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
    
    
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
    
    
  const MyApp({
    
    super.key});

  @override
  Widget build(BuildContext context) {
    
    
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('CupertinoButton Example')),
        body: Center(
          child: CupertinoButton(
            onPressed: () {
    
    
              print('CupertinoButton pressed!');
            },
            color: Colors.blue,
            padding:
                const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
            borderRadius: BorderRadius.circular(8.0),
            child: const Text('Press me'),
          ),
        ),
      ),
    );
  }
}

ここに画像の説明を挿入

この例では、CupertinoButtonコンポーネントを作成します。

onPressedプロパティを設定すると、ボタンがクリックされたときに「CupertinoButton pressed!」とコンソールに出力されます。ボタンの子コンポーネントは、「Press me」というテキストコンポーネントです。

ボタンの背景色は青色です。この属性を使用してpadding、ボタンのパディングを水平方向に 16 ピクセル、垂直方向に 8 ピクセルに設定します。borderRadiusこのプロパティは、ボタンの角の半径が 8 ピクセルになるように設定されています。

3 回クリックすると、コンソールに次の内容が表示されます。

ここに画像の説明を挿入

7.2 CupertinoButton スタイルの設定

CupertinoButton には多くのカスタマイズ可能なプロパティがあります。一般的に使用されるプロパティのいくつかを以下に示します。

color：ボタンの背景色を設定します。
disabledColor：無効状態のボタンの色を設定します。
padding: ボタンのパディングを設定します。
borderRadius: ボタンの角の半径を設定します。
minSize: ボタンの最小サイズを設定します。
pressedOpacity：ボタンを押した状態の透明度を設定します。

7.3 CupertinoButton クリックイベントの設定

CupertinoButton のクリックイベントを設定するには、onPressedプロパティにコールバック関数を提供する必要があります。このコールバック関数は、ユーザーがボタンをクリックすると起動されます。

CupertinoButton(
  onPressed: () {
    
    
    // 在这里处理按钮点击事件
    print('CupertinoButton被点击了');
  },
  child: Text('iOS样式按钮'),
)

7.4 CupertinoButton コンポーネントを無効にする

CupertinoButton コンポーネントを無効にしたい場合は、onPressedプロパティをに設定するだけですnull。

CupertinoButton(
  onPressed: null,
  child: Text('iOS样式按钮'),
)

7.5 概要

このセクションでは、CupertinoButton コンポーネントの基本的な使用法といくつかの共通プロパティを紹介します。CupertinoButton を使用すると、iOS スタイルのボタンを Flutter アプリケーションに簡単に追加でき、iOS ネイティブアプリケーションと同様のインターフェイス効果を実現できます。

8. テキストボタン: TextButton コンポーネント (輪郭や塗りつぶしの色のないボタン)

公式ドキュメントの場所: https://api.flutter.dev/flutter/material/TextButton-class.html

このセクションでは、TextButton の作成、TextButton スタイルの設定、TextButton クリックイベントの設定、TextButton コンポーネントの無効化など、Flutter の TextButton コンポーネントについて紹介します。TextButton は、背景や境界線のないシンプルなテキストボタンで、通常は 2 番目または 2 番目のアクションに使用されます。

8.1 TextButtonコンポーネントの作成

TextButton を作成するには、TextButton コンストラクターを使用できます。簡単な例を次に示します。

import 'package:flutter/material.dart';

void main() {
    
    
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
    
    
  const MyApp({
    
    super.key});

  @override
  Widget build(BuildContext context) {
    
    
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('TextButton Example')),
        body: Center(
          child: TextButton(
            onPressed: () {
    
    
              print('TextButton pressed!');
            },
            style: TextButton.styleFrom(
              foregroundColor: Colors.blue,
              padding:
                  const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
            ),
            child: const Text(
              'Press me',
              style: TextStyle(fontSize: 20),
            ),
          ),
        ),
      ),
    );
  }
}

ここに画像の説明を挿入

この例では、TextButton コンポーネントを作成します。

ボタンのサブコンポーネントは、フォントサイズ 20 ピクセルで「Press me」を表示するテキストコンポーネントです。style 属性と TextButton.styleFrom メソッドを使用して、ボタンのテキストの色を青に設定し、パディングを水平方向に 16 ピクセル、垂直方向に 8 ピクセルに設定します。

onPressedプロパティを設定すると、ボタンがクリックされたときに「TextButton pressed!」がコンソールに出力されます。

ここに画像の説明を挿入
（ここでは2回注文しました）

8.2 TextButton スタイルの設定

TextButton にはカスタマイズ可能なプロパティが多数あります。一般的に使用されるプロパティのいくつかを以下に示します。

style:ButtonStyleテキストの色、背景色、境界線などを含むボタンのスタイルを設定するために使用します。
onSurface：無効状態のボタンの文字色を設定します。

TextButton のスタイル設定の例を次に示します。

TextButton(
  onPressed: () {
    
    
    // 在这里处理按钮点击事件
  },
  child: Text('TextButton'),
  style: ButtonStyle(
    foregroundColor: MaterialStateProperty.all(Colors.red),
  ),
)

8.3 TextButton クリックイベントの設定

TextButton のクリックイベントを設定するには、onPressedプロパティにコールバック関数を提供する必要があります。このコールバック関数は、ユーザーがボタンをクリックすると起動されます。

TextButton(
  onPressed: () {
    
    
    // 在这里处理按钮点击事件
    print('TextButton被点击了');
  },
  child: Text('TextButton'),
)

8.4 TextButton コンポーネントを無効にする

TextButton コンポーネントを無効にしたい場合は、onPressedプロパティをに設定するだけですnull。

TextButton(
  onPressed: null,
  child: Text('TextButton'),
)

8.5 概要

このセクションでは、TextButton コンポーネントの基本的な使用法といくつかの共通プロパティを紹介します。TextButton を使用すると、Flutter アプリケーションに簡潔なテキストボタンを簡単に追加して、明確でわかりやすいインターフェイスを実現できます。

9. ボタンの昇格: ElevatedButton コンポーネント

このセクションでは、ElevatedButton の作成、ElevatedButton スタイルの設定、ElevatedButton クリックイベントの設定、ElevatedButton コンポーネントの無効化など、Flutter の ElevatedButton コンポーネントについて紹介します。ElevatedButton は、フローティング効果があり、押すと影が表示されるマテリアルデザインスタイルのボタンです。

9.1 ElevatedButton コンポーネントの作成

ElevatedButton を作成するには、ElevatedButton コンストラクターを使用できます。簡単な例を次に示します。

ElevatedButton(
  onPressed: () {
    
    
    // 在这里处理按钮点击事件
  },
  child: Text('ElevatedButton'),
)

9.2 ElevatedButton のスタイルの設定

ElevatedButton には多くのカスタマイズ可能なプロパティがあります。一般的に使用されるプロパティのいくつかを次に示します。

style:ButtonStyle背景色、境界線、影などを含むボタンのスタイルを設定するために使用します。
onPrimary：ボタンの文字とアイコンの色を設定します。
elevation：ボタンの影のサイズを設定します。

例えば：

import 'package:flutter/material.dart';

void main() {
    
    
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
    
    
  const MyApp({
    
    super.key});

  @override
  Widget build(BuildContext context) {
    
    
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('ElevatedButton Example')),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
    
    
              print('ElevatedButton pressed!');
            },
            style: ElevatedButton.styleFrom(
              backgroundColor: Colors.blue,
              padding:
                  const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(8.0),
              ),
            ),
            child: const Text(
              'Press me',
              style: TextStyle(fontSize: 20),
            ),
          ),
        ),
      ),
    );
  }
}

ここに画像の説明を挿入

この例では、ElevatedButtonコンポーネントを作成します。

ボタンのサブコンポーネントは、フォントサイズ 20 ピクセルで「Press me」を表示するテキストコンポーネントです。styleプロパティとElevatedButton.メソッドを通じてstyleFrom、ボタンの背景色を青に設定し、パディングを水平方向に 16 ピクセル、垂直方向に 8 ピクセルに設定します。さらに、ボタンの形状を角の半径が 8 ピクセルの角丸長方形に設定します。

onPressedプロパティを設定すると、ボタンがクリックされたときに「ElevatedButton pressed!」とコンソールに出力されます。
ここに画像の説明を挿入
(ここでは3回注文しました)

9.3 ElevatedButton クリックイベントの設定

ElevatedButton のクリックイベントを設定するには、onPressedプロパティにコールバック関数を提供する必要があります。このコールバック関数は、ユーザーがボタンをクリックすると起動されます。

ElevatedButton(
  onPressed: () {
    
    
    // 在这里处理按钮点击事件
    print('ElevatedButton被点击了');
  },
  child: Text('ElevatedButton'),
)

9.4 ElevatedButton コンポーネントを無効にする

ElevatedButton コンポーネントを無効にしたい場合は、onPressedプロパティをに設定するだけですnull。

ElevatedButton(
  onPressed: null,
  child: Text('ElevatedButton'),
)

9.5 概要

このセクションでは、ElevatedButton コンポーネントの基本的な使用法といくつかの共通プロパティを紹介します。ElevatedButton を使用すると、マテリアルデザインスタイルのボタンを Flutter アプリケーションに簡単に追加して、美しくインタラクティブなインターフェイスを実現できます。

10. アウトラインボタン:OutlinedButtonコンポーネント

このセクションでは、Flutter の OutlinedButton コンポーネントについて紹介します。これには、OutlinedButton の作成、OutlinedButton スタイルの設定、OutlinedButton クリックイベントの設定、OutlinedButton コンポーネントの無効化などが含まれます。アウトラインボタンは枠線があり、背景色のないボタンで、通常は二次アクションに使用したり、他のボタンと区別したりするために使用されます。

10.1 アウトラインボタンコンポーネントの作成

アウトラインボタンを作成するには、アウトラインボタンコンストラクターを使用できます。例えば：

import 'package:flutter/material.dart';

void main() {
    
    
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
    
    
  const MyApp({
    
    super.key});

  @override
  Widget build(BuildContext context) {
    
    
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('OutlinedButton Example')),
        body: Center(
          child: OutlinedButton(
            onPressed: () {
    
    
              print('OutlinedButton pressed!');
            },
            style: OutlinedButton.styleFrom(
              foregroundColor: Colors.blue,
              side: const BorderSide(color: Colors.blue, width: 2),
              padding:
                  const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(8.0),
              ),
            ),
            child: const Text(
              'Press me',
              style: TextStyle(fontSize: 20),
            ),
          ),
        ),
      ),
    );
  }
}

この例では、OutlinedButtonコンポーネントを作成します。

ボタンのサブコンポーネントは、フォントサイズ 20 ピクセルで「Press me」を表示するテキストコンポーネントです。

style 属性とOutlinedButton.styleFromメソッドを使用して、ボタンのテキストの色を青、境界線の色を青、境界線の幅を 2 ピクセル、パディングを水平方向に 16 ピクセル、垂直方向に 8 ピクセルに設定します。さらに、ボタンの形状を角の半径が 8 ピクセルの角丸長方形に設定します。
ここに画像の説明を挿入
そのonPressedプロパティを設定すると、ボタンがクリックされたときに「OutlinedButton pressed!」がコンソールに出力されます。

ここに画像の説明を挿入

(ここで2回クリックしてしまいました)

10.2 アウトラインボタンスタイルの設定

OutlinedButton にはカスタマイズ可能なプロパティが多数あります。一般的に使用されるプロパティのいくつかを次に示します。

style:ButtonStyleテキストの色、境界線の色、境界線の幅などを含むボタンのスタイルを設定するために使用します。
onSurface：無効状態のボタンの文字色を設定します。

以下は、OutlinedButton のスタイル設定の例です。

OutlinedButton(
  onPressed: () {
    
    
    // 在这里处理按钮点击事件
  },
  child: Text('OutlinedButton'),
  style: ButtonStyle(
    foregroundColor: MaterialStateProperty.all(Colors.red),
    side: MaterialStateProperty.all(BorderSide(color: Colors.red, width: 2)),
  ),
)

10.3 アウトラインボタンクリックイベントの設定

OutlinedButton(
  onPressed: () {
    
    
    // 在这里处理按钮点击事件
    print('OutlinedButton被点击了');
  },
  child: Text('OutlinedButton'),
)

10.4 アウトラインボタンコンポーネントを無効にする

OutlinedButton コンポーネントを無効にしたい場合は、onPressedプロパティをに設定するだけですnull。

OutlinedButton(
  onPressed: null,
  child: Text('OutlinedButton'),
)

10.5 概要

このセクションでは、OutlinedButton コンポーネントの基本的な使用法といくつかの共通プロパティを紹介します。OutlinedButton を使用すると、枠付きのボタンを Flutter アプリケーションに簡単に追加して、明確でわかりやすいインターフェイスを実現できます。アウトラインボタンは、他の種類のボタンよりも二次的なアクションや他のボタンとの差別化に適しています。

11. 塗りつぶしボタン: FilledButton コンポーネント

Flutter 2.6で追加されたコンポーネント。

この章では、Flutter で FilledButton コンポーネントを使用する方法を学びます。FilledButton は、フォームの送信、イベントのトリガーなど、さまざまなシナリオで使用できる塗りつぶされたボタンです。まず FilledButton コンポーネントを作成し、次にコンポーネントのスタイルを設定し、最後にイベントを処理します。

11.1 FilledButtonコンポーネントの作成

まず、FilledButton コンポーネントを作成する必要があります。Flutter では、FilledButtonコンストラクターを使用して FilledButton コンポーネントを作成できます。

以下は、Flutter によって公式に提供されている例です。

import 'package:flutter/material.dart';

/// Flutter code sample for [FilledButton].

void main() {
    
    
  runApp(const FilledButtonApp());
}

class FilledButtonApp extends StatelessWidget {
    
    
  const FilledButtonApp({
    
    super.key});

  @override
  Widget build(BuildContext context) {
    
    
    return MaterialApp(
      theme: ThemeData(
          colorSchemeSeed: const Color(0xff6750a4), useMaterial3: true),
      home: Scaffold(
        appBar: AppBar(title: const Text('FilledButton Sample')),
        body: Center(
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Column(children: <Widget>[
                const SizedBox(height: 30),
                const Text('Filled'),
                const SizedBox(height: 15),
                FilledButton(
                  onPressed: () {
    
    },
                  child: const Text('Enabled'),
                ),
                const SizedBox(height: 30),
                const FilledButton(
                  onPressed: null,
                  child: Text('Disabled'),
                ),
              ]),
              const SizedBox(width: 30),
              Column(children: <Widget>[
                const SizedBox(height: 30),
                const Text('Filled tonal'),
                const SizedBox(height: 15),
                FilledButton.tonal(
                  onPressed: () {
    
    },
                  child: const Text('Enabled'),
                ),
                const SizedBox(height: 30),
                const FilledButton.tonal(
                  onPressed: null,
                  child: Text('Disabled'),
                ),
              ])
            ],
          ),
        ),
      ),
    );
  }
}

dButton コンポーネントを作成し、Scaffold の中央に追加しました。 ](https://img-blog.csdnimg.cn/9941161adb5847acabd2276dd27d4c62.gif)

11.2 コンポーネントのスタイルの設定

次に、FilledButton コンポーネントのスタイルを設定する方法を学びます。FilledButton コンポーネントは、styleコンポーネントのスタイルをカスタマイズするために使用できるいくつかのプロパティを提供します。以下は、FilledButton のスタイル設定の例です。

import 'package:flutter/material.dart';

void main() {
    
    
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
    
    
  const MyApp({
    
    super.key});

  @override
  Widget build(BuildContext context) {
    
    
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('FilledButton 样式示例'),
        ),
        body: Center(
          child: FilledButton(
            onPressed: () {
    
    
              print('点击了 FilledButton');
            },
            style: ButtonStyle(
              backgroundColor: MaterialStateProperty.all<Color>(Colors.blue),
              foregroundColor: MaterialStateProperty.all<Color>(Colors.white),
              textStyle: MaterialStateProperty.all<TextStyle>(
                const TextStyle(fontSize: 20),
              ),
              padding: MaterialStateProperty.all<EdgeInsetsGeometry>(
                const EdgeInsets.symmetric(horizontal: 32, vertical: 16),
              ),
            ),
            child: const Text('点击我'),
          ),
        ),
      ),
    );
  }
}

ここに画像の説明を挿入

この例では、FilledButton の背景色、前景色、テキストスタイル、パディングを設定します。

より豊富なスタイルを備えた別の例は次のとおりです。

import 'package:flutter/material.dart';

void main() {
    
    
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
    
    
  const MyApp({
    
    super.key});

  @override
  Widget build(BuildContext context) {
    
    
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('FilledButton Example')),
        body: Center(
          child: TextButton(
            onPressed: () {
    
    
              print('FilledButton pressed!');
            },
            style: ButtonStyle(
              backgroundColor: MaterialStateProperty.all(Colors.orange),
              foregroundColor: MaterialStateProperty.all(Colors.white),
              padding: MaterialStateProperty.all(
                  const EdgeInsets.symmetric(horizontal: 24.0, vertical: 12.0)),
              shape: MaterialStateProperty.all(RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(12.0),
              )),
              side: MaterialStateProperty.all(
                  const BorderSide(color: Colors.deepOrange, width: 3)),
              elevation: MaterialStateProperty.all(6.0),
              shadowColor: MaterialStateProperty.all(Colors.orangeAccent),
            ),
            child: const Text(
              'Press me',
              style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
            ),
          ),
        ),
      ),
    );
  }
}

この例では、次のスタイルを FilledButton に追加します。

ボタンの背景色はオレンジです。
ボタンのテキストの色は白、フォントサイズは 20、フォントは太字です。
ボタンのパディングは水平方向に 24 ピクセル、垂直方向に 12 ピクセルです。
ボタンの形状は、角の半径が 12 ピクセルの角丸長方形です。
ボタンの境界線は濃いオレンジ色で、幅は 3 ピクセルです。
ボタンの影の高さは 6.0、影の色はオレンジです。

効果は次のとおりです。

ここに画像の説明を挿入

11.3 イベント処理

最後に、FilledButton コンポーネントのイベントを処理する方法を学びます。ユーザーが FilledButton をクリックすると、onPressedプロパティを通じてイベントを処理できます。FilledButton クリックイベントを処理する例を次に示します。

import 'package:flutter/material.dart';

void main() {
    
    
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
    
    
  const MyApp({
    
    super.key});

  @override
  Widget build(BuildContext context) {
    
    
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('FilledButton 事件示例'),
        ),
        body: Center(
          child: FilledButton(
            onPressed: () {
    
    
              print('点击了 FilledButton');
              // 在这里处理点击事件
            },
            child: const Text('点击我'),
          ),
        ),
      ),
    );
  }
}

この例では、onPressedFilledButton のクリックイベントを処理するコールバック関数をプロパティに追加しました。

11.4 概要

このセクションでは、FilledButtonコンポーネントの作成方法、コンポーネントスタイルの設定方法、イベントの処理方法など、FlutterでFilledButtonコンポーネントを使用する方法を紹介しました。

Flutterコンポーネント (3) Buttonコンポーネント

目次

1.1 RaizedButton コンポーネントを作成する

1.2 RaizedButton スタイルを設定する

1.3 レイズドボタンの形状を設定する

1.4 RaizedButton クリック イベントを設定する

1.5 RaizedButton コンポーネントを無効にする

1.6 概要

1.7 非推奨: 代わりに TextButton が推奨されます。

2.1 フラットボタンの作成

2.2 共通のプロパティ

2.3 例

2.4 非推奨: 代わりに ElevatedButton が推奨されます。

おすすめ

1.4 RaizedButton クリックイベントを設定する