Flutter on VS CODE

VS CODE

Extension (확장)

Flutter 검색

Inatall [설치]

marketplace.visualstudio.com

https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

주요 명령어

flutter: New Project

flutter: Select Device

flutter 디버그 : F5

flutter 실행 : ctrl + F5

Snippets

stless, stful 등 코드 스니펫을 작성하면, 빠르게 코드를 자동 완성할 수 있습니다.

•

stless

import 'package:flutter/material.dart';

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      // Stateless Widget의 내용을 여기에 작성합니다.
    );
  }
}
Dart
복사

•

stful

import 'package:flutter/material.dart';

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  @override
  Widget build(BuildContext context) {
    return Container(
      // StatefulWidget의 내용을 여기에 작성합니다.
    );
  }
}
Dart
복사

추가 확장 설치

Flutter Tree

HTML 의 Emmet 과 유사하게 ( > , [] ) 기호를 사용하여 플러터 위젯의 child, chlidren 위젯을 빠르게 작성할 수 있게 도와주는 확장도구

예시

OneChild>MultipleChild[OneChild,MultipleChild[OneChild,OneChild],OneChild>OneChild]
Dart
복사

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