Q1

https://app.flutterflow.io/project/weather-this-or-that-lwi820

1. Login with form validation– Done

2. Create a new user with form validation– Done
3. Home page with a list of Score of different users– Done (Partially)
4. After logging in, users can guess the temperature outside, and the app will compare
their guess to the current temperature from the weather API based on their location
using the given API (API integration)- Done
5. The user’s score is calculated and added to the scoreboard – Done. Additionally, it
will show on the Snack Bar also. (Easy for testing)
6. The app prompts users to look outside again if they exit the page or do not interact for
more than 60 seconds. – Done
7. The app should limit users to one guess per hour (periodic action added) – Done
8. The app should display a scoreboard with users' scores, where the lowest score is the
best (0= accurate guess). (DEFAULT SCORE = .00) Done
9. There should be a button for users to test their weather forecasting skills.- Done

Q2

Hello Kate,

Thank you for reaching out to FlutterFlow support. I'm sorry to hear that you're experiencing
issues with your custom widget. Let's work together to resolve this.

Issue:

You have a custom widget cloned from the marketplace that fails to compile, and you're
encountering the error: The method 'FFAppState' isn't defined for the type
'_FFMultiSelectState'.

Solution:

When we clone the custom widget from the marketplace, it may not have cloned the app
state. So, to address the issue, this error typically occurs when FFAppState is not recognized
within your custom widget's scope. To resolve this, ensure that FFAppState is correctly added
to your project and accessible within your custom widget.
https://app.flutterflow.io/project/custom-code-a2bvje
Have a look at this link for your reference. (The issue has been Solved in the reference link)

Explanation

1. Parsing widget.code: Converts widget.code to an integer index.

2. Checking index validity: Ensures the index is within the valid range of the list.
3. Assigning value: Updates the list at the specified index if the index is valid.

Make sure the code you are passing to the widget is a valid index for the List<String> stored
in FFAppState().answers. This solution assumes that code is always intended to be an index
of the list. If the code has a different purpose, you might need to adjust this approach
accordingly.

Common Troubleshooting Steps:

1. Dependencies:
 o Ensure all necessary dependencies for your custom widget are correctly added
in your Pubspec Dependencies. Missing or incorrect dependencies can cause
compilation issues.
2. Imports:
o Double-check the import statements in your custom widget code. Ensure that
all necessary libraries and files are correctly imported, and there are no
missing or incorrect imports.
3. Syntax Errors:
o Look for any syntax errors in the custom widget code. Even a small typo can
cause compilation to fail. Make sure the code follows Dart syntax rules.
4. State Management:
o If your custom widget relies on state management (like FFAppState in
FlutterFlow), ensure that it is correctly initialized and accessible within your
project. Make sure that “answers” has been added in the App State tab of
FlutterFlow and is defined as List<String>, which will automatically initialize
the app state in the main.dart file.

5. Flutter Version:
o Ensure that your Flutter version is compatible with the custom widget.
Sometimes, certain widgets may require a specific version of Flutter.
6. Error Messages:
 o Pay close attention to the error messages provided during compilation. They
often contain specific information about what went wrong and where the issue
is located.

If you continue to experience issues, please provide the exact error message you're seeing
during compilation, and I'll be happy to assist you further.

Best regards,

Dhairya
FlutterFlow Technical Support Engineer

Q3

Hello Kate,

Thank you for reaching out to FlutterFlow support. I understand you're encountering an issue
with deploying your app to the Apple Store, and I appreciate the detailed error message and
screenshots you provided. Let's go through the issue and its resolution.

Issue Explanation

The error message you're seeing indicates that your app's bundle version must be higher than
the previously uploaded version. Apple requires this to ensure that updates are properly
versioned and distinguishable from earlier versions.

Error Details

 NSLocalizedFailureReason: The bundle version must be higher than the previously

uploaded version.
 NSLocalizedDescription: The provided entity includes an attribute with a value
already used.
 Previous Bundle-Version: 39

Resolution Steps

To resolve this issue, you need to increment the version number of your app before
attempting to upload it again. Here’s how you can do it using the FlutterFlow interface:

1. Open Your Project in FlutterFlow:

o Tap Settings and Integrations and Navigate to your project's "Mobile
Deployment" section.

2. Increment the Version Number:

 o In the "Version" section, update both the App Version (Version Name) and
the Build Number (Version Code).
o Ensure that the new version number is higher than the previous one. For
instance, if the current version is 1.0.39, you could update it to 1.0.40 or 1.1.0.

3. Rebuild Your App:

o After updating the version number, rebuild your app to ensure the new version
is reflected in the build.

4. Upload the New Build to App Store Connect:

o Follow the usual steps to upload your app to App Store Connect. The version
should now be accepted.

Avoiding Future Issues

To avoid this issue in the future, always remember to increment your app's version number
each time you make updates and plan to deploy a new version. This practice ensures that your
versioning remains consistent and meets Apple’s requirements.

If you need further assistance, feel free to reach out. We’re here to help!

Best regards,

Dhairya
FlutterFlow Technical Support Engineer

Q4

Hi Kate,

I'm Dhairya, and I'm here to help you with your issue. Based on the screenshots you
provided, it looks like your API endpoints are working perfectly when tested through
Postman but fail with a 404 error when called from FlutterFlow. You may also look for the
Flutter flow documentation here https://docs.flutterflow.io/data-and-backend/api-calls and
Handle API call in FlutterFlow here https://www.youtube.com/watch?v=JNy-6xckc5M

Here are a few steps to troubleshoot and resolve this issue:

1. Check API URL and Endpoints:

o Ensure that the API URL in FlutterFlow matches the URL you used in
Postman. Any typo or difference in the URL can cause a 404 error.
o Confirm that the endpoints are correctly specified in FlutterFlow, including
the path and query parameters, if any.

2. Network Configuration:
o Verify if your local server is accessible from the network FlutterFlow is
running on. If FlutterFlow runs in an environment that cannot reach your local
server, the requests will fail.
o Consider exposing your local server to the internet using tools like ngrok to
create a secure tunnel. Update the API URL in FlutterFlow to use the ngrok
URL.

3. CORS Policy:
o Ensure that your local server is configured to allow cross-origin requests.
CORS issues can cause requests to be blocked. You can enable CORS in your
server settings or use middleware to handle it.

4. API Key and Headers:

o Ensure that any required headers, such as API keys or authentication tokens,
are included in the FlutterFlow request. Compare the headers in Postman and
FlutterFlow to ensure they match.

5. FlutterFlow Configuration:
o Double-check the API call settings in FlutterFlow. Ensure that the method
(GET, POST, etc.), headers, and body (if any) are correctly configured.

6. Hosting the API:

o Try to host the API on a server instead of running it locally. Accessing the API
via a server can help avoid issues caused by different networks. FlutterFlow
and your local host might face synchronization issues due to being on different
networks. Hosting the API on a server ensures that it is accessible from
anywhere and can be easily integrated with FlutterFlow.

7. Debugging:
o Use browser developer tools to inspect the network requests made by
FlutterFlow. Look for any discrepancies or errors in the requests.
By following these steps, you should be able to identify and resolve the issue causing the 404
error in FlutterFlow. If you need further assistance, please provide more details about your
server configuration and the exact setup in FlutterFlow.

Best regards,

Dhairya
FlutterFlow Technical Support Engineer

Q5

Hi there,

I’m Dhairya. Thank you for sharing the details of your issue. Here are some steps to resolve
the text rendering problem in test mode:

1. Font Issues: Ensure custom fonts are correctly uploaded and specified. Try using
default fonts to see if the issue persists.
2. Text Color: Verify that the text colour contrasts well with the background.
Temporarily change the text colour to a bright colour to check visibility.
3. Visibility Conditions: Ensure there are no conditions hiding the text. Set visibility to
always show for testing purposes.
4. Debug Console: Check for errors or warnings in the debug console that might
indicate rendering issues.

The Last step you can do is copy the parent widget of the page, create a new project/page,
and paste it into it. I have performed this step, and the issue is resolved. Try doing the same. I
have attached the link to the current test project for your reference.

https://app.flutterflow.io/project/test-fpo303
Addressing these areas will resolve the text rendering issue. If you need further assistance,
please let me know.

Best regards,

Dhairya

FlutterFlow Technical Support Engineer

Q6

To ensure a great Customer Satisfaction Score (CSAT) and a more positive customer
experience, here are some of my personal suggestions on how the interaction with the
customer could have been improved:

Initial Response

1. Acknowledgement of the Issue: Immediately acknowledge the specific problem the

customer is facing. (As I know, an immediate response is not always possible; if there
are more issues, we can still try to provide some convincing message to the user so he
can have much patience until we answer their issues. I think it is a good approach so
that we can get time to handle more issues in less time without the user getting
frustrated)
o Example: "Hello Kate, thank you for reaching out. I'm sorry you're
experiencing slowness and hangs with your web app. Let me look into the
issues and work together to resolve this as quickly as possible."
Detailed Troubleshooting

2. Proactive Troubleshooting Steps: Instead of generic advice, provide specific and

actionable troubleshooting steps.
o Example: "To start, let's ensure all the performance optimization settings are
correctly configured. Here are some steps you can follow:
1. Enable the Original Engine Initialization (experimental) option.
2. Ensure that all assets are optimized and minimized.
3. Verify network conditions and server load."

Follow-up on Deployment Errors

3. Immediate Addressing of Errors: When the customer reports an error, address it

immediately (or as soon as possible).
o Example: "I see you've encountered an error with your Firebase storage rules.
This could contribute to the latency issue. Let's resolve this first by checking
and correcting the Firestore rules."

Continuous Engagement

4. Frequent Check-ins: After providing steps, check in frequently and promptly to see
if the issue has been resolved.
o Example: "Hi Kate, just checking in to see if the steps provided helped
improve the performance. Let me know if the issue persists so we can explore
other solutions."

Comprehensive Solutions

5. Explore Alternative Solutions: If initial suggestions do not work, offer alternative

solutions and show empathy towards the customer's frustration.
o Example: "I'm sorry to hear that the performance issues persist. Alternatively,
you might consider using a different rendering engine, such as CanvasKit or
running the app as a Progressive Web App (PWA). Additionally, we
recommend advising your users to use browsers like Safari for a better
experience. Let's also look into any specific logs or metrics that might point to
the root cause of the issue."

Transparency and Assurance

6. Transparency About Limitations: Be transparent about known issues and the steps
being taken to resolve them.
o Example: "We are aware of some performance issues with Flutter on the web,
particularly on Chrome. Our development team is actively working on
improving this. Your feedback is invaluable, and we're committed to
enhancing the performance as soon as possible."
Closing the Conversation

7. Positive Closing: End the conversation positively, expressing gratitude for their
patience and reassurance.
o Example: "Thank you for your patience and understanding, Kate. We are here
to support you and will keep you updated on any progress regarding the
performance improvements. Have a great day, and don't hesitate to reach out if
you have any more questions or concerns."

Applying these steps would make the support interaction more responsive, detailed, and
empathetic, leading to a better overall customer experience and a higher CSAT score.

Q7 Bonus

Hello Kate,

Thank you for sharing the link to your project. I see that you've correctly set up the profile
picture and the "Change Photo" button actions. When you upload a file (media or otherwise)
using the Upload Data widget, FlutterFlow generates the URL in compliance with Firebase
security. It adds the required token for each file in the URL, and the same is returned by the
"Widget State -> Uploaded File URL" that is used to update your document/image field. This
is also applicable for any static media asset files (for example, default user avatar image) you
upload from the Firebase console. When you examine the URL for such a file, you should see
the token as part of the URL.

Let's go through a few steps to ensure everything is set up correctly:

1. Verify Image URL Update in Firestore:

o After uploading the image, ensure the new image URL is being saved to the
authenticated user's profile in Firestore.
o You can check this by looking at the Firestore document for the authenticated
user to see if the photoURL field is updated with the new image URL.

2. Update User Profile Photo in the Database:

o In the action flow for the "Change Photo" button, you need to add an
additional step to update the user's profile in Firestore with the new image
URL.
o After the "Upload media to Firebase" action, add an action to update the
authenticated user's document in Firestore. Set the photoURL field to the URL
of the uploaded image.

3. Ensure UI Reactivity:
o Make sure the image widget displaying the profile picture is bound to the
photoURL field of the authenticated user.
 o From your project, it looks like you have correctly set the image widget to use
the Authenticated User's Photo URL. This is good. Just ensure that this
variable is updated in real-time when the Firestore document is updated.

4. Trigger State Refresh:

o Sometimes, the UI might not automatically refresh. You can use the Set State
action to force a UI update or navigate away and back to the profile page to
see the updated image.

Here’s a step-by-step guide to update the user profile picture:

1. Upload Image:
o Ensure that the "Change Photo" button uploads the image to Firebase Storage
correctly.

2. Get Download URL:

o After uploading, get the download URL of the uploaded image.

3. Update Firestore:
o Use the download URL to update the photoURL field of the authenticated user
in Firestore.

4. Refresh UI:
o Ensure that the image widget bound to the photoURL field reflects the new
URL.

Additional Tips from Extended Solution:

To upload an image to Firebase Storage and store its URL in Firestore using FlutterFlow,
ensure you have configured Firebase in your FlutterFlow project and have the necessary
Firebase Storage and Firestore rules set up to allow for file upload and database writes.

 Create the UI:

o This typically involves an image widget that users can click to bring up their
device's image picker. Once an image is selected, set up an action on the
image widget that triggers the upload to Firebase Storage.

 Set Up Actions:
o In the actions panel for that widget, choose the option to upload the image,
selecting Firebase Storage as the destination. FlutterFlow will handle the
upload process and provide you with a URL once the upload is complete.

 Update Firestore Record:

o Within the same action sequence, set the returned download URL in the
desired Firestore document field. This is generally done within the 'Then'
 section of the upload action, where you can specify additional actions to take
once the upload is completed successfully.
o Add an action to create a new document or update an existing one in Firestore,
mapping the image URL to the appropriate field in the Firestore document.

FlutterFlow’s visual interface will guide you through setting up these actions without writing
any code. For detailed visual guides or tutorials, consider looking into FlutterFlow's
documentation or tutorial videos covering tasks like image uploading and integration with
Firebase services. https://docs.flutterflow.io/actions/actions/utilities/upload-data/upload-save-
file and https://www.youtube.com/watch?v=xofe79Vz0jM

If you continue to experience issues, please provide access to your project so I can review the
setup more thoroughly.

Looking forward to your response.

Best regards,
Dhairya
FlutterFlow Technical Support Engineer