flutter_stetho

Introduction: Integrate Flutter with the Facebook Stetho tool for Android
More: Author   ReportBugs   
Tags:

A plugin that connects Flutter to the Chrome Dev Tools on Android devices via the Stetho Android Library.

Network Inspector

The main feature I was aiming to achieve was a Network Inspector.

Network Inspector in Action

Getting Started

How can you too get this plugin up and running in your own app? Follow these steps.

Install the plugin

Add flutter_stetho to your dependencies in the pubspec.yaml file

  • For Flutter 1.7.x, use version 0.3.x
  • For Flutter 1.8.x, use version 0.4.x
  • For Flutter 1.9.x, use version 0.5.x

Install StethoHttpOverrides

Next, you'll need to install the Stetho.initialize() in the main() function of your app. This will enable Stetho and allow flutter_stetho to wrap all http calls and report information to the Chrome Dev Tools via the Stetho package from Facebook.

Note: It's probably a good idea only put this override in a main_dev.dart file.

void main() {
  Stetho.initialize();

  runApp(new MyApp());
}

Run your app on an Android Device

flutter run

Open Chrome

Pop open Chrome or Chromium, navigate to chrome://inspect

You should now see your App appear in the window.

Known Issues

  • Timing may be slightly off for some requests. That's because:
  • Code is rough mvp / prototype code. Needs improvement.
  • Animated Gifs not working
  • Some error cases may not be properly handled. Need more testing / feedback to find problems.
  • No Tests
  • If the app shuts down on start up run flutter clean to remove old builds.
Apps
About Me
GitHub: Trinea
Facebook: Dev Tools