A clean, modern, lightweight, and fast web application where beginners can write Flutter widget code and instantly preview the rendered UI inside an interactive mobile phone frame.
Created by Alison Pinto
- VS Code-Style Split View: Authentic VS Code dark-themed editor on the left with syntax highlighting, line numbers, error diagnostics, and a widget quick-insertion toolbar.
- Dual-Engine Code Editor: Supports Monaco Editor (VS Code engine) and a fallback lightweight editor with full 2-space Tab indentation and instant auto-sync.
- Interactive Smartphone Preview Studio: Realistic mobile phone frame preview with iPhone 15 Pro, Android Pixel 8, and Borderless device frames, orientation toggle, and light/dark phone themes.
- In-Browser Client-Side Flutter Engine: Zero-latency Dart/Flutter AST tokenizer & widget renderer supporting 30+ core Flutter widgets without external server build dependencies.
- Live Interactive Widget State: Buttons respond to clicks with tap counter feedback, TextFields accept live typing, Switches toggle, and Sliders move dynamically.
- Beginner Templates & Widget Cheat Sheet: 6 built-in starter templates (Hello World, Styled Containers, Buttons & State, Form Inputs, ListView, Profile Dashboard) and a slide-out widget cheat sheet drawer.
- Live Web App: https://flutter-online-editor.vercel.app
- GitHub Repository: https://github.com/Alisonpinto/Flutter_online_editor.git
| Category | Supported Widgets |
|---|---|
| Structure & Layout | Scaffold, AppBar, Center, Container, Column, Row, Stack, Positioned, Wrap, Padding, SizedBox, SingleChildScrollView |
| Material & Content | Text, Icon, Card, Chip, CircleAvatar, Divider, CircularProgressIndicator |
| Interactive & Buttons | ElevatedButton, OutlinedButton, TextButton, IconButton, FloatingActionButton |
| Form Controls | TextField, Switch, Checkbox, Slider |
| Lists | ListView, ListTile |
| Styling | TextStyle, BoxDecoration, LinearGradient, BoxShadow, BorderRadius, EdgeInsets, Colors (Standard, Shades, Hex Color(0xFF...)) |
-
Clone the repository:
git clone https://github.com/Alisonpinto/Flutter_online_editor.git cd Flutter_online_editor -
Install dependencies:
npm install
-
Start the local development server:
npm run dev
-
Open your browser and navigate to
http://localhost:3000.
- Frontend: React 18, TypeScript, Vite
- Editor: Monaco Editor (
@monaco-editor/react) - Icons: Lucide React & Material Symbols
- Styling: Modern Vanilla CSS Design System with dark mode variables
Created by Alison Pinto. Designed for beginners to learn Flutter widgets visually and interactively.