[flutter] 프로젝트 생성 & HELLO WORLD

2023.08.06 - [Flutter] - [flutter] mac 환경설정~

 

flutter 로 프로젝트 생성

flutter create sample

vscode로 열어보면 아래와 같은 구조를 확인할 수 있다.

그다음 extention 설치

• dart
• flutter

vs 코드 하단에 빨간박스를 클릭하면, 시뮬레이터를 선택해서 실행할 수 있다.

ios 시뮬레이터를 실행해 놓은 상태로 오른쪽 상단에 디버깅 실행 디버깅 시작 버튼을 클릭하면

build 후 (최초에는 조금 오래걸린다) 앱상에 데모앱이 실행되는걸 확인할수 있다.

vscode에 widget inspector도 있고,, 값을 변경하고 저장하면 앱 시뮬레이션에서 바로 저장되는것을 확인할 수 있다.

자 이제 hello world를 찍어보자.. 샘플은 버튼을 눌러서 몇번 클릭했는지 나오는 예제인데...

아래와 같이 수정해보자~

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("hello flutter!"),
        ),
        body: Center(child: Text("Hello world!")),
      ),
    );
  }
}

Hello world! 표시 끝!