🎯
WIdgetの中にswitchって書けるの？

2024/09/16に公開
 できます！最近、Flutterは副業でしか書かなくなりました。Dart3.0を勉強してて時々ロジックを書いてアウトプットすることあります。

そんなときに、こんな投稿を見つけて気になってついやってしまった。
sealed classで書く人が多いあれかな？

でもenumで書いた例もあった。僕はenumを使ったことははあまりなかった。switchとは相性が良いので、試しにロジックを作った。とはいってもボタン押すと画面が切り替わるだけですよ😅
UserTypeという列挙型を作ってください。最近はSwiftみたいに引数付きenumでばかり書くのですが今回は必要ないので普通のenumで書きました。
import 'package:flutter/material.dart';

enum UserType {
  admin,
  user,
  guest,
}

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

  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Icon(Icons.admin_panel_settings),
          Text("Admin"),
        ],
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Icon(Icons.person),
          Text("User"),
        ],
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Icon(Icons.person_outline),
          Text("Guest"),
        ],
      ),
    );
  }
}

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

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  UserType type = UserType.admin;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("User Widget"),
      ),
      body:  Column(
        children: [
          Center(
            child: switch(type) {
              UserType.admin => const AdminWidget(),
              UserType.user => const UserWidget(),
              UserType.guest => const GuestWidget(),
            },
          ),
          ElevatedButton(
            onPressed: () {
              setState(() {
                type = UserType.values[(type.index + 1) % UserType.values.length];
              });
            },
            child: const Text("Change User Type"),
          ),
        ],
      ),
    );
  }
}
あとはサンプルコードを実行するだけ。
main.dart
import 'package:flutter/material.dart';
import 'package:widget_cookbook/sealed/user_widget.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: const MyWidget(),
    );
  }
}
これはボタンを押すと切り替えわるロジックですが、API連携したもので作るのが好ましいでしょうね。




 感想昔物流系アプリの開発に携わったことがあります。Cloud Firestoreからデータを取得して条件によってadminかuserでUIを切り替えていたので、データベースと連携した会員機能やユーザーのRoleの機能を開発するときに使えそうです。
できます！

感想

Discussion
