In-App feedback with Wiredash for Flutter

Get feedback from your users to help you build what they want.

I was recently lurking around the pub.dev searching for funky packages to implement when i came across this relatively new package called wiredash. I clicked on it and my-oh-my, I probably hit the goldmine and I’ve never looked back for any other solution to get in-app feedback for flutter apps in both iOS and Android.

Have you ever suffered from the following?

1. People rating your application 3 star or less just to ask for a feature.
2. People not emailing more specific details and screenshots of bugs after you ask them on the play store/ app store reply.
3. Trying to solve a bug and realizing hours later that someone else from the team solved it in the last update and you wasted time because you didn’t know about the version used by the user on the play store/app store.

If you have faced the above or want to save all of those hassles before you even launch your application, you should definitely give this a read.

Wiredash is a new SDK ,(very excitingly) completely written in Dart and runs on Android, iOS, Desktop and the Web. It is easily the most convenient way to capture in-app user feedback, wishes, ratings and much more along with a interactive screenshot of the app page the user is referring to as well. The best part of it? You don’t need to make any changes in your application architecture to incorporate it even after you finish the whole UI. All you need to do is wrap the MaterialApp at the topmost layer with a Wiredash widget and call it wherever you need it. Isn’t it Awesome?

So lets get into how to do exactly just that!

Step 1: Create an account at wiredash.io

So, first go to the website wiredash.io and select the ‘Go to Console’ at the top right and it will route you to the sign-up/ sign-in page. Do the needful with Google or Github as per your convenience.

Step 2: Create a new project from the console

Now, you will be routed to the console and you will see the biggest button there to create a new project. By all means, attack that button and you’re ready to get awesome bug reports and feedback from your app now.

This is how a new app console looks

Step 3: Get the wiredash dependency from pub.dev

Now, go to pub.dev and search for ‘wiredash’ and get the latest version from there and paste it into the pubspec.yaml file under ‘dependencies’ and run ‘get dependencies’ before running the application.

In the pubscpec.yaml of your project

Step 4: Add the Wiredash widget as a parent to the MaterialApp widget

Now, all we need to do , to integrate it, is to encapsulate your topmost MaterialApp widget with the Wiredash widget. After doing so, there are 3 required parameters to the widget namely:

1. projectId: The project id from the console.
2. secret: The API secret from the console.
3. navigatorKey: A global key with the type ‘NavigatorState’.

As you can see how we define a global navigator key and specify it for the wiredash widget. Also, we need to specify the same navigator key for the material widget as well.

final _navigatorKey = GlobalKey<NavigatorState>();

Now you can get the API secret and the project Id from the wiredash console under ‘configurations’.

IMPORTANT:Do not share your project id and API secret with anyone and thus, I too store it in a separate constants file and only use those constants in the code I have given online.

Step 5: Calling the wiredash bottom modal

I use a floating action button here to call the wiredash bottom modal from the context for simplicity but you can use other ways such as gestures or exceptions auto trigger or even using the gyro sensor on your handset by shaking the device(Similar to Snapchat?). Basically you can get creative with that!

Now, I made a scaffold with a floating action button that calls the wiredash bottom modal from the current context.

And TA-DA! There’s nothing more you need to do! Just run your app and You get this awesomeness.

Step 6: Checking the feedback from the console

Now , we can check the feedback given from the app on our console!

OPTIONAL:

As, you can above see there are three fields: email(since i did not fill it while sending the feedback),the user id and the app version that are not specified. We can actually add those three from the code as well using a ‘setOptions’ function before the ‘show’ function like below.

Also, we can change the color scheming a lot more using theme parameter of the Wiredash widget in WiredashThemeData.(Looks great in dark mode if you ask me!)

And now this is how it looks!

Easy right?

If you still have a problem at some place, here is a video tutorial to do this as well :

I will be posting more such videos on this youtube channel , so do remember to subscribe to be notified of that!

The github link for the complete code:

abhishekmahajan98/wiredash_tutorial

That’s all folks!