Integrate Flutter with the Facebook Stetho tool for Android

Overview

flutter_stetho

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.
Comments
  • Android build failed for Flutter 1.12.13+hotfix.5

    Android build failed for Flutter 1.12.13+hotfix.5

    Hi!

    Android builds seem to fail when using the latest Flutter version (1.12.13+hotfix.5) and Stetho 0.5.0.

    flutter build apk --release

    (...)
    Execution failed for task ':flutter_stetho:verifyReleaseResources'.
    > java.util.concurrent.ExecutionException: com.android.builder.internal.aapt.v2.Aapt2Exception: Android resource linking failed
      /Users/vagrant/git/build/flutter_stetho/intermediates/res/merged/release/values/values.xml:236: error: resource android:attr/fontVariationSettings not found.
      /Users/vagrant/git/build/flutter_stetho/intermediates/res/merged/release/values/values.xml:237: error: resource android:attr/ttcIndex not found.
      error: failed linking references.
    

    Any ideas?

    opened by Sleevezipper87 7
  • Provide OptIn feature

    Provide OptIn feature

    Currently the basic feature set of stetho is enabled whenever the plugin is added to the project.

    This includes Database and the Shared Preference access. This proves to be quite dangerous for the production builds.

    opened by jaggernod 7
  • Provisional headers are shown for Request headers.

    Provisional headers are shown for Request headers.

    I can not see the headers i create.

    This is the code I use to test it: ` Map<String, String> headers = {'Authorization': 'token'}; Future fetchPost() async { final response = await http.get('https://postman-echo.com/headers', headers: headers);

      if (response.statusCode < 300) {
        return response;
      } else {
        throw Exception('Failed to load post');
      }
    }
    
    print(fetchPost);
    fetchPost().then((response) {
      print(response);
    }).catchError(() {});`
    

    Request headers in dev tools: Provisional headers are shown accept-encoding:gzip content-length:0 host:postman-echo.com user-agent:Dart/2.0 (dart:io)

    Request headers in response: {"headers":{ "host":"postman-echo.com", "accept-encoding":"gzip", "authorization":"token", <--- The header i created is missing from request headers "user-agent":"Dart/2.0 (dart:io)", "x-forwarded-port":"443", "x-forwarded-proto":"https"}}

    opened by Henge9 7
  • flutter_stetho crashed after updating to version 0.3.0

    flutter_stetho crashed after updating to version 0.3.0

    Hey, i just updated the package to version 0.3.0.

    Unfortunately, it crashes on build with the following exception:

    Launching lib\main.dart on WAS LX1A in debug mode...
    Initializing gradle...
    Resolving dependencies...
    Running Gradle task 'assembleDebug'...
    registerResGeneratingTask is deprecated, use registerGeneratedResFolders(FileCollection)
    registerResGeneratingTask is deprecated, use registerGeneratedResFolders(FileCollection)
    registerResGeneratingTask is deprecated, use registerGeneratedResFolders(FileCollection)
    
    Compiler message:
    file:///C:/Dev/flutter/.pub-cache/hosted/pub.dartlang.org/flutter_stetho-0.3.0/lib/src/http_client_response.dart:4:7: Error: 'StethoHttpClientResponse' can't implement both 'Stream<List<int>>' and 'Stream<Uint8List>'
     - 'Stream' is from 'dart:async'.
     - 'List' is from 'dart:core'.
     - 'Uint8List' is from 'dart:typed_data'.
    class StethoHttpClientResponse extends StreamView<List<int>>
          ^
    Compiler failed on C:\Dev\petleo-flutter-app\lib\main.dart
    
    FAILURE: Build failed with an exception.
    
    * Where:
    Script 'C:\Dev\flutter\packages\flutter_tools\gradle\flutter.gradle' line: 652
    
    * What went wrong:
    Execution failed for task ':app:compileflutterBuildDebugArm64'.
    > Process 'command 'C:\Dev\flutter\bin\flutter.bat'' finished with non-zero exit value 1
    
    * Try:
    Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.
    
    * Get more help at https://help.gradle.org
    
    BUILD FAILED in 12s
    Finished with error: Gradle task assembleDebug failed with exit code 1
    

    Channel dev, v1.8.1, (I also tried beta 1.7) Dart 2.5.0 (build 2.5.0-dev.0.0 b5aeaa6796)

    Any ideas how to solve this problem?

    Best Junus

    opened by JunusErgin 6
  • Cannot be compiled in Flutter 1.9

    Cannot be compiled in Flutter 1.9

    I got following message while building my app:

    Compiler message:
    /flutter/.pub-cache/hosted/pub.dartlang.org/flutter_stetho-0.4.1/lib/src/http_client_response.dart:5:7: Error: 'StethoHttpClientResponse' can't implement both 'Stream<Uint8List>' and 'Stream<List<int>>'
     - 'Stream' is from 'dart:async'.
     - 'Uint8List' is from 'dart:typed_data'.
     - 'List' is from 'dart:core'.
    class StethoHttpClientResponse extends StreamView<Uint8List>
          ^
    /flutter/.pub-cache/hosted/pub.dartlang.org/flutter_stetho-0.4.1/lib/src/http_client_request.dart:54:42: Error: The argument type 'HttpClientResponse' can't be assigned to the parameter type 'Stream<Uint8List>'.
     - 'HttpClientResponse' is from 'dart:_http'.
     - 'Stream' is from 'dart:async'.
     - 'Uint8List' is from 'dart:typed_data'.
    Try changing the type of the parameter, or casting the argument to 'Stream<Uint8List>'.
          createResponseTransformer(id).bind(response),
                                             ^
    Compiler failed on /Users/chao-chih/case/air-guard/lib/main.dart
    Finished with error: Gradle task assembleDebug failed with exit code 1
    

    And here is my flutter version:

    
    chao-chihde-iMac:air-guard chao-chih$ flutter doctor -v
    [✓] Flutter (Channel stable, v1.9.1+hotfix.2, on Mac OS X 10.14.5 18F132, locale zh-Hant-TW)
        • Flutter version 1.9.1+hotfix.2 at /flutter
        • Framework revision 2d2a1ffec9 (5 days ago), 2019-09-06 18:39:49 -0700
        • Engine revision b863200c37
        • Dart version 2.5.0
    
    

    Thanks

    opened by dokinkon 4
  • Prepare for Uint8List SDK breaking change

    Prepare for Uint8List SDK breaking change

    A recent change to the Dart SDK updated HttpClientResponse to implement Stream<Uint8List> rather than implementing Stream<List<int>>.

    This forwards-compatible change updates calls to Stream.transform(StreamTransformer) to instead call the functionally equivalent StreamTransformer.bind(Stream) API, which puts the stream in a covariant position and thus causes the SDK change to be non-breaking.

    https://github.com/dart-lang/sdk/issues/36900

    opened by tvolkert 4
  • 'StethoHttpClientResponse' is missing implementations for these members: - HttpClientResponse.compressionState in flutter_stetho

    'StethoHttpClientResponse' is missing implementations for these members: - HttpClientResponse.compressionState in flutter_stetho

    I am tried to use flutter_stetho package when it Complie the complier shown ..

    Launching lib/main.dart on Android SDK built for x86 in debug mode...

    Compiler message: file:///home/administrator/softwares/flutter/.pub-cache/hosted/pub.dartlang.org/flutter_stetho-0.2.2/lib/src/http_client_response.dart:4:7: Error: The non-abstract class 'StethoHttpClientResponse' is missing implementations for these members: - HttpClientResponse.compressionState Try to either - provide an implementation, - inherit an implementation from a superclass or mixin, - mark the class as abstract, or - provide a 'noSuchMethod' implementation.

    class StethoHttpClientResponse extends StreamView> ^^^^^^^^^^^^^^^^^^^^^^^^ org-dartlang-sdk:///third_party/dart/sdk/lib/_http/http.dart:1967:42: Context: 'HttpClientResponse.compressionState' is defined here. HttpClientResponseCompressionState get compressionState; ^^^^^^^^^^^^^^^^ Compiler failed on /home/administrator/projects/mobile/sampleapp/lib/main.dart

    FAILURE: Build failed with an exception. * Where: Script '/home/administrator/softwares/flutter/packages/flutter_tools/gradle/flutter.gradle' line: 665

    What went wrong: Execution failed for task ':app:compileflutterBuildDebugX86'. Process 'command '/home/administrator/softwares/flutter/bin/flutter'' finished with non-zero exit value 1

    Try: Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

    Get more help at https://help.gradle.org

    BUILD FAILED in 20s Gradle task assembleDebug failed with exit code 1 Exited (sigterm)

    opened by Sachinsowri 4
  • * fixed issue with size being 0 and missing payload

    * fixed issue with size being 0 and missing payload

    I noticed that the size in devtools is 0 for each request. This fixes that issue, but bear in mind that this is just received data. It does not take into account sent data.

    opened by andrei1489 2
  • Error: 'StethoHttpClientResponse' can't implement both 'Stream<Uint8List>' and 'Stream<List<int>>'

    Error: 'StethoHttpClientResponse' can't implement both 'Stream' and 'Stream>'

    flutter_stetho 0.4.1 build error!!

    Compiler message: file:///Users/woodnyroom/development/flutter/.pub-cache/hosted/pub.dartlang.org/flutter_stetho-0.4.1/lib/src/http_client_response.dart:5:7: Error: 'StethoHttpClientResponse' can't implement both 'Stream' and 'Stream<List>'

    • 'Stream' is from 'dart:async'.
    • 'Uint8List' is from 'dart:typed_data'.
    • 'List' is from 'dart:core'. class StethoHttpClientResponse extends StreamView ^ file:///Users/woodnyroom/development/flutter/.pub-cache/hosted/pub.dartlang.org/flutter_stetho-0.4.1/lib/src/http_client_request.dart:54:42: Error: The argument type 'HttpClientResponse' can't be assigned to the parameter type 'Stream'.
    • 'HttpClientResponse' is from 'dart:_http'.
    • 'Stream' is from 'dart:async'.
    • 'Uint8List' is from 'dart:typed_data'. Try changing the type of the parameter, or casting the argument to 'Stream'. createResponseTransformer(id).bind(response),
    opened by woodnynobu 2
  • No `contentLength` sent in POST method

    No `contentLength` sent in POST method

    When wrapping HttpClientRequest in StethoHttpClientRequest the contentLength is not correct as it is populated later on by the framework. That results in not having proper content length sent to the backend and also not being displayed in DevTools.

    opened by tomaszpolanski 2
  • Gradle Exception

    Gradle Exception "StethoHttpClient is missing implementations for these members"

    Hi,

    I'm getting the following exception when using this library.

    compiler message: file:///Users/simon/.pub-cache/hosted/pub.dartlang.org/flutter_stetho-0.1.1/lib/src/http_client.dart:9:7: Error: The non-abstract class 'StethoHttpClient' is missing implementations for these members:
    compiler message:   'connectionTimeout', 'connectionTimeout='.
    compiler message: Try to either
    compiler message:  - provide an implementation,
    compiler message:  - inherit an implementation from a superclass or mixin,
    compiler message:  - mark the class as abstract, or
    compiler message:  - provide a 'noSuchMethod' implementation.
    compiler message: 
    compiler message: class StethoHttpClient implements HttpClient {
    compiler message:       ^^^^^^^^^^^^^^^^
    compiler message: file:///b/build/slave/Linux_Engine/build/src/third_party/dart/sdk/lib/_http/http.dart:1: Error: 'connectionTimeout' is defined here.
    compiler message: file:///b/build/slave/Linux_Engine/build/src/third_party/dart/sdk/lib/_http/http.dart:1: Error: 'connectionTimeout=' is defined here.
    Compiler failed on /Users/simon/MyApp/lib/main.dart
    
    FAILURE: Build failed with an exception.
    * Where:
    Script '/Users/simon/fluttersdk/flutter/packages/flutter_tools/gradle/flutter.gradle' line: 473
    * What went wrong:
    Execution failed for task ':app:flutterBuildDebug'.
    > Process 'command '/Users/simon/fluttersdk/flutter/bin/flutter'' finished with non-zero exit value 1
    * Try:
    Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.
    
    * Get more help at https://help.gradle.org
    BUILD FAILED in 4s
    Gradle build failed: 1
    
    opened by simc 2
  • Warning message saying

    Warning message saying "Plugin use a deprecated version of the Android embedding."

    The plugins `flutter_stetho` use a deprecated version of the Android embedding.
    To avoid unexpected runtime failures, or future build failures, try to see if these plugins support the Android V2 embedding. Otherwise, consider removing them since a future release of Flutter will remove these deprecated APIs.
    If you are plugin author, take a look at the docs for migrating the plugin to the V2 embedding: https://flutter.dev/go/android-plugin-migration.
    

    I am getting above warning message by pub, and it seems like migration into V2 is required to get rid of this warning.

    opened by Kang-Kim1 0
  • It looks like it's not compatible with flutter 2.0

    It looks like it's not compatible with flutter 2.0

    `Launching lib\main.dart on BKL AL20 in debug mode... ../flutter2.0.0/.pub-cache/hosted/pub.flutter-io.cn/flutter_stetho-0.5.2/lib/src/http_client_request.dart:10:7: Error: The non-abstract class 'StethoHttpClientRequest' is missing implementations for these members:

    • HttpClientRequest.abort Try to either
    • provide an implementation,
    • inherit an implementation from a superclass or mixin,
    • mark the class as abstract, or
    • provide a 'noSuchMethod' implementation.

    class StethoHttpClientRequest implements HttpClientRequest { ^^^^^^^^^^^^^^^^^^^^^^^ org-dartlang-sdk:///third_party/dart/sdk/lib/_http/http.dart:2053:8: Context: 'HttpClientRequest.abort' is defined here. void abort([Object? exception, StackTrace? stackTrace]); ^^^^^

    FAILURE: Build failed with an exception.

    • Where: Script 'C:\www\flutter\flutter2.0.0\packages\flutter_tools\gradle\flutter.gradle' line: 991

    • What went wrong: Execution failed for task ':app:compileFlutterBuildDebug'.

    Process 'command 'C:\www\flutter\flutter2.0.0\bin\flutter.bat'' finished with non-zero exit value 1

    • Try: Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

    • Get more help at https://help.gradle.org

    BUILD FAILED in 1m 8s Exception: Gradle task assembleDebug failed with exit code 1 Exited (sigterm) `

    opened by wish32 3
  • Chrome : Stetho ui distorted since 2 weeks !!!

    Chrome : Stetho ui distorted since 2 weeks !!!

    Hey folks!!!

    Suddenly chrome browser started displaying blank ui with stetho inspect. It is not only about "flutter_stetho" , also not working with native android. Any help is welcome here.

    Screenshot 2021-03-15 at 12 18 04 PM

    opened by hardypatel30 1
  • Support flutter 1.22.0

    Support flutter 1.22.0

    ../../Dev/flutter/.pub-cache/hosted/pub.flutter-io.cn/flutter_stetho-0.5.2/lib/src/http_client_request.dart:10:7: Error: The non-abstract class 'StethoHttpClientRequest' is missing implementations for these members:
     - HttpClientRequest.abort
    Try to either
     - provide an implementation,
     - inherit an implementation from a superclass or mixin,
     - mark the class as abstract, or
     - provide a 'noSuchMethod' implementation.
    
    class StethoHttpClientRequest implements HttpClientRequest {
          ^^^^^^^^^^^^^^^^^^^^^^^
    org-dartlang-sdk:///third_party/dart/sdk/lib/_http/http.dart:2045:8: Context: 'HttpClientRequest.abort' is defined here.
      void abort([Object? exception, StackTrace? stackTrace]);
           ^^^^^
    
    opened by hamberluo 2
Owner
Brian Egan
Montana boy living in Berlin, Indie Hacker, and speaker of bad German.
Brian Egan
Plugin to integrate Facebook Native Banner Ad

flutter_fbaudience_network Plugin to integrate Facebook Native Ad to Flutter application Warning: The plugin is based on Flutter PlatformView (Android

Duy Duong 8 May 13, 2020
A flutter plugin to get facebook deep links and log app events using the latest Facebook SDK to include support for iOS 14

Facebook Sdk For Flutter LinkedIn GitHub facebook_sdk_flutter allows you to fetch deep links, deferred deep links and log facebook app events. This wa

Saad Farhan 23 Dec 17, 2022
Facebook-redesign - An app developed that show a Facebook inspired UI design

Superbe Lecteur de Musique fait avec Flutter ! Captures d'Écran Construire depui

Youssef Marzouk 4 Jul 7, 2022
This is tool to create 3D Models which can be used in Flutter Applications. Tool is developed completely using Flutter.

three_d_model_tool A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you start

Shubham Yeole 2 Nov 8, 2022
Flutter Facebook Responsive UI - Web & Mobile: Android | IOS

Facebook Clone Responsive UI - Flutter Web & Mobile: IOS | Android Web Version with Flutter! This web version uses flutter. Mobile Version: Android |

Luan Batista 24 Jan 3, 2023
The LoginRadius Flutter SDK will let you integrate LoginRadius' customer identity platform with your Flutter application(s).

TODO: Put a short description of the package here that helps potential users know whether this package might be useful for them. Features TODO: List w

Ahmed Yusuf 4 Feb 3, 2022
Buy me crypto coffee - A Flutter package that helps you to integrate Buy me a crypto coffee widget in flutter

Buy me a crypto coffee Features A Flutter package that helps you to integrate Bu

Anto Tom Abraham 2 Nov 25, 2022
A Sample Flutter project to show how to integrate native kotlin code with flutter

kotlin_flashlight A Sample Flutter project to show how to integrate native kotlin code with flutter. Getting Started Visit this docs for Flutter setup

null 0 Apr 4, 2022
Flutter plugin to simply integrate Agora Video Calling or Live Video Streaming to your app with just a few lines of code.

Agora UI Kit for Flutter Instantly integrate Agora video calling or video streaming into your Flutter application. Getting started Requirements An Ago

Agora.io Community 106 Dec 16, 2022
In this video we will learn how to Integrate NodeJS Login and Register API in our Flutter application using JWT Token Authentication.

Flutter Login & Register with Node JS Rest API In this video we will learn how to Integrate NodeJS Login and Register API in our Flutter application u

SnippetCoder 18 Nov 28, 2022
Plugin to integrate native firebase admob to Flutter application

flutter_native_admob Plugin to integrate Firebase Native Admob to Flutter application Platform supported: iOS, Android Getting Started For help gettin

Duy Duong 63 Dec 21, 2022
Integrate any icons you like to your flutter app

Flutter Tutorial - Icons - Custom & Plugin Icons Integrate any icons you like to your flutter app - Material Icons, Beautiful Icons & Custom Icons. ⚡

Behruz Hurramov 1 Dec 28, 2021
Easily integrate GitHub's Octicons in your own Flutter project

flutter_octicons Use the Octicon icons developed by GitHub and released under the MIT license in Flutter. flutter_octicons automatically updates itsel

Rubin Raithel 6 Nov 21, 2022
Flutter project to Integrate API resources from JSON Place Holder API

rest_api_jsonplaceholder About This flutter project helps to Integrate API resources from JSON Place Holder API API Source: https://jsonplaceholder.ty

null 0 Apr 28, 2022
This library provides the easiest way to integrate Twitter Cards in Flutter web apps 🐦

The Easiest Way to Integrate Twitter Cards into Your Flutter Web App ?? 1. Guide ?? 1.1. Features ?? 1.2. Getting Started ⚡ 1.2.1. Install Library 1.2

Twitter.dart 3 Aug 7, 2022
A Note app built with flutter and integrate with Firebase for user authentication and backend database.

Note App Note app (Both frontend and backend) created with Flutter and Firebase. Complete UI Contains Sign in & Sign up Home Screen Setting screen Acc

Hafiz Mounim Naeem 6 Dec 4, 2022
A most easily usable RESAS API wrapper in Dart. With this library, you can easily integrate your application with the RESAS API.

A most easily usable RESAS API wrapper library in Dart! 1. About 1.1. What Is RESAS? 1.2. Introduction 1.2.1. Install Library 1.2.2. Import It 1.2.3.

Kato Shinya 2 Apr 7, 2022
The flutter_ibm_watson makes it easy to integrate IBM Watson

Flutter Ibm Watson Installation Add this to your package's pubspec.yaml file: dependencies: flutter_ibm_watson: ^0.0.1 You can install packages fro

Victor Alfonso Rodas Oña 27 Nov 4, 2022
Iridium-reader-widget - Plug and play reader widget allowing to easily integrate an Iridium viewer inside any app

Plug and play reader widget allowing to easily integrate an Iridium viewer insid

Mantano 15 Dec 31, 2022