Flutter UI Toolkit

Flutter DevTools Layout Explorer

Product Design & User Experience Design Engineering:
Flutter DevTools Layout Explorer

This page is under active construction. Content will be added and formatted in the days to come during October 2020

Current weather conditions, fires and utility outages are impacting progress on this page.

Challenge Design Timeline

Workflow

Goals

User Research User Journey User Validation

Flutter DevTools is a suite of performance development tools for both Flutter and Dart.The Flutter Inspector and Layout Explorer are included in the new Flutter DevTools released June 2020.

Flutter is a UI framework for building beautiful, fluid, and interactive cross-platform native apps on iOS, Android and the Web using the Dart language.
Dart is a client-optimized language for fast apps on any platform

The Layout Explorer is a new addition to the Flutter Inspector. It is a tool to help quickly visualize layout issues within Flexible Widgets. It shows layout constraint violations and any render overflow errors.

Overview
Research shows the most common issue for Flutter developers is understanding their runtime UI layout errors. This impacts the adoption of the new Flutter framework.

To improve adoption of the Flutter framework, design a successful product for developers to visualize and resolve flex layout runtime errors. Integrate this product into both DevTools and the IDE developer experience of IntelliJ and Visual Studio Code.

The goal was to present a working concept prototype in 3 weeks for Flutter Interact 2019 and to then develop the full product design and prototype to determine the workflow, onboarding, critical features, any usability issues, and custom integration with IDEs and the new Flutter DevTools.

The prototype is key to next steps in User Research studies and to prioritize the next iterations of the product as it matures from its alpha stage.

The alpha version of the Layout Explorer was released and demoed at Flutter Day 2020 at the end of June 2020. It is currently in active development within the Flutter Inspector of Flutter DevTools. Covid-19 has slowed its progress as priorities adjust to this fluid situation and ongoing pandemic. It is OSS and PRs can be found on github.

Project Role

Research
Product Design
Visual Design
Icon Design
Illustration
Interaction
Prototyping
Developer's Workflow
Usability Testing
Wireframing
User Journey + Onboarding

Project Goal

Identify usability issues on resolving Flexible errors with Dart
Determine the critical features needed to resolve runtime UI issues caused within Flexible Widgets.
Design a new product to visualize the flexbox implementation in the Flutter framework
Create prototype and research plan for new product design and workflow
Design icons, symbols for tools and product integration into the new Flutter Inspector
Product design and prototype for integration into third-party IDEs

New Product Design/Development for Debugging Layout Issues Visually

What is the Flutter DevTools Layout Explorer?

DevTools is a suite of performance and debugging tools for Dart and Flutter. The Layout Explorer is a new product within the DevTools suite for Flutter and Dart. It is currently in alpha/beta release and under active development. I am working on the design of DevTools with a primary focus on the developer experience.

The Flutter Inspector is a powerful tool for visualizing and exploring Flutter widget trees. The Flutter framework uses widgets as the core building block for anything from controls (ie: text, buttons, toggles), to layout (ie: centering, padding, rows, columns). The Layout Explorer helps users visualize and explore Flutter widget trees, and can be used for understanding existing layouts and diagnosing layout issues.

User Research:

Inspect the UI layout and state of a Flutter app.
Diagnose layout issues in a Flutter app.
Fix layout issues in a Flutter app.
Resolve common layout issues in a Flutter app, learning widget patterns and flex factor paradigm of Dart.
Debug layout issues in a Flutter app.
Visualize layout issues in a Flutter app.
View general log and diagnostics information about layout issues in a Flutter app.

This page is under active development - october 2020.

The Challenge

Create a successful suite of tools for the developer experience with a fresh look, feel and user experience. The experience must explore new concepts and developer experiences that will expand and unite various developer tools into one robust suite of tools for Dart and Flutter.

The Problem

Runtime error makes it harder to understand and resolve issue. IDE doesn't find these layout issues.

Flutter developers have issue writing their UI layout and need a way to visualize and resolve layout errors in Flutter DevTools. Here's the first prototype to help address this issue:

DevTools is a suite of performance and debugging tools for Dart and Flutter. It’s currently in alpha release, but is under active development.

DevTools Layout Explorer

Initial product launch was June 24, 2020.

Timeline

Within four weeks, create a working prototype of to visualize and resolve common layout issues in Flutter within the DevTools suite of tools for Flutter Interact 2019.

Within six months, launch Layout Explorer within the DevTools Flutter Inspector as part of Flutter 1.12.16 release. Create compelling UX/UI for Flutter Day 2020 Demos.

Goals

Integrate with VS Code and IntelliJ.

User Research

Every quarter, the Flutter team hosts a survey to collect feedback on Flutter. Each survey combines recurring questions to help the team monitor longitudinal trends of various measures and new questions that collect actionable feedback. It helps maintain focus on the important areas to address.

In the May 2020 survey, 8,000 responses were received over ten days, despite all the challenges of the current world situation.

First Deliverable

A working prototype to visualize and resolve common layout issues in Flutter. Featured in the Keynote on December 11, 2019 at Flutter Interact 2019.

Design Process: Brainstorming, Ideation, Sketching

The product must explore new concepts and developer experiences ... TBC

Workflow

The experience must explore new concepts and developer experiences that will expand and unite various developer ... suite of tools for Dart and Flutter.

Prototype

Production

Nexy Steps

Integrate with VS Code and IntelliJ.

Watch the June 2020 #FlutterDay DevTools Episode!

Watch Filip Hráček and Kenzie Schmoll from the Dart Language tooling team use DevTools to improve performance and speed! Dart is a client-optimized language for fast apps on any platform.

Onboarding: Layout Explorer

The Process

Competitive Analysis & Market Research Overview

User Personas

targeted personas.

Wireframe & User Flow

Create

User Experience

User Feedback - User Generated Review - Results

Social Media reactions to DevTools :