# 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 (opens new window).
  2. 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 😉

# Create a new project

Click on the New Project button and choose a name for your new project:

A screenshot of the new project dialog in the Wiredash console, with "Caturday Planner" 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 "Caturday Planner", then it probably makes sense to use the same name in the Wiredash console.

After clicking on Create Project, you should now see your empty feedback inbox. Click on Go to Settings or manually navigate to the Settings page to reveal the Project ID & API Secret:

A screenshot of the project settings 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.

# 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_flutter_app
dependencies:
  flutter:
    sdk: flutter
  wiredash: ^0.4.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.

# 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 🎉

There's only one more thing left to do now - address that feedback and go build something amazing. We know you can do it!