注：特別な手順はありません。FlutterバージョンとDartバージョンは次のとおりです。
Flutterバージョン：1.12.13 + hotfix.5
Dartバージョン：2.7.0
Flutterには10以上のボタン（ボタン）コントロールが組み込まれており、これらのコントロールを理解することで開発速度が向上します。
RaisedButton
RaisedButtonは、マテリアルスタイルの「発生」ボタンであり、基本的な使用法は次のとおりです。
RaisedButton(
child: Text('Button'),
onPressed: (){
},
)
効果：
onPressednullまたは設定されていない場合、ボタンは無効になります。
onHighlightChangedハイライト変更のコールバックは、押されるとハイライト状態になり、解除されると非ハイライト状態になります。使用方法は次のとおりです。
RaisedButton(
onHighlightChanged: (high){
},
...
)
ボタンは、フォントとさまざまなステータス色を設定できます。概要は次のとおりです。
textColorを例にとると、使用方法は次のとおりです。
RaisedButton(
textColor: Colors.red,
...
)
textThemeを使用してフォントスタイルを設定することもできます。使用方法は次のとおりです。
RaisedButton(
textTheme: ButtonTextTheme.primary,
...
)
ButtonTextThemeの値は次のように導入されます。
- 通常：黒または白のフォント、ThemeData.brightnessに応じて
- アクセント：フォントの色はThemeData.accentColorに依存します
- プライマリ：フォントの色
はThemeData.primaryColorの3つの値に依存し、MaterialAppコントロールでグローバルに設定されます。設定は次のとおりです。
MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primaryColor: Color(0xFF42A5F5),
accentColor: Colors.yellow,
brightness: Brightness.light
),
...
)
ボタンの影の設定、影の強調表示、影の無効化、使用法は次のとおりです。
RaisedButton(
elevation: 5.0,
highlightElevation: 5.0,
disabledElevation: 5.0,
...
)
形状ボタンの形状を設定します。たとえば、円に設定すると、コードは次のようになります。
RaisedButton(
shape: CircleBorder(),
...
)
効果：
ホバーに関連するプロパティは、マウスがホバーされたときの状態を指し、モバイル端末は影響を与えません。フォーカスに関連するプロパティは、フォーカスが取得されたときの状態です。
FlatButton
FlatButtonはフラットボタンです。使用方法はRaisedButtonと同じです。コードは次のとおりです。
FlatButton(
child: Text('Button'),
color: Colors.blue,
onPressed: () {},
)
効果は次のとおりです。
アウトラインボタン
OutlineButtonはボーダー付きのボタンで、使用法はRaisedButtonと同じです。コードは次のとおりです。
OutlineButton(
child: Text('Button'),
onPressed: () {},
)
効果は次のとおりです。
ボーダースタイルを設定します。コードは次のとおりです。
OutlineButton(
borderSide: BorderSide(color: Colors.blue,width: 2),
disabledBorderColor: Colors.black,
highlightedBorderColor: Colors.red,
child: Text('Button'),
onPressed: () {},
)
効果は次のとおりです。
DropdownButton
DropdownButtonはドロップダウン選択ボタンで、基本的な使用法は次のとおりです。
var _dropValue = '语文';
_buildButton() {
return DropdownButton(
value: _dropValue,
items: [
DropdownMenuItem(child: Text('语文'),value: '语文',),
DropdownMenuItem(child: Text('数学'),value: '数学'),
DropdownMenuItem(child: Text('英语'),value: '英语'),
],
onChanged: (value){
setState(() {
_dropValue = value;
});
},
);
}
アイテムはクリックするとポップアップするオプションで、onChangedオプションが変更されるとコールバックされます。効果は次のとおりです。
選択したオプションのスタイルに満足できない場合は、カスタマイズできます。使用方法は次のとおりです。
DropdownButton(
selectedItemBuilder: (context){
return [
Text('语文',style: TextStyle(color: Colors.red),),
Text('数学',style: TextStyle(color: Colors.red),),
Text('英语',style: TextStyle(color: Colors.red),)
];
},
...
)
selectedItemBuilderによって返されるコンポーネントは、items次のように、選択したスタイルと1対1で対応する必要があります。
ユーザーが選択されていない場合、つまり値がnullの場合、「選択してください」と表示され、使用方法は次のとおりです。
DropdownButton(
hint: Text('请选择'),
value: null,
...
)
効果は次のとおりです。
デフォルトでは、ドロップダウンオプションのアイコンは逆三角形で、これもカスタマイズできます。使用方法は次のとおりです。
DropdownButton(
icon: Icon(Icons.add),
iconSize: 24,
iconDisabledColor: Colors.red,
iconEnabledColor: Colors.red,
...
)
効果は次のとおりです。
RawMaterialButton
RawMaterialButtonはSemantics、MaterialおよびInkWell作成されたコンポーネントに基づいており、カスタムボタンに現在のシステムテーマとボタンテーマを使用したり、既存のスタイルをマージしたりしません。一方、RaisedButtonとFlatButtonは、RawMaterialButtonに設定されたシステムテーマとボタンテーマ、関連プロパティに基づいています。 RaisedButtonを参照できます。パラメータは基本的に同じですが、基本的な使用法は次のとおりです。
RawMaterialButton(
onPressed: (){},
fillColor: Colors.blue,
child: Text('Button'),
)
効果は次のとおりです。
PopupMenuButton
PopupMenuButtonはメニュー選択コントロールであり、使用方法は次のとおりです。
PopupMenuButton<String>(
itemBuilder: (context) {
return <PopupMenuEntry<String>>[
PopupMenuItem<String>(
value: '语文',
child: Text('语文'),
),
PopupMenuItem<String>(
value: '数学',
child: Text('数学'),
),
PopupMenuItem<String>(
value: '英语',
child: Text('英语'),
),
PopupMenuItem<String>(
value: '生物',
child: Text('生物'),
),
PopupMenuItem<String>(
value: '化学',
child: Text('化学'),
),
];
},
)
効果は次のとおりです。
初期値を設定します。
PopupMenuButton<String>(
initialValue: '语文',
...
)
初期値を設定した後、メニューを開いた後、設定値が強調表示され、効果は次のようになります。
ユーザーが選択した特定のアイテムの値を取得するか、ユーザーが選択していない場合、コードは次のようになります。
PopupMenuButton<String>(
onSelected: (value){
print('$value');
},
onCanceled: (){
print('onCanceled');
},
...
)
tooltip押し続けるとポップアップするプロンプトで、使い方は次のとおりです。
PopupMenuButton<String>(
tooltip: 'PopupMenuButton',
...
)
効果は次のとおりです。
シャドウ値、パディング、およびポップアップメニューの背景色を設定します。
PopupMenuButton<String>(
elevation: 5,
padding: EdgeInsets.all(5),
color: Colors.red,
...
)
デフォルトでは、PopupMenuButtonは3つの小さなドットを表示します。設定に合わせて配置することもできます。設定テキストは次のとおりです。
PopupMenuButton<String>(
child: Text('学科'),
...
)
childコンポーネントはInkWellによってラップされます。ポップアップメニューをクリックすると、効果は次のようになります。
他のアイコンを設定することもできます：
PopupMenuButton<String>(
icon: Icon(Icons.add),
...
)
効果は次のとおりです。
ポップアップメニューの境界線を設定します。
PopupMenuButton<String>(
shape: RoundedRectangleBorder(
side: BorderSide(
color: Colors.red
),
borderRadius: BorderRadius.circular(10)
),
...
)
効果は次のとおりです。
IconButton
IconButtonはアイコンボタンで、使用方法は次のとおりです。
IconButton(
icon: Icon(Icons.person),
iconSize: 30,
color: Colors.red,
onPressed: () {},
)
プロンプトのプロパティを設定します。
IconButton(
tooltip: '这是一个图标按钮',
icon: Icon(Icons.person),
iconSize: 30,
color: Colors.red,
onPressed: () {},
)
長押しするとプロンプトが表示され、効果は次のようになります。
戻るボタン
BackButtonは、マテリアルスタイルの戻るボタンであり、それ自体がIconButtonです。クリックすると、デフォルトで実行されます。Navigator.maybePopつまり、ルーティングスタックに前のページがある場合、前のページに戻ります。
BackButton()
AndroidとIOSプラットフォームで表示されるアイコンは異なり、iOSの効果は次のとおりです。
Androidの効果は次のとおりです。
CloseButton
CloseButtonは、マテリアルスタイルの閉じるボタンで、それ自体がIconButtonです。クリックすると、デフォルトで実行されます。Navigator.maybePopつまり、ルーティングスタックに前のページがある場合、前のページに戻ります。
BackButtonアプリケーションのシナリオとは異なり、BackButtonはフルスクリーンページに適しており、CloseButtonはポップアップダイアログに適しています。
使用方法は次のとおりです。
CloseButton()
効果は次のとおりです。
ボタンバー
ButtonBarは独立したボタンコントロールではなく、最後に配置されるコンテナーのようなコントロールです。水平方向に十分なスペースがない場合、ボタンは折り返されずに垂直に配置されます。基本的な使用法は次のとおりです。
ButtonBar(
children: <Widget>[
RaisedButton(),
RaisedButton(),
RaisedButton(),
RaisedButton(),
],
)
効果は次のとおりです。
スピンドルの位置合わせとスピンドルのサイズを設定します。
ButtonBar(
alignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
...
)
効果は次のとおりです。
トグルボタン
ToggleButtonsコンポーネントは、複数のコンポーネントを組み合わせて、ユーザーがそれらから選択できるようにします。ToggleButtonsの基本的な使用法は次のとおりです。
List<bool> _selecteds = [false, false, true];
ToggleButtons(
isSelected: _selecteds,
children: <Widget>[
Icon(Icons.local_cafe),
Icon(Icons.fastfood),
Icon(Icons.cake),
],
onPressed: (index) {
setState(() {
_selecteds[index] = !_selecteds[index];
});
},
);
isSelected属性はブール型のコレクションであり、数は子の数と同じonPressedで、クリックコールバックであり、適切なスイッチボタン行があり、効果は次のとおりです。
ボタンの色の設定など、外観をカスタマイズすることもできます。
ToggleButtons(
color: Colors.green,
selectedColor: Colors.orange,
fillColor: Colors.red,
...
)
効果は次のとおりです。
fillColor選択されたボタンの背景色です。
ボーダーが必要ない場合は、renderBorderfalseに設定できます。
ToggleButtons(
renderBorder: false,
)
効果は次のとおりです。
もちろん、ボーダーの角の半径、幅、色などを設定することもできます：
ToggleButtons(
borderRadius: BorderRadius.circular(30),
borderColor: Colors.orange,
borderWidth: 3,
selectedBorderColor: Colors.deepOrange,
）
効果は次のとおりです。
押したときにスプラッシュカラー（splashColor）とハイライトカラー（highlightColor）を設定することもできます。
ToggleButtons(
splashColor: Colors.purple,
highlightColor: Colors.yellow,
）
効果は次のとおりです。
ボタンが無効になっている場合、無効にしたときのボタンと枠の色を設定できます。
ToggleButtons(
onPressed: null,
disabledColor: Colors.grey[300],
disabledBorderColor: Colors.blueGrey,
)
効果は次のとおりです。
Webプログラムを開発している場合は、ホバー色を設定できます。
ToggleButtons(
hoverColor: Colors.cyan,
)
