Flutter Data Flow

A VS Code extension for visualizing Flutter Riverpod data flow architecture with interactive provider detection and code navigation.

Author: MD. SHAHIDUL ISLAM

This extension provides intelligent analysis of Flutter projects using Riverpod, helping developers understand data flow patterns and dependencies within their applications.

Features

Smart Provider Detection - Automatically scans and identifies Riverpod providers used in your current file

Focused Analysis - Displays only relevant data flow from the current widget/view context instead of overwhelming you with the entire project graph

Interactive Visualization - Renders a dynamic, clickable graph showing provider dependencies and relationships

Code Navigation - Click any node to jump directly to its source code location

Tree Navigation - Double-click nodes to expand or collapse subtrees for deeper exploration

Architecture Patterns - Traces common patterns:

• Widget → Provider dependencies
• Provider → Repository/Service relationships
• Repository/Service → API endpoints & storage

How It Works

• Scans lib/**/*.dart files in your Flutter project
• Detects Riverpod provider usage: ref.watch(...), ref.read(...), ref.listen(...)
• Analyzes method-level data flows for precision
• Generates a visual architecture map in the sidebar

Commands

• Flutter Data Flow: Generate Graph
• Flutter Data Flow: Refresh
• Flutter Data Flow: Filter Providers

Installation

Install from the VS Code Marketplace

Usage

1. Open any Dart file in a Flutter project
2. Click the Flutter Data Flow icon in the activity bar
3. Use the commands to generate or refresh the architecture map
4. Click nodes to navigate to source code
5. Double-click to expand/collapse subtrees

Development

To build and test locally:

cd extension-flutter-data-flow
npm install
npm run build

Then open this folder in VS Code and press F5 to launch the extension in a new window.

Technical Details

This extension uses pragmatic static analysis optimized for common Riverpod and repository patterns. The implementation is structured to support future integration with tree-sitter-dart or the official Dart analyzer without changing the UI contract.

Requirements

• VS Code 1.95.0 or higher
• A Flutter project with Riverpod providers

Contributing

Feedback and contributions are welcome. Please open issues or pull requests on the project repository.