[Flutter] VS Code 확장 프로그램: Flutter Tree

VS Code의 Flutter Tree 확장 프로그램

https://marketplace.visualstudio.com/items?itemName=marcelovelasquez.flutter-tree

Flutter Tree - Visual Studio Marketplace

 

간단한 텍스트 문법을 통해 위젯 트리를 시각적으로 작성하고, 이를 Flutter 코드로 자동 변환해 주는 도구입니다.

문법 설명

Flutter Tree 문법은 HTML에서 사용되는 Emmet(Zen Coding)처럼 간단하고 직관적입니다. >와 []를 사용하여 위젯 간의 관계를 정의할 수 있습니다.

기본 문법

# 사용 예시
OneChild>MultipleChild[OneChild,MultipleChild[OneChild,OneChild],OneChild>OneChild]

# 위 문법은 다음 코드로 변환됩니다.
OneChild(
    child: MultipleChild(
        children: <Widget>[
            OneChild(),
            MultipleChild(
                children: <Widget>[
                    OneChild(),
                    OneChild(),
                ]
            ),
            OneChild(
                child: OneChild(),
            ),
        ]
    ),
),

사용 방법

단일 자식 위젯 생성

# 사용 예시
SingleChildWidget>Child

# 위 문법은 다음 코드로 변환됩니다.
SingleChildWidget(
    child: Child(),
),

다중 자식 위젯 생성

# 사용 예시
MultipleChildWidget[ChildOne,ChildTwo]

# 위 문법은 다음 코드로 변환됩니다.
MultipleChildWidget(
    children: <Widget>[
        ChildOne(),
        ChildTwo(),
    ],
),

중첩된 위젯 생성

# 사용 예시
MultipleChild[ChildOne,ChildTwo>NestedChild>Child]

# 위 문법은 다음 코드로 변환됩니다.
MultipleChild(
    children: <Widget>[
        ChildOne(),
        ChildTwo(
            child: NestedChild(
                child: Child(),
            ),
        ),
    ],
),