[Flutter]ToggleButtonの使い方

どうも、ちょげ(@chogetarou)です。

ToggleButtonの使い方を解説します。

使い方

ToggleButtonを使うには、まずList<bool>型の変数を用意します。

var _toggleList = <bool>[false, false, false];

リストの要素数は、選択するためのボタンの数にします。

次に、用意した変数をToggleButtonの引数「isSelected」に指定します。

child: ToggleButtons(
  isSelected: _toggleList,
)

そして、引数「children」に、ボタンにしたいウェジェットを複数指定します。

child: ToggleButtons(
  children: [
    Icon(Icons.format_italic),
    Icon(Icons.format_bold),
    Icon(Icons.format_underlined)
  ],
  isSelected: _toggleList,
)

最後に、「onPress」で、ボタンがタップされた時の処理を指定します。

child: ToggleButtons(
  children: [
    Icon(Icons.format_italic),
    Icon(Icons.format_bold),
    Icon(Icons.format_underlined)
  ],
  isSelected: _toggleList,
  onPressed: (index) {
    setState(() {
      _toggleList[index] = !_toggleList[index];
    });
  },
)

引数「onPressed」の関数は、引数で押されたボタンのインデックスを受け取ります。

このインデックスを使って、isSelectedに指定した変数の要素の値を変更します。

これでToggleButtonsを使うことが出来ます。

設定

ToggleButtonは、引数を使うことで、ボタンの設定をすることが出来ます。

• color :選択されていない時の色
• selectedColor : 選択されている時の色
• fillColor : 選択されている時の背景色
• borderColor : 枠線の色
• borderWidth : 枠線の太さ
• selectedBorderColor：選択時の枠線の色
• borderRasius : 角の丸み

使用したコード

class Sample extends StatefulWidget {
  @override
  _SampleState createState() => _SampleState();
}

class _SampleState extends State<Sample> {
  var _toggleList = <bool>[false, false, false];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Sample'),
      ),
      body: Center(
        child: ToggleButtons(
          children: [
            Icon(Icons.format_italic),
            Icon(Icons.format_bold),
            Icon(Icons.format_underlined)
          ],
          isSelected: _toggleList,
          onPressed: (index) {
            setState(() {
              _toggleList[index] = !_toggleList[index];
            });
          },
        ),
      ),
    );
  }