EnumでIconButtonを切り替えてみたい

EnumとswitchでIconButtonを切り替えてみた!

ネットで見た記事で、真似できているかわからないがEnumでボタンを切り替えてみた。SwiftUIでこんなロジックを作れるらしいが、Flutterでできるのか???

import SwiftUI

enum ButtonType {
    case close
    case send
}

struct ContentView: View {
    var buttonType: ButtonType

    var body: some View {
        switch buttonType {
        case .close:
            Button(action: {}) {
                Image(systemName: "xmark")
            }
        case .send:
            Button(action: {}) {
                Image(systemName: "paperplane")
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            ContentView(buttonType: .close)
            ContentView(buttonType: .send)
        }
    }
}

今回は、引数をつけるEnumを使ってみた。多分これ意味ない気がする???
sealedクラスなるもので、切り替えはできたりする。Kotlinだと、Enumみたいなもんらしい?
https://zenn.dev/joo_hashi/articles/133c88fd4685ab

これがFlutterのコード

最近色々なコードを書いてこれどうなんだろうと探求してるが、また変なコードを考えてしまった。なんか使い道ありそうだからメモ程度に、作っておく。以前はどうやってWidgetを切り替えてたかな...
? :だけしか使ってなかったような???

import 'package:flutter/material.dart';
// IconButtonの表示を切り替えるためのenum
enum IconBtn<Widget> {
  close(name: 'close'),
  send(name: 'send');

  final String name;
  const IconBtn({required this.name});
}

// enumの値によってIconButtonの表示を変える
Widget iconButton(IconBtn iconBtn) {
  switch (iconBtn) {
    case IconBtn.close:
      return IconButton(
          onPressed: () {
            debugPrint('閉じるボタンが押されました');
          },
          icon: const Icon(Icons.close));
    case IconBtn.send:
      return IconButton(
          onPressed: () {
            debugPrint('送信ボタンが押されました');
          },
          icon: const Icon(Icons.send));
  }
}

class IconBtnView extends StatefulWidget {
  const IconBtnView({super.key});

  @override
  State<IconBtnView> createState() => _IconBtnViewState();
}

class _IconBtnViewState extends State<IconBtnView> {
  // 状態によってIconButtonの表示を変える
  IconBtn currentIcon = IconBtn.close;
  // 状態を切り替える
  void toggleIcon() {
    setState(() {
      // 変数に代入したenumを三項演算子で切り替える
      currentIcon = currentIcon == IconBtn.close ? IconBtn.send : IconBtn.close;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('IconBtnView'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 状態よって切り替わるIconButtonのメソッド
            iconButton(currentIcon),
            const SizedBox(height: 20),
            // 状態を切り替えるボタン
            ElevatedButton(
              onPressed: toggleIcon,
              child: const Text('切り替え'),
            ),
          ],
        ),
      ),
    );
  }
}

main.dartでimportして実行してね:

import 'package:flutter/material.dart';
import 'package:indicator_app/view/enum_button.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
          useMaterial3: true,
        ),
        home: const IconBtnView());
  }
}

まとめ

昔からパターン化されたコードしか書いてないから最近はなんでか知らないが周りの人らが、Enumばっかり使うので、色々試してる。今回は三項演算子と組み合わせてみた。enum + ? :なイメージ。
ボタンを押すとtoggleIconメソッドが実行されて、stateが更新されて画面が更新される。そうすると、IconButtonが切り替わるUI作ってみた。