Google Data Studio

Open lookerstudio.google.com and create a new report, or open an existing one. Add your data source — Google Sheets, BigQuery, Google Analytics, or any connector — and build the charts and tables you want to display inside the app. Once the report looks the way you want, you need to configure two things: sharing permissions and embed permissions. For sharing, click the Share button in the top-right corner of the Looker Studio editor. Under 'Get link', change the access level from 'Restricted' to 'Anyone with the link can view'. This is the step most people skip, and skipping it means the WebView inside your app shows a Google sign-in page instead of the report — because Looker Studio challenges anonymous viewers when the report is restricted. For embedding, go to File → Embed report (or Report Settings → Embed). Check the 'Enable embedding' checkbox. Looker Studio will show you a full iframe snippet like `<iframe width="600" height="450" src="https://lookerstudio.google.com/embed/reporting/abc123/page/XXXXX" ...>`. The part you want is the src URL — specifically the path that starts with `/embed/reporting/`. Copy just that URL (not the full iframe tag); you will paste it into your FlutterFlow widget in the next steps. Looker Studio Free is entirely free for this; Looker Studio Pro adds SLA and workspace management but is not needed for embedding.

In FlutterFlow, click Custom Code in the left navigation panel. You will see three sub-sections: Actions, Functions, and Widgets. Click the Widgets tab, then click the + Add button and choose Create New Widget. Give it a name like LookerStudioEmbed or DataStudioWidget. FlutterFlow will open a Dart code editor pre-filled with a starter widget skeleton. Before writing any code, you need to add the flutter_inappwebview package as a dependency. In the Custom Code panel, look for a Dependencies section (sometimes visible in the right sidebar when a widget is open). Type flutter_inappwebview in the package search field and select the latest stable version. FlutterFlow will add it to your pubspec.yaml automatically — you do not need a terminal or flutter pub get. Alternatively, some FlutterFlow versions show the dependency field directly inside the widget editor. Either way, once flutter_inappwebview is added, the import will be available in your Dart code. This is the most widely used WebView package in the Flutter ecosystem; it supports iOS WKWebView, Android WebView, and web builds (with limitations). Before writing the widget code, also add two parameters in the widget's Parameters tab: a String parameter called embedUrl (the Looker Studio embed URL) and optional double parameters for width and height so the widget is resizable from the FlutterFlow canvas.

In the Custom Widget's Dart editor, replace the default skeleton with the WebView widget code below. The widget accepts the embedUrl parameter you defined, creates an InAppWebView that loads it, and exposes width and height so FlutterFlow can size it on the canvas. A few things to understand about what this code does: InAppWebViewController is stored in a variable so you could call controller.reload() from an action if needed. InAppWebViewSettings controls browser behaviour — disableHorizontalScroll and disableVerticalScroll are false so the report is scrollable, which is important for multi-chart reports on smaller phone screens. The initialSettings also disable zoom by default to keep the report from feeling like a raw website inside the app; remove that setting if you want pinch-to-zoom. On iOS, Apple Transport Security (ATS) requires that all URLs loaded in a WebView use HTTPS. Looker Studio embed URLs always start with https://lookerstudio.google.com, so this is satisfied automatically. On Android, no extra manifest changes are needed for HTTPS URLs. Important: this Custom Widget does NOT render in FlutterFlow's web-based Run mode (the preview inside the browser). You will see an empty white box in the canvas and in Run mode. This is expected behaviour for WebView-based Custom Widgets across all FlutterFlow projects — you must use Test Mode (which installs on a connected device or emulator) or build an APK/IPA to see the widget render correctly.

1// Custom Widget: LookerStudioEmbed
2// Dependency: flutter_inappwebview (add in FlutterFlow Dependencies)
3
4import 'package:flutter/material.dart';
5import 'package:flutter_inappwebview/flutter_inappwebview.dart';
6
7class LookerStudioEmbed extends StatefulWidget {
8  const LookerStudioEmbed({
9    Key? key,
10    this.width,
11    this.height,
12    required this.embedUrl,
13  }) : super(key: key);
14
15  final double? width;
16  final double? height;
17  final String embedUrl;
18
19  @override
20  State<LookerStudioEmbed> createState() => _LookerStudioEmbedState();
21}
22
23class _LookerStudioEmbedState extends State<LookerStudioEmbed> {
24  InAppWebViewController? _controller;
25
26  @override
27  Widget build(BuildContext context) {
28    return SizedBox(
29      width: widget.width ?? double.infinity,
30      height: widget.height ?? 500,
31      child: InAppWebView(
32        initialUrlRequest: URLRequest(
33          url: WebUri(widget.embedUrl),
34        ),
35        initialSettings: InAppWebViewSettings(
36          javaScriptEnabled: true,
37          supportZoom: false,
38          useWideViewPort: true,
39          loadWithOverviewMode: true,
40        ),
41        onWebViewCreated: (controller) {
42          _controller = controller;
43        },
44        onLoadError: (controller, url, code, message) {
45          debugPrint('LookerStudio load error $code: $message');
46        },
47      ),
48    );
49  }
50}

Navigate to the screen where you want the Looker Studio report to appear. In the FlutterFlow widget panel, scroll down to the Custom Widgets section (it appears at the bottom of the widget picker after you've added your first Custom Widget). Drag LookerStudioEmbed onto the screen and drop it into a Column, Container, or wherever you want it positioned. With the widget selected on the canvas, open the Properties panel on the right. You will see the embedUrl parameter field. Paste the full Looker Studio embed URL you copied in Step 1 — for example, https://lookerstudio.google.com/embed/reporting/abc123def456/page/XXXXX. Set the width to Match Parent if you want the report to fill the horizontal space, and set a specific height in pixels (600–800 works well for most dashboards). If you want the embed URL to be dynamic — for example, loaded from your Supabase or Firebase database so different admin users see different reports — you can bind the embedUrl parameter to a page state variable or a query result instead of hardcoding it. Create an app state variable of type String, set it from a backend query, and bind it to the widget's embedUrl parameter using the variable picker in the Properties panel. For web builds: InAppWebView on web uses an iframe under the hood. The Looker Studio embed URL does allow cross-origin iframing — Google sets the appropriate headers — so this generally works in FlutterFlow web builds too. However, some browsers block third-party cookies in iframes by default (Safari ITP, Chrome Privacy Sandbox), which may affect authenticated Google sessions. For fully public reports, this is a non-issue.

Because Custom Widgets using WebView do not render in FlutterFlow's browser-based Run mode, you must test on a real device or emulator. In FlutterFlow, click the Test button (the phone icon) in the top toolbar to build a debug APK or open on a connected iOS/Android device. Once the app launches on your device, navigate to the screen with the Looker Studio widget. The report should load within a few seconds — the same way it loads in a mobile browser. If the widget shows a blank white screen on device: check that the embed URL is correct and starts with /embed/reporting/ (not the regular report URL); check that the report is set to 'Anyone with the link can view'; and check that embedding is enabled (File → Embed report → Enable embedding checkbox). For the optional BigQuery data pipeline: in the Firebase console, go to Extensions → Explore → Stream Collections to BigQuery → Install. Configure it to mirror the Firestore collection that holds your app's data — for example the 'orders' or 'events' collection. Once installed, writes to Firestore flow into a BigQuery dataset within minutes. In Looker Studio, add BigQuery as a new data source, select the dataset and table, and build your charts on top of it. Now when users take actions in your FlutterFlow app, their data shows up in the Looker Studio report that is embedded in the app — a live feedback loop with zero custom API work from FlutterFlow's side. If you need this integration set up quickly or want a custom Firestore → BigQuery → Looker Studio pipeline, RapidDev's team builds FlutterFlow integrations like this every week — free scoping call at rapidevelopers.com/contact.