[Flutter]タップでアイコン(Icon)を切り替えるには？

Flutter

2021.11.04

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

タップでアイコンを切り替える方法を紹介します。

方法

タップでアイコンを切り替えるには、bool型の変数と三項演算子を使います。

まず、bool型の変数を用意します。

bool isChanged = false;

次に、Iconのアイコンを指定する引数で、三項演算子を使い、変数の値によってアイコンが切り替わるようにします。

Icon(
  isChanged ? Icons.delete : Icons.add, //trueならIcons.delete、falseならIcons.add
),

最後に、ボタンなどのタップ処理で変数の値が切り替わるようにします。

TextButton(
  onPressed: () {
    setState(() {
      isChanged = !isChanged; //切り替え
    });
  },
  child: Text('Switch'),
),

これでタップでアイコンを切り替えることが出来ます。

以下は、使用例です。

使用例

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  bool isChanged = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Icon(
              isChanged ? Icons.delete : Icons.add,
              size: 100,
              color: isChanged ? Colors.red : Colors.blue,
            ),
            TextButton(
              onPressed: () {
                setState(() {
                  isChanged = !isChanged;
                });
              },
              child: Text('Switch'),
            ),
          ],
        ),
      ),
    );
  }
}