01. 윈도우 Flutter 설치 및 세팅, Hello world!

1. Flutter 다운로드

https://docs.flutter.dev/get-started/install

Install

c:\\flutter\에 압축풀기

 

 

2. 환경변수 설정

Path에 c:\flutter\flutter\bin 등록하기

 

3. 안드로이드 스튜디오 설치

https://developer.android.com/studio/archive?hl=ko 

Android 스튜디오 다운로드 자료실  |  Android 개발자  |  Android Developers

 

4. 안드로이드 SDK 설치

Android studio에서 system settings를 검색한다.

Android SDK -> SDK Tools -> Android SDK Command-line Tools (latest) 체크 후 OK

 

5. flutter doctor 를 활용하여 설치상태 진단도구로 최종 확인

 

위 커맨드로 라이센스 모두 동의하면, 설치 완료

 

6. Visual studio code와 Flutter 연결

Visual studio code 설치: https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

 

- Ctrl + shift + p를 통해 command palette 입력창을 띄운 후, install extensions 탭 키기

- Dart, Flutter, Prettier 설치

 

Dart: Dart 언어 관련 도움 extension

Flutter: 플러터 프로젝트 생성 및 실행 등

Prettier: indentation 등 이쁘게 해주는것

 

 

7. VS code에서 프로젝트 만들기

- Ctrl + shift + p -> Flutter: New Project 실행

 => Application 으로 생성

 

 

8. Default 소스코드로 컴파일하기

F5를 누르면 자동으로 컴파일 후 실행까지 됩니다.

 

Button counter가 default source로 되어있습니다.

 

위 화면에 노출되는 소스코드는 바로 lib/main.dart 입니다.

 

lib/main.dart 소스코드를 확인하시면,

- Flutter Demo Home Page

- You gave pushed the button this many times:

- 버튼 Counter 숫자

- + 버튼

 

4가지를 쉽게 찾아가실 수 있습니다.

 

 

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.

        primarySwatch: Colors.red,
      ),
      home: const MyHomePage(title: 'Hello World Title'),
    );
  }
}

위 소스에서 theme의 primarySwatch: Colors.red 로 바꿔주면, 화면의 테마 색이 빨간색으로 바뀝니다.

home에서 title 값을 바꿔주면, title의 text를 바꿀 수 있습니다.

 

 

이렇게 프로젝트에서 가장 중요한 파일은 lib/main.dart 입니다.

 

 

 

컴파일 후,

/web/

/android/

/ios/

 

위 세 폴더에 web, android, ios 앱들이 생성됩니다.

기본 크로스 플랫폼의 프로젝트 생성 / 컴파일 까지 수행하신겁니다!