Chipのサイズを変更する

タブレット画面ならよいがスマホだとごろごろする

タブレットとスマホでレイアウトを変えてみたのだけれど、

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        if (constraints.maxWidth > 600) {
          return const TabletBody();  // Load tablet layout
        } else {
          return const PhoneBody();  // Load phone layout
        }
      },
    );
  }

スマホのときChipの表示が気に入らない。
たかだか検索タグの表示で、それは大きすぎるでしょう。

でも、Chip自体の大きさを指定するパラメーターはない

なので、どうするかというと、

• まず文字を小さくする
• 次に文字を囲う空間を小さくする
• Chipどうしの間隔を小さくする

これでいきます。

                        Padding(
                          padding: const EdgeInsets.fromLTRB(20, 0, 20, 20),
                          child: Wrap(
                            spacing: 4.0,　<= ここと
                            children: sortedTargets.map((item) {
                              return ChoiceChip(
                                label: Text(
                                    item['name'],
                                  style: const TextStyle(fontSize: 10), <= ここと
                                ),
                                padding: const EdgeInsets.symmetric(horizontal: 2, vertical: 2),　<= ここ
                                selected: model.selectedTargetId == item['id'],
                                onSelected: (bool isSelected) async {
                                  model.setSelectedTargetId(isSelected ? item['id'] : null);
                                },
                              );
                            }).toList(),
                          ),
                        ),

たいして変わらない？　まあそうおっしゃらずに

四次元年表 in Cosmos
https://apps.apple.com/jp/app/chronomap-in-cosmos/id6642644551

四次元年表
https://app.laporte.academy/

三次元・四次元表示
https://tempo-spaco.web.app
四次元年表の使い方
https://www.youtube.com/@laporte_academy

四次元年表for Mobile
https://apps.apple.com/jp/app/四次元年表for-mobile/id6502634868

https://play.google.com/store/apps/details?id=academy.laporte.chronomapMobile.chronomap_mobile&hl=ja