Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>Flutter TreeNew to Visual Studio Code? Get it now.
Flutter Tree

Flutter Tree

Marcelo Velasquez

|
523,598 installs
| (7) | Free
Extension for Flutter to build basic widget tree.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Flutter Tree

Description

Extension for Flutter to build basic widget tree with nice syntax.

Example

Syntax

Base syntax

OneChild>MultipleChild[OneChild,MultipleChild[OneChild,OneChild],OneChild>OneChild]

Code generated

OneChild(
    child: MultipleChild(
        children: <Widget>[
            OneChild(),
            MultipleChild(
                children: <Widget>[
                    OneChild(),
                    OneChild(),
                ]
            ),
            OneChild(
                child: OneChild(),
            ),
        ]
    ),
),

Use

Create single child widget

SingleChildWidget>Child
SingleChildWidget(
    child: Child(),
),

Create multiple child widget

MultipleChildWidget[ChildOne,ChildTwo]
MultipleChildWidget(
    children: <Widget>[
        ChildOne(),
        ChildTwo(),
    ],
),

You can create nested widgets.

MultipleChild[ChildOne,ChildTwo>NestedChild>Child]
MultipleChild(
    children: <Widget>[
        ChildOne(),
        ChildTwo(
            child: NestedChild(
                child: Child(),
            ),
        ),
    ],
),

Requirements

Supported language:

  • Dart

1.0.0

Core and use with abbreviation.

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft