플러터:개요
둘러보기로 이동
검색으로 이동
개요[편집 | 원본 편집]
구글이 공개한 앱개발 프레임워크. Software Development Kit.
- 간편하게 반응형 웹페이지 따위를 개발할 수 있어 순위가 급격하게 오르는 중이다.
- 일반적인 웹 툴과 다르게, UI가 먼저 있고, 여기에 변화가 생기면 구성 요소를 새롭게 불러오는 방식이다.
- 생각보다 설치하고 시작하는 것 자체부터 고비다;; 다른사람들이 정리해둔 글을 그대로 따라해도 안되는 경우가 상당하다;; 그럴땐 침착하게 창을 껐다 켜든가 재부팅을 하는 방향으로.
- 25년12월 기준 web이나 일반 데스크톱 OS에선 따로 구현해주어야 하는 기능들이 상당수 있다.
설치[편집 | 원본 편집]
설치 전 유의사항[편집 | 원본 편집]
| 과정 | 설명 | 비고 |
|---|---|---|
| 경로는 무조건 영어로 | 프로젝트 저장 경로, 플러터 언어의 경로에 절대로 영어 외의 언어가 쓰이면 안된다.(이게 참 불편한 점이다; 회사 원드라이브 경로는 한글인데..)
하여, 필자는 비고와 같이 설정하여 경로를 우회하였다. |
윈도우. CMD에서 다음의 명령으로 가상 드라이브 생성.
subst X: "D:\OneDrive - 원주중학교\for coding computer" |
설치[편집 | 원본 편집]
| 과정 | 설명 | 비고 |
|---|---|---|
| Flutter SDK 설치 | zip파일로 다운받는데, 몇 가지 방법이 있다.
|
CMD 등에서 flutter --version 으로 설치 확인. |
| 확인 | 터미널에서 flutter doctor 입력.
어떤 환경에서의 준비가 되어 있는지 확인할 수 있다. |
|
- 윈도우의 경우: 윈도우 어플을 개발하려면 비주얼스튜디오가 필요하다.(https://visualstudio.microsoft.com/downloads/)
발생할 수 있는 문제[편집 | 원본 편집]
| 과정 | 설명 | |
|---|---|---|
| ...... to "build\flutter_assets\shaders/ink_sparkle.frag" failed with exit code -1073741819. | 보통 프로젝트나 플러터의 경로에 한글이 포함되어 있을 때 발생하는 에러이다.
이렇게 경로를 바꿔주는 경우, VSCode의 경우에 좌측의 세팅에서 "Dart: Flutter SDK Path" 설정을 찾아 설정파일을 변경해주어야 한다. 이렇게 하면 flutter doctor에서 경로가 바뀌었음을 지적하는데, 이는 flutter clean으로 build 파일을 제거했다가 다시 구성하면 해결된다. | |
| Flutter failed to delete a directory at "build\flutter_assets". The flutter tool cannot access the file or directory. | 2025년 기준 이런 메시지가 뜨는 건 여러 이유가 있겠지만... 나의 경우엔 원드라이브 내부의 경로를 사용했을 때이다.
구글드라이브나 원드라이브나 동기화 폴더 안에 두면 사용중으로 묶여버리는데... 이거 이유를 한참만에 발견했다;;; 동기화 환경에선 쓸 수 없다는 게 굉장히...치명적이고 불편하다. |
시작[편집 | 원본 편집]
- 안드로이드 스튜디오에서 프로젝트로 시작하든, vscode에서 시작하든.(이 챕터 이후 VScode 세팅 등은 플러터:VSCode - 학교의 모든 지식. SMwiki를 참고하자.)
- 프로젝트를 시작하는 방법과 에뮬레이터(가상기) 사용법에 대하여.
| 단계 | 설명 | 비고 |
|---|---|---|
| 설치 | ||
| 안드로이드 스튜디오 | 플러터의 위치를 지정하는 과정이 필요하다.
|
|
보통 처음 실행하면 에러가 뜨는데...(나중에 정리해보자...
에뮬레이터 사용하기[편집 | 원본 편집]
| 안드로이드 스튜디오 설치 | 휴대폰 뮬레이터를 실행하기 위해 필요한 프로그램이다.(iOS개발은 윈도우 컴에선 못함.)
|
https://developer.android.com/studio/installhttps://developer.android.com/studio?hl=ko#get-android-studio |
| 안드로이드 스튜디오 설정 |
|
|
| 기기 추가 |
|
|
| 라이센스 동의 | flutter doctor를 실행하면 [!] Android toolchain - develop for Android devices (Android SDK version 35.0.1) 과 같은 메시지가 뜬다.
라이센스 동의 관련은 flutter doctor --android-licenses 를 입력해 y를 계속 입력하면 된다. |
기본 양식[편집 | 원본 편집]
import 'package:flutter/material.dart'; // 마테리얼 디자인 관련 라이브러리.(안드로이드 방식. 이지만 ios도 지원)
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: Text('Hello, World!'),
),
),
);
}
}
기본적인 흐름은 main>runApp>위젯 형식이다. 위젯을 상속한 클래스의 build를 오버라이딩 하는 방식으로 이루어진다.
위의 경우, MyApp에서 빌드를 진행한다.
팁[편집 | 원본 편집]
대부분 IDE에서 ctrl+s를 통해 핫 리로드를 제공한다.(코드의 빠른 반영 확인)
학습[편집 | 원본 편집]
| 사이트 | 설명 | 비고 |
|---|---|---|
| 공식 문서 | https://docs.flutter.dev/get-started/codelab |
예제[편집 | 원본 편집]
| 사이트 | 설명 | 비고 |
|---|---|---|
| 공식 문서 | https://api.flutter.dev/ | |
| 공식 | 공식 예제 사이트. | https://flutter.github.io/samples/# |