✅ - Amplify Authenticator UI library Flutter | AWS Amplify | Page 1

balmy elk Apr 22, 2023, 10:16 PM

#

Hi guys, I'm working on a flutter mobile application and I started using the built-in amplify authenticator UI widgets and I'm trying to find a way to change the UI design of the SignInButton(), SignInFormField() without editing the package. If anyone know a work around please let me know. Thanks in advance!

bleak loom Apr 23, 2023, 1:21 AM

#

Hi @balmy elk, we have some docs available on customization including theming (https://ui.docs.amplify.aws/flutter/theming) and customizing the layout (https://ui.docs.amplify.aws/flutter/connected-components/authenticator/customization#sign-up-fields). Please let me know if that helps!

balmy elk Apr 23, 2023, 1:30 AM

#

bleak loom Hi <@452995109550555146>, we have some docs available on customization including...

Thanks for replying and yes I have looked at those. However, I'm trying to edit the UI for example the SignInButton() bar is blue by default and the text "Sign in" is white and I couldn't find a way to edit those fields so that it blends well with my app theme. This is the code I was working with by the way (https://ui.docs.amplify.aws/flutter/connected-components/authenticator/customization#full-ui-customization) you see that they are using prebuilt widgets. If I'm not mistaking I have to implement those buttons by myself to change the design

Amplify UI

Customization | Amplify UI for Flutter

Override and customize your Authenticator.

#

This is what the SignInButton() UI looks like

bleak loom Apr 23, 2023, 1:53 AM

#

On the theming page, there's an example which shows how to turn the button red using Flutter's ThemeData class (https://ui.docs.amplify.aws/flutter/theming). Is that what you mean? The Authenticator's colors and design are all based on ThemeData so that it can easily match the theming of your app.

balmy elk Apr 23, 2023, 2:23 AM

#

Yes that works if you are not using the authenticatorBuilder. However I'm customizing and adding a logo as the example in (https://ui.docs.amplify.aws/flutter/connected-components/authenticator/customization#full-ui-customization) using the authenticatorBuilder but when I add ThemData in the MaterialApp() doesn't effect the authentication theme at all. If that make sense 🙂

Amplify UI

Customization | Amplify UI for Flutter

Override and customize your Authenticator.

bleak loom Apr 23, 2023, 2:25 AM

#

Ah, I understand now 🙂 thanks for your patience.

balmy elk Apr 23, 2023, 2:25 AM

#

np, thank you.

bleak loom Apr 23, 2023, 2:35 AM

#

I will need to look more into this to figure out for sure, but this potentially appears to be a bug. Would you be willing to fill out a GitHub issue while I investigate? https://github.com/aws-amplify/amplify-flutter/issues/new?assignees=&labels=&template=BUG-REPORT.yaml

balmy elk Apr 23, 2023, 2:41 AM

#

yeah, sure. np

balmy elk Apr 23, 2023, 8:01 PM

#

@bleak loom you see what I mean. We are kinda forced to have white or light color background because the SignFormField() won't be visible with darker background colors and can't access those textfields colors to change the color.

bleak loom Apr 24, 2023, 3:16 PM

#

Thanks @balmy elk, I can see the issue. Let's continue this discussion in the GitHub thread and get to the bottom of this.

heady sailBOT Apr 24, 2023, 3:16 PM

#

✅ - Amplify Authenticator UI library Flutter

#✅ - Amplify Authenticator UI library Flutter