LoginSignup
kokogento
@kokogento (ここ げんと)

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

Flutter アクティブなPopupMenuItemの背景色を変えるには？

Q&A

Closed

DartFlutter

解決したいこと

PopupMenuButtonを押して展開されるPopupMenuItemのデザインを変更したいです。
どのように変更したいかというと、アクティブな（選択済みの）PopupMenuItemの背景色をデフォルトの灰色から別の色に変えたいです。。。

Screenshot 2023-06-09 at 23.00.28.png
PopupMenuButton👆
これを押すと
Screenshot 2023-06-09 at 23.00.35.png
このようにPopupMenuItemが展開される。

「日付順」がアクティブなので背景色が灰色になっています。これを別の色に変える方法はあるのでしょうか？

該当のコード

const List<String> dropDownButtonChoices = <String>['新着順', '日付順', '人気順'];

class JobCountAndSort extends HookConsumerWidget {
  const JobCountAndSort({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final searchJob = ref.watch(SearchJobProvider);
    final dropdownValue =
        dropDownButtonChoices[searchJob.activeDropDownButtonIndex];
    return Container(
      child: Row(
        children: [
          // 省略
          PopupMenuButton<String>(
            child: Row(children: [
              Text(
                dropdownValue,
              ),
              const Icon(
                Icons.arrow_drop_down_sharp,
              ),
            ]),
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(8),
            ),
            itemBuilder: (BuildContext context) {
              return dropDownButtonChoices.map((String value) {
                return PopupMenuItem<String>(
                  value: value,
                  child: Row(
                    children: [
                      Icon(
                        Icons.check,
                        size: 16,
                        color: dropdownValue == value
                            ? Palette.primaryColor
                            : Palette.deepGrey,
                      ),
                      const SizedBox(width: 8),
                      Text(
                        value,
                        style: TextStyle(
                          fontSize: 13,
                          fontWeight: dropdownValue == value
                              ? FontWeight.bold
                              : FontWeight.w400,
                        ),
                      ),
                    ],
                  ),
                );
              }).toList();
            },
            color: Palette.white,
            initialValue: dropdownValue,
            onSelected: (String newValue) {
              final newIndex = dropDownButtonChoices.indexOf(newValue);
              ref
                  .read(SearchJobProvider.notifier)
                  .setActiveDropDownButtonIndex(newIndex);
            },
          ),
        ],
      ),
    );
  }
}
0

1Answer

kokogento
@kokogento

CustomDropdownButtonとして別ウィジェットに切り出して、ListにPopupMenuItemをループさせて追加すると、なぜかアクティブなPopupMenuItemの背景色がデフォルトで白色でした。。。どういうことだ？:unamused:

const List<String> dropDownButtonChoices = <String>['新着順', '日付順', '人気順'];

class CustomDropdownButton extends StatelessWidget {
  final String value;
  final void Function(String?)? onChanged;

  const CustomDropdownButton({
    required this.value,
    required this.onChanged,
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) => PopupMenuButton<String>(
        offset: const Offset(0, 32),
        onSelected: onChanged,
        itemBuilder: (BuildContext context) {
          List<PopupMenuEntry<String>> list = [];
          for (int i = 0; i < dropDownButtonChoices.length; i++) {
            list.add(
              PopupMenuItem<String>(
                value: dropDownButtonChoices[i],
                child: Row(
                  children: [
                    Icon(
                      Icons.check,
                    ),
                    const SizedBox(width: 8),
                    Text(
                      dropDownButtonChoices[i],
                    ),
                  ],
                ),
              ),
            );
          }
          return list;
        },
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(10),
        ),
        child: Row(children: [
          Text(
            value,
          ),
          const Icon(
            Icons.arrow_drop_down_sharp,
          ),
        ]),
      );
}
0Like

Your answer might help someone💌

LoginSign Up