Mariam Albarghouti
Mariam Albarghouti

Reputation: 487

Changing theme attribute when usage

I created popupMenuTheme. I need to use it twice. The first one is typical of the theme, and the second has a little difference of fontWeight, so I need to inherit all properties but the fontWeight attribute, but when I do so the popup menu converted into a white container.

Theme code:

 popupMenuTheme: theme.popupMenuTheme.copyWith(
                color: const Color(pagesBackgroundColor),
                elevation: 3,
                textStyle: TextStyle(
                  color: const Color(accentColor),
                  fontFamily:
                      Localizations.localeOf(context).languageCode == 'ar'
                          ? 'almasry'
                          : 'patrick',
                  fontSize: 3.5.h,
                  fontWeight: FontWeight.w700,
                ),
              ),

Updated theme code:

Theme(
  data: Theme.of(context).copyWith(
    popupMenuTheme:const PopupMenuThemeData(
      textStyle: TextStyle(
    fontWeight: FontWeight.w900,
  ))),
  child: PopupMenuButton(
    itemBuilder: (context) => const [
      PopupMenuItem(child: Text("update")),
      PopupMenuItem(child: Text("delete")),
    ],
    icon: const Icon(
      Icons.more_vert,
      color: Color(accentColor),
    ),
  ),
),

Upvotes: 0

Views: 126

Answers (1)

Mohamed Kamel
Mohamed Kamel

Reputation: 937

You could use it like following

Theme(
  data: Theme.of(context).copyWith(
    popupMenuTheme: PopupMenuTheme.of(context).copyWith(
      textStyle: PopupMenuTheme.of(context).textStyle.copyWith(
            fontWeight: FontWeight.bold,
          ),
    ),
  ),
  child: PopupMenuButton(
    itemBuilder: (context) => const [
      PopupMenuItem(child: Text("update")),
      PopupMenuItem(child: Text("delete")),
    ],
    icon: const Icon(
      Icons.more_vert,
      color: Color(accentColor),
    ),
  ),
),

Upvotes: 1

Related Questions