[Flutter コンポーネント] 005-基本コンポーネント: ラジオ、スイッチ、チェックボックス
記事ディレクトリ
I. 概要
マテリアル スタイルのラジオ スイッチSwitchとチェック ボックスは、 マテリアル コンポーネント ライブラリ で提供されますCheckbox。これらは から継承されますがStatefulWidget、現在の選択状態は保存されず、選択状態は親コンポーネントによって管理されます。またはをSwitchクリックCheckboxするとonChangedコールバックがトリガーされ、このコールバックで選択された状態変更ロジックを処理できます。
複数のオプションの無線機能を実装する必要がある場合は、RadioとRadioListTileコンポーネントを使用できます。これらのコンポーネントを使用すると、ユーザーは一連のオプションから 1 つを選択できます。
2. 基本的な使い方
1. スイッチ
コード例
import 'package:flutter/material.dart';
class HomePage extends StatefulWidget {
const HomePage({
super.key});
State<HomePage> createState() => HomePageState();
}
class HomePageState extends State<HomePage> {
bool _value = false;
Widget build(BuildContext context) {
return Container(
color: Colors.white,
child: Center(
child: Switch(
value: _value,
activeColor: Colors.black,
onChanged: (bool newValue) {
setState(() {
_value = newValue;
});
},
),
),
);
}
}
演算結果
2. チェックボックス
コード例
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class HomePage extends StatefulWidget {
const HomePage({
super.key});
State<HomePage> createState() => HomePageState();
}
class HomePageState extends State<HomePage> {
bool _value1 = false;
bool _value2 = false;
bool _value3 = false;
bool _value4 = false;
Widget build(BuildContext context) {
return Container(
color: Colors.white,
child: Column(
children: [
Checkbox(
value: _value1,
onChanged: (bool? newValue) {
setState(() {
_value1 = newValue!;
});
},
),
CheckboxListTile(
title: const Text('Checkbox 2'),
value: _value2,
onChanged: (bool? newValue) {
setState(() {
_value2 = newValue!;
});
},
),
CheckboxMenuButton(
value: _value3,
onChanged: (bool? newValue) {
setState(() {
_value3 = newValue!;
});
},
child: const Text('Checkbox 3')),
CupertinoCheckbox(
value: _value4,
onChanged: (bool? newValue) {
setState(() {
_value4 = newValue!;
});
},
),
],
),
);
}
}
演算結果
3. 複数のオプション
コード例
import 'package:flutter/material.dart';
class HomePage extends StatefulWidget {
const HomePage({
super.key});
State<HomePage> createState() => HomePageState();
}
class HomePageState extends State<HomePage> {
String? _selectedOption;
Widget build(BuildContext context) {
return Container(
color: Colors.white,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
RadioListTile<String>(
title: const Text('Option 1'),
value: 'Option 1',
groupValue: _selectedOption,
onChanged: (String? newValue) {
setState(() {
_selectedOption = newValue;
});
},
),
RadioListTile<String>(
title: const Text('Option 2'),
value: 'Option 2',
groupValue: _selectedOption,
onChanged: (String? newValue) {
setState(() {
_selectedOption = newValue;
});
},
),
RadioListTile<String>(
title: const Text('Option 3'),
value: 'Option 3',
groupValue: _selectedOption,
onChanged: (String? newValue) {
setState(() {
_selectedOption = newValue;
});
},
),
],
),
);
}
}
演算結果
4. 複数のオプション
コード例
import 'package:flutter/material.dart';
class HomePage extends StatefulWidget {
const HomePage({
super.key});
State<HomePage> createState() => HomePageState();
}
class HomePageState extends State<HomePage> {
final List<String> _selectedOptions = [];
Widget build(BuildContext context) {
return Container(
color: Colors.white,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
CheckboxListTile(
title: const Text('Option 1'),
value: _selectedOptions.contains('Option 1'),
onChanged: (bool? value) {
setState(() {
if (value != null && value) {
_selectedOptions.add('Option 1');
} else {
_selectedOptions.remove('Option 1');
}
});
},
),
CheckboxListTile(
title: const Text('Option 2'),
value: _selectedOptions.contains('Option 2'),
onChanged: (bool? value) {
setState(() {
if (value != null && value) {
_selectedOptions.add('Option 2');
} else {
_selectedOptions.remove('Option 2');
}
});
},
),
CheckboxListTile(
title: const Text('Option 3'),
value: _selectedOptions.contains('Option 3'),
onChanged: (bool? value) {
setState(() {
if (value != null && value) {
_selectedOptions.add('Option 3');
} else {
_selectedOptions.remove('Option 3');
}
});
},
),
],
),
);
}
}
演算結果
