로메오의 블로그

Flutter hello world 본문

App & OS/Hybrid

Flutter hello world

romeoh 2024. 8. 15. 19:37
반응형

SDK 다운로드

https://docs.flutter.dev/release/archive

SDK를 다운로드합니다.

맥의 경우 홈 디렉토리(~/), 윈도우즈는 C 드라이브(c:) 등에 압축을 풉니다.

 

 

 

 

PATH 지정하기 (맥기준)

$ echo $SHELL
/bin/zsh

$ export PATH=$PATH:~/flutter/bin
$ source ~/.zshrc
$ echo $PATH

$ flutter doctor

 

 

 

 

 

 

Android Studio 환경설정

Android Studio에서 Dart와 Flutter를 설치합니다.

 

 

 

 

 

 

 

Virtual Device Manager를 실행합니다.

 

 

 

 

 

create virtual device

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Xcode 설치

Xcode를 설치하고 command line tools를 설치합니다.

$ xcode-select --install

 

 

 

 

 

 

 

 

 

 

 

 

 

VS Code 설정

VS Code에서 Dart와 Flutter를 설치합니다.

 

 

 

 

 

프로젝트 생성

$ flutter create PROJECT_NAME

## 패키지명 설정
$ flutter create --org com.example PROJECT_NAME 


$ cd PROJECT_NAME
$ flutter run

 

 

 

 

 

 

ios, android, web 동시 실행하기

$ flutter devices

 

## $ flutter run -d ios
## $ flutter run -d android
$ flutter run -d all

 

 

 

 

 

 

 

 

 

Hello World 찍기

lib/main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(
        title: const Text('Hello World App'),
      ),
      body: const Center(
        child: Text('Hello World'),
      ),
    ));
  }
}

 

수정후 terminal에서 r 키를 눌러 Hot reload 합니다.

 

 

 

 

 

 

 

 

 

 

패키지명 변경

$ flutter pub add change_app_package_name
$ flutter pub run change_app_package_name:main com.gaeyou.flutter.sample
$ flutter clean && flutter pub get
$ flutter run

 

 

 

 

 

 

앱이름 변경

Android

android/app/src/main/AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    ...
    <application
        android:label="Flutter Sample"
        android:name="${applicationName}"
        android:icon="@mipmap/ic_launcher">
        ...
    </application>
</manifest>

 

 

 

 

 

ios

ios/Runner/Info.plist 

...
<plist version="1.0">
<dict>
	<key>CFBundleDisplayName</key>
	<string>Flutter Sample</string>
	...
</dict>
</plist>

 

 

 

 

 

$ flutter clean && flutter pub get && flutter run
반응형
Comments