BLOG
マテリアルデザイン3(Material Design3)シリーズ Segmented Button
2024.06.19
2024.06.19
1. 今回のテーマ
今回のテーマは、SegmentedButtonです。
SegmentedButtonは、Material Design ComponentsのActionsに分類される複数の選択肢の中からユーザが1つまたは複数選択するためのボタングループです。おおよその目処として、2〜5種類くらいの選択肢がある場合に利用すると良いとされています。
詳細はこちらを御覧ください。
https://m3.material.io/components/segmented-buttons/overview
2. パターン
SegmentedButtonのパターンは、2種類あります。
① 単一選択式
② 複数選択式
3. サンプルコード
この例は、外観モードをライト、ダーク、端末の設定の中からユーザが1つ選択するサンプルです。
import 'package:flutter/material.dart';
class SegmentedButtonScreen extends StatefulWidget {
const SegmentedButtonScreen({super.key});
@override
State<SegmentedButtonScreen> createState() => _SegmentedButtonScreenState();
}
class _SegmentedButtonScreenState extends State<SegmentedButtonScreen> {
Set<int> selected = {0};
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('SegmentedButton'),
),
body: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'外観モード',
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
),
const SizedBox(height: 16),
SizedBox(
width: MediaQuery.of(context).size.width,
child: SegmentedButton(
onSelectionChanged: (set) => _onSelectionChanged(set),
segments: const [
ButtonSegment(value: 0, label: Text('ライト')),
ButtonSegment(value: 1, label: Text('ダーク')),
ButtonSegment(value: 2, label: Text('端末の設定')),
],
selected: selected,
),
),
],
),
),
);
}
void _onSelectionChanged(Set<int> set) {
setState(() {
selected = set;
});
}
}4. カスタマイズ
カスタマイズするオプションがいくつか用意されています。その一部をご紹介します。
4.1. スタイルの変更
個別に背景色を変更したい場合は、styleのbackgroundColorにカラーを指定します。
また、テキストカラーを変更したい場合は、selectedForegroundColorにカラーを指定します。
SegmentedButton(
style: SegmentedButton.styleFrom(
selectedForegroundColor: Colors.white,
selectedBackgroundColor: Colors.blueAccent,
),
onSelectionChanged: (set) => _onSelectionChanged(set),
segments: const [
ButtonSegment(value: 0, label: Text('ライト')),
ButtonSegment(value: 1, label: Text('ダーク')),
ButtonSegment(value: 2, label: Text('端末の設定')),
],
selected: _selected,
),
4.2. アイコンの非表示
デフォルトでは、選択された項目にチェックマークがつきます。
このチェックマークを非表示にするには、showSelectedIconをfalseにします。
SegmentedButton(
showSelectedIcon: false,
onSelectionChanged: (set) => _onSelectionChanged(set),
segments: const [
ButtonSegment(value: 0, label: Text('ライト')),
ButtonSegment(value: 1, label: Text('ダーク')),
ButtonSegment(value: 2, label: Text('端末の設定')),
],
selected: _selected,
),
4.3. 選択アイコンの変更
デフォルトでは、選択された項目にチェックマークがつきます。
このアイコンを変更したい場合は、selectedIconにアイコンを指定します。
SegmentedButton(
selectedIcon: const Icon(Icons.check_box),
onSelectionChanged: (set) => _onSelectionChanged(set),
segments: const [
ButtonSegment(value: 0, label: Text('ライト')),
ButtonSegment(value: 1, label: Text('ダーク')),
ButtonSegment(value: 2, label: Text('端末の設定')),
],
selected: _selected,
),
4.4. 複数選択
デフォルトでは、単一選択するコンポーネントですが、複数選択することも可能です。複数選択を可能にするには、multiSelectionEnabledをtrueにします。
SegmentedButton(
multiSelectionEnabled: true,
onSelectionChanged: (set) => _onSelectionChanged(set),
segments: const [
ButtonSegment(value: 0, label: Text('ライト')),
ButtonSegment(value: 1, label: Text('ダーク')),
ButtonSegment(value: 2, label: Text('端末の設定')),
],
selected: _selected,
),
5. まとめ
今回は、Material Desing3のSegmentedButtonを紹介しました。SegmentedButtonは、複数の選択肢の中からユーザが1つまたは複数選択するためのボタングループです。
選択肢が多い(6個以上の選択肢）場合は、他のコンポーネントを選択することをおすすめします。
