# Getting Started

Hey there, you! 👋

You've just found the in-depth guide for getting up and running with Wiredash. In a way, this is like the owner's manual you'd usually get with a new car, TV, or furniture. But this one is for Wiredash owners - just like you!

We really hope that integrating Wiredash is a smoother experience than spending your entire afternoon assembling your new Pax wardrobe from IKEA and then realizing you put the back piece on the wrong way but it's fixed in place with 100 nails and you just don't care anymore.

# Creating a Wiredash project

Before integrating Wiredash in your app, we need you to create a new Wiredash project.

It's time to get to know the Wiredash console a little bit.

# Create an account

  1. Go to our login page.
  2. Click the Sign Up tab.
  3. Sign in with Google or GitHub.

After successfully signing up, you should end up with our project overview page:

A screenshot of the project overview page in the Wiredash console

Your name or avatar image might be a bit different than in the screenshot.

That's fine. We're all beautiful in our own way.

# Create a new project

Click on the create new project button.

It has a big + icon and the text Create new Project on it. And it's okay if you're not feeling very adventurous. We're not gonna judge.

Choose a name for your new project:

A screenshot of the new project dialog in the Wiredash console, with "MySuperDuperAwesomeApp" chosen as the project name.

The name can be anything, but it makes sense to be consistent.

If the name of your Flutter app is "MySuperDuperAwesomeApp", then it probably makes sense to use the same name in the Wiredash console. Your friend Bob from MySuperDuperAwesomeApp is not going to be very happy with you if you call your Wiredash project "UltraAmphibiousWingDing".

After clicking on Create Project, you should now see your Project ID & API Secret:

A screenshot of the project setup page in the Wiredash console, showing the project id and secret.

Stay there! We're going to need that information soon.

# Integrating Wiredash in your app

If user feedback was delivered through snail mail, we would've just finished setting up your mailbox. But since we live in the modern ages, the feedback comes directly to your Wiredash console instead.

In order to start receiving that valuable feedback, we need to integrate the Wiredash SDK in your app. Otherwise, your users have no way to send their love letters to you.

As an added bonus, if your app gets really popular, you don't have to expose yourself to the spit and saliva of hundreds of people when opening the envelopes.

# Depend on it

Before being able to integrate Wiredash in your app, we need to tell Flutter's package manager, Pub, to include Wiredash in your Flutter project.

Modify your pubspec.yaml to look a little something like this:





 
name: your_awesome_app
dependencies:
  flutter:
    sdk: flutter
  wiredash: ^0.2.0

Then run flutter pub get inside your project directory.

If you're using Visual Studio Code or IntelliJ IDEA, you should see a tiny banner that nags at you to refresh your packages. That way works too.

# Wrap your app with it

Almost everything in Flutter is a widget. Wiredash is no exception.

In order to support our interactive feedback flow, you have to wrap your MaterialApp with a Wiredash widget.

Import Wiredash by adding the following line at the very start of main.dart:

import 'package:wiredash/wiredash.dart';

If you see any red squiggly lines, something in the step "Depend on it" went wrong.

Otherwise, you're ready to wrap your app with Wiredash:


 
 





return Wiredash(
  projectId: 'YOUR-PROJECT-ID',
  secret: 'YOUR-SECRET',
  child: MaterialApp(
    // ...
    home: MyHomePage(),
  ),
);

Remember how we told you to keep your Wiredash console handy?

Go ahead and replace above YOUR-PROJECT-ID and YOUR-PROJECT-SECRET with the values you can find from the Wiredash console. Wiredash also needs a Key for handling the navigation stack.

We can create such a key like this:


 






 


 





class YourSuperDuperAwesomeApp extends StatelessWidget {
  final _navigatorKey = GlobalKey<NavigatorState>();

  
  Widget build(BuildContext context) {
    return Wiredash(
      projectId: 'YOUR-PROJECT-ID',
      secret: 'YOUR-SECRET',
      navigatorKey: _navigatorKey,
      child: MaterialApp(
        // ...
        navigatorKey: _navigatorKey,
        home: MyHomePage(),
      ),
    );
  }
}

WARNING

Make sure to provide the same _navigatorKey to both Wiredash and MaterialApp! Otherwise you'll disturb the balance of the universe. We don't want that.

# Launching the feedback flow

You probably want to show the Wiredash feedback flow to your users. Otherwise it's quite hard for them to provide feedback.

Start the Wiredash feedback flow by calling Wiredash.of(context).show() anywhere in your app.

For example:














 









import 'package:flutter/material.dart';
import 'package:wiredash/wiredash.dart';

class MyHomePage extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Hello World!'),
            RaisedButton(
              onPressed: () => Wiredash.of(context).show(),
              child: Text('Give Feedback'),
            ),
          ],
        ),
      ),
    );
  }
}

That code would result in an app that has a message saying "Hello World!", and a button that launches the Wiredash feedback flow.

It would look a little something like this:

Two screenshots of the Wiredash feedback flow, containing the initial and taking the screenshot steps.

What's that weird bubble thing?

Screenshot of a Wiredash circular button.

When you launch your app the first time, you might see this guy hanging around.

Is it a bird? Is it a plane? Is it Superman? Nope! It's our fabulous floating action button. He comes to our planet in peace and his very important duty is to launch the Wiredash feedback flow for your convenience.

He might be very useful when testing the Wiredash integration. And your end users will never see him. But if you feel like you'd rather say goodbye, you can do it like this:



 



return Wiredash(
  options: WiredashOptionsData(
    showDebugFloatingEntryPoint: false,
  ),
  child: MaterialApp(),
);

Want him to stay so that your users can see him too? Set showDebugFloatingEntryPoint to true and he will also appear on release mode.

# Verifying that it all works

As the last step, you'll probably want to make sure that everything is wired up properly.

Go through the Wiredash feedback flow and finish sending the feedback:

Three screenshots of the Wiredash feedback flow, containing the free form feedback, giving email address, and thank you steps.

Finally, go to the Feedback tab in your Wiredash console. If you're already on it, hit refresh.

If the SDK is set up correctly, you should see your first feedback appear:

A screenshot of the sample feedback sent using the Wiredash SDK.

There's only one more thing left to do now.

Address that feedback and go build something amazing. We know you can do it!