4단계 플러터 입문하기

4.2. Hello Flutter 앱 만들기

플러터 프로젝트는 만드는 방법은 여러가지가 존재하지만 저는 CLI를 통해 플러터 프로젝트를 생성하는 법을 사용했습니다.

4.2.1. CLI 환경에서 프로젝트 생성하기

윈도우 or 맥OS에서 터미널을 열어 프로젝트 생성을 원하는 폴더로 이동 후 flutter create 명령으로 프로젝트를 생성합니다.

flutter create hello_world

프로젝트 생성이 완료되면 다음과 같이 표시됩니다.

4.2.2. Visual Studio에서 플러터 프로젝트 실행하기

Visual Studio에서 플러터 프로젝트를 실행하려면 먼저 왼쪽 메뉴의 Extensions에서 Flutter와 Dart를 설치합니다.

이후 lib폴더의 main.dart에서 main위의 Run버튼을 클릭해 플러터를 실행합니다. 혹은 오른쪽 상단에 Start Debugging 버튼을 눌러서 실행합니다.

4.2.3. 플러터 실행 에뮬레이터 변경하기

오른쪽 하단의 Chome (web-javascript)를 클릭하면 플러터 실행 에뮬레이터를 웹, 앱으로 변경이 가능합니다.

4.3. Hello World 출력하기

main.dart의 main() 함수는 플러터 프로젝트가 실행되는 도입부입니다. main()함수안에 runApp() 함수를 실행시켜서 플러터 프로젝트를 시작합니다.

void main() {
  runApp(
    MaterialApp( // 머티리얼 디자인 위젯
      home: Scaffold( // Scaffold 위젯
        body: Text("Hello World") // Text 위젯
        ),
    )
  );
}

// Hot Reloading 적용 안될시
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext contest) {
    return (MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text(
            "Hello World",
          ),
        ),
      ),
    ));
  }
}

이를 실행하면 다음과 같이 표시됩니다.

💡Tips : 위의 코드로 실행 후 글자 변경시 Hot Reloading이 적용이 되지 않는데 이는 runApp에 직접 전달하면 발생하는 문제로 이후에 별도의 위젯을 통해 위젯을 생성하면 Hot Reloading이 정상적으로 동작함을 확인할 수 있습니다.

4.3.1. 실제 기기와 연결하여 플러터 실행해보기

실제 기기와 연결하여 플러터를 실행 할 경우 안드로이드의 경우 개발자 옵션 활성화 후 USB 디버깅모드를 활성화한다음 정품 케이블을 이용하여 컴퓨터와 연결시 정상적으로 Devices 목록에 뜨는것을 확인 할 수 있다. 정품 케이블이 아닌 다른 케이블로 삽질했….