0

実現したいこと

  • CupertinoIcons.配列[index]のような形で、実行するメソッドを動的に切り替えたいです。
class Menu extends StatelessWidget {
  const Menu({super.key});

  static const btnTitles = ['ランキング', '撮影', 'プロフィール'];
  static const icons = ['star_fill', 'clock_solid', 'circle_grid_3x3_fill'];

  @override
  Widget build(BuildContext context) {
    return CupertinoTabScaffold(
      tabBar: CupertinoTabBar(
        items: <BottomNavigationBarItem>[
          for(var i = 0; i < 3; i++)
            BottomNavigationBarItem(
              icon: Icon(CupertinoIcons.icons[i]),  // 動的に切り替えたい
              label: btnTitles[i],
            ),
        ],
      ),
    ),
  },
}

起きている問題

コードの中で下記の配列を定義しています。

static const btnTitles = ['ランキング', '撮影', 'プロフィール'];
static const icons = ['star_fill', 'clock_solid', 'circle_grid_3x3_fill'];

そして、配列の値をループさせて動的に切り替えたいです。

for(var i = 0; i < 3; i++)
  BottomNavigationBarItem(
    icon: Icon(CupertinoIcons.icons[i]),  // 動的に切り替えたい
    label: btnTitles[i],  // ここは狙い通りできている
),
icon: Icon(CupertinoIcons.icons[i]),

# こんな感じで展開させたい
icon: Icon(CupertinoIcons.star_fill)
icon: Icon(CupertinoIcons.clock_solid)
icon: Icon(CupertinoIcons.circle_grid_3x3_fill)

問題

当然ですが、今のコードだと下記のエラーが出て動きません

lib/main.dart:33:41: Error: Member not found: 'icons'.
              icon: Icon(CupertinoIcons.icons[i]),

icons[i]というメソッドを呼び出している形になってしまっていると思います。

rubyのようなsendメソッドのようなものがflutterかdartに存在すればやりたいことは実現できると思うのですが、見つけられませんでした

irb(main):012:0> hoge = [:to_i, :to_s]
=> [:to_i, :to_s]
irb(main):013:0> 1.send(hoge[0])
=> 1
irb(main):014:0> 1.send(hoge[1])
=> "1"

該当するメソッドはあるのでしょうか?またやりたいことを実現するにはどのような解決策があるでしょうか?よろしくおねがいします。

追記

回答してくれたお二人のアドバイスを参考に試したら動作しました。ありがとうございました!

  static const btnTitles = ['ランキング', '撮影', 'プロフィール'];
  static const icons = <IconData>[CupertinoIcons.star_fill, CupertinoIcons.clock_solid, CupertinoIcons.circle_grid_3x3_fill];

  @override
  Widget build(BuildContext context) {
    return CupertinoTabScaffold(
      tabBar: CupertinoTabBar(
        height: 65.0,
              items: <BottomNavigationBarItem>[
            for(var i = 0; i < 3; i++)
            BottomNavigationBarItem(
            icon: Icon(icons[i]),
            label: btnTitles[i],
       ),
  ・
  ・
  ・
0

2 件の回答 2

1

該当するアイコン名は、CupertinoIconsクラス内のstaticなメンバーでIconDataを返しているにすぎません。
アイコン名(文字列)->IconData変換というマッピング機能は保持していません。

アイコン名が固定であれば、static const icons = <IconData>[CupertinoIcons.star_fill, CupertinoIcons.clock_solid, CupertinoIcons.circle_grid_3x3_fill];の様にIconDataを返すようにするのが無難です。

もしアイコン名を文字列として扱いそれからIconDataを取り出したいのであれば、CupertinoIconsのソースの中身を取り出し、アイコン名とIconDataのmapを自作するという方法しかないでしょう。

1

Dart においても Ruby においても、通常のアプリケーションコードにおいて呼び出し側でメソッド名を動的に構築するのはセキュリティ面などいくつかの意味で扱いづらいコードになるため、特別な理由がない限り避けた方が無難です。

今回の場合であれば、アイコンをその名前の文字列の配列として保持するのではなく、直接 CupertinoIcons から得られる IconData の配列として保持すれば良さそうです。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。