Adyen / adyen-flutter

MIT License
23 stars 5 forks source link

Use ThemeClass #202

Closed matmicro closed 2 months ago

matmicro commented 3 months ago

I have an app which is declared this way:

class MyApp extends GetView<MainController> {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'MyApp',
      theme: ThemeClass.lightTheme,
      darkTheme: ThemeClass.darkTheme,
      themeMode: ThemeMode.light,

and themes are declared with:

  static ThemeData lightTheme = ThemeData(
      colorScheme: const ColorScheme.light(
...

What is the way to make Adyen widget using those current theme ?

Regards

matmicro commented 3 months ago

What is the way to have the text "Change payment methods" on a different color than the primary button color ?

Robert-SD commented 2 months ago

Hi @matmicro, you can find the documentation regarding customization here. Because we are using the native checkout libraries internally, customization needs to be done on the Android and iOS level. Styling through the Flutter theme is not supported. Please let me know if you need further assistance regarding applying a custom style.

matmicro commented 2 months ago

Ok thanks for feedback.

I succeeded in customizing on Android with the XML files.

But is did not succeed to do it on iOS. I tried like this in AppDelegate.swift but it does not works:

class AdyenAppearance: AdyenDropInAppearanceProvider {
    static func createDropInStyle() -> Adyen.DropInComponent.Style {
        var style = Adyen.DropInComponent.Style()
        style.formComponent.mainButtonItem.button.backgroundColor = UIColor(red: 0.82, green: 0.86, blue: 0.79, alpha: 1.00)
        style.formComponent.mainButtonItem.button.title.color = UIColor(red: 0.21, green: 0.13, blue: 0.05, alpha: 1.00)
        return style
    }
}

How to apply some #RRGGBB colors ? Where to get the list of objects names ?

Regards

Robert-SD commented 2 months ago

Great to hear that we succeeded with one step. You can find object names in our iOS documentation. In addition you can look into the styling classes.

It's interesting that the style isn't applied for iOS. I've adjusted the example app and the style is applied correctly. Did you rebuild your app? I've opened an example for improving the style parsing. Could you try this branch: feature/improveAppearanceProvider?

This is a screenshot from applying your style to the example app. Simulator Screenshot - iPhone 15 Pro - 2024-07-07 at 16 01 34

matmicro commented 2 months ago

@Robert-SD Sorry but i don't get how to proceed to get it working.

Apart from adding the below code to file AppDelegate.swift, what did i missed ?

class AdyenAppearance: AdyenDropInAppearanceProvider {
    static func createDropInStyle() -> Adyen.DropInComponent.Style {
        var style = Adyen.DropInComponent.Style()
        style.formComponent.mainButtonItem.button.backgroundColor = UIColor(red: 0.82, green: 0.86, blue: 0.79, alpha: 1.00)
        style.formComponent.mainButtonItem.button.title.color = UIColor(red: 0.21, green: 0.13, blue: 0.05, alpha: 1.00)
        return style
    }
}

It does not work for me.

Robert-SD commented 2 months ago

@matmicro No worries, let's try to figure this out together. Could you check if createDropInStyle() is called at all? Have you rebuild the app instead of using hot reload? I assume you did, but just want to clarify. I've created a plain project and the styling worked as well again.

Robert-SD commented 2 months ago

Hi @matmicro, we simplified the styling by exposing the AdyenAppearance enum. This new approach will be available with the next release very soon. You can try it out yourself by using our main branch directly. Feel free to look into our updated example. This adjustment should resolve the problem.

matmicro commented 2 months ago

Great, i will test that as soon as released. Any idea of the "very soon" ETA ? Please let me know once released to pub.dev

Robert-SD commented 2 months ago

Hi @matmicro, just a quick update. The new release is now available on pub.dev.