Edit font styles and colours on country dialog

[twumm]

Is there an option to format and style the dialog widget where the country and country code is selected?
Currently, mine displays as blank, and I could really use some tips pointing me on how to go about it.

This is an image of what I have -

[FilipeOS]

CountryCodePicker(
                                              favorite: [_country],
                                              showOnlyCountryWhenClosed: true,
                                              initialSelection: _country,
                                              showCountryOnly: true,
                                              onChanged: _onCountryChange,
                                              textStyle: TextStyle(
                                                color: Colors.grey[600],
                                                fontWeight: FontWeight.normal,
                                              ),
                                              padding: const EdgeInsets.all(0.0),
                                            ),

Hope this helps

[twumm]

I appreciate the feedback.
The textStyle property only affects the text colour of the selected country to country/code after selecting from the dialog in my first screen shot. The dialog box in my first issue is what I was hoping to edit the text style property of.

This is what I get using your recommendation -

This is the code I have -

Widget countryCodePicker() {
    return Container(
      width: screenWidth / 4,
      child: CountryCodePicker(
        onChanged: _onCountryChange,
        initialSelection: '+55',
        favorite: ['+55', '+54', 'US'],
        showCountryOnly: true,
        showOnlyCountryWhenClosed: true,
        alignLeft: false,
        textStyle: TextStyle(
          color: Colors.grey[600],
          fontWeight: FontWeight.normal,
        ),
        searchDecoration: InputDecoration(
          fillColor: Colors.blue,
          labelText: 'Search',
        ),
        searchStyle: TextStyle(
            fontSize: 20,
            color: Theme.of(context).primaryColor,
            decoration: TextDecoration.overline),
      ),
    );
  }

It is possible my current theme is messing up with the default colours in the country code plugin.

Thanks

[twumm]

I found the culprit!
I set a colour of white on my body1 textTheme and that was causing the issue.

I have removed that and it works now. Now to refactor some bunch of styles that might be affected 🤦‍♂

[twumm]

Instead of refactoring the entire code base to change one font color, I ended up wrapping the countryCode container in the Theme class, which gives access to all your theme colors and fonts.
This makes it possible to customize your fonts for the container or widget it currently wraps.

Not the ideal solution yet - imo, but it's a great fix nonetheless.

Widget countryCodePicker() {
    return Theme(
      data: ThemeData(
        textTheme: TextTheme(
          body1: TextStyle(
            fontSize: 15.0,
            fontWeight: FontWeight.w400,
            fontFamily: 'Lato',
          ),
        ),
      ),
      child: Container(
        width: screenWidth / 4,
        child: CountryCodePicker(
          onChanged: _onCountryChange,
          initialSelection: '+55',
          favorite: ['+55', '+54', 'US'],
          showCountryOnly: true,
          showOnlyCountryWhenClosed: false,
          alignLeft: false,
          searchDecoration: InputDecoration(
            labelText: 'Search',
          ),
          searchStyle: TextStyle(
            fontSize: 20,
            color: Theme.of(context).primaryColor,
          ),
          textStyle: TextStyle(
            color: Theme.of(context).backgroundColor,
          ),
        ),
      ),
    );
  }

💧s 🎤! 😎