【 Flutter 】Flutter を 基礎 から 学習 ( Material ComponentsとiOS-Style ) part139 Material Components
「 基礎 から 学ぶ Flutter 」という書籍で 学習 したことを ブログでアウトプットしていこうと思います。今回は Material ComponentsとiOS-Style ( part139 )です。
前回
【 Flutter 】Flutter を 基礎 から 学習 ( Material ComponentsとiOS-Style ) part138 Material Components
引き続き、Material Componentsについて学びます。
ToggleButtons
ToggleButtonsは複数のアイコンやテキストのグループで構成されるボタンです。
iOSのSegmentedControlに似ているのだそうです。
こんな感じらしいです。
import 'package:flutter/material.dart';
void main() {
runApp(new MaterialApp(home: new MyHomePage()));
}
class MyHomePage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _MyHomePageState();
}
}
class _MyHomePageState extends State<MyHomePage> {
var _isSelected = [false, false, true];
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: Scaffold(
appBar: AppBar(
centerTitle: true,
title: Text('sample'),
),
body: Center(
child: ToggleButtons(
isSelected: _isSelected,
children: <Widget>[
Icon(Icons.ac_unit),
Icon(Icons.call),
Icon(Icons.cake),
],
onPressed: (int index) {
setState(() {
for (int buttonIndex = 0;
buttonIndex < _isSelected.length;
buttonIndex++) {
if (buttonIndex == index) {
_isSelected[buttonIndex] = true;
} else {
_isSelected[buttonIndex] = false;
}
}
});
},
),
),
),
);
}
}
単一選択のサンプルです。
最後に
ラジオボタングループ・・・みたいなものでしょうかね？
今日はここまで！