플러터:개요

틀:플러터 Dart:개요 플러터에 대한 지식 분류

1. 플러터:개요
   1. 플러터:VSCode
2. 플러터:배포
3. 플러터:참고자료
4. 플러터:위젯
   1. 플러터:공간배치용 위젯
5. 플러터:라이브러리
   1. 플러터:logger
6. 플러터:DB활용
   1. 플러터:Firebase
   2. 플러터:MySQL

개요

구글이 공개한 앱개발 프레임워크. Software Development Kit.

간편하게 반응형 웹페이지 따위를 개발할 수 있어 순위가 급격하게 오르는 중이다.

생각보다 설치하고 시작하는 것 자체부터 고비다;; 다른사람들이 정리해둔 글을 그대로 따라해도 안되는 경우가 상당하다;; 그럴땐 침착하게 창을 껐다 켜든가 재부팅을 하는 방향으로.

설치

설치 전 유의사항

과정	설명	비고
경로는 무조건 영어로	프로젝트 저장 경로, 플러터 언어의 경로에 절대로 영어 외의 언어가 쓰이면 안된다.(이게 참 불편한 점이다; 회사 원드라이브 경로는 한글인데..) 하여, 필자는 비고와 같이 설정하여 경로를 우회하였다.	윈도우. CMD에서 다음의 명령으로 가상 드라이브 생성. subst X: "D:\OneDrive - 원주중학교\for coding computer"

설치

과정	설명	비고
Flutter SDK 설치	zip파일로 다운받는데, 몇 가지 방법이 있다. 직접 다운받는 경우. flutter.dev(https://docs.flutter.dev/get-started/install)에서 os별로 설치를 참고하자. 윈도우라면 다음의 링크를 바로 이용. https://docs.flutter.dev/get-started/install/windows/desktop#143-tab-panel 찾기 좋은 곳에 압축 푼다. 환경 변수 지정. 각 운영체제의 방법을 따라 경로 지정. 윈도우:환경변수 설정 참고. flutter 디렉토리 하위의 bin을 지정한다. VS Code를 쓰는 경우.(1.77 이상.) [필수](개발을 한다면 보통 설치되어 있을텐데..) git 2.27 이상을 요구한다. 설치 후 재부팅해줘야 clone이 오류 없이 되더라.(귀찮더라도 재부팅 해주고.. 문제 생기면 그때라도 재부팅 해주자.) extentions에서 flutter를 다운받는다. ctrl+shift+p 에서 flutter:New Project를 입력하면 된다. Download SDK부터 SDK를 설치할 폴더를 선택하면 하위에 flutter 디렉토리가 생김.(몇 분 걸림) 이후 그대로 따라가면 설치됨.(프로젝트 생성까지 해보자.) Git을 이용하는 경우. git clone -b stable https://github.com/flutter/flutter.git그러면 해당 디렉토리 하위에 flutter라는 디렉토리를 만든다. 100%, done 이라는 텍스트가 몇 개 보이면 성공.	CMD 등에서 flutter --version 으로 설치 확인.
확인	터미널에서 flutter doctor 입력. 어떤 환경에서의 준비가 되어 있는지 확인할 수 있다.

• 윈도우의 경우: 윈도우 어플을 개발하려면 비주얼스튜디오가 필요하다.(https://visualstudio.microsoft.com/downloads/)

발생할 수 있는 문제

과정	설명
...... to "build\flutter_assets\shaders/ink_sparkle.frag" failed with exit code -1073741819.	보통 프로젝트나 플러터의 경로에 한글이 포함되어 있을 때 발생하는 에러이다. 윈도우. CMD에서 다음의 명령으로 가상 드라이브 생성. subst X: "D:\OneDrive - 원주중학교\for coding computer" 이렇게 경로를 바꿔주는 경우, 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를 참고하자.)
• 프로젝트를 시작하는 방법과 에뮬레이터(가상기) 사용법에 대하여.

단계	설명	비고
설치
안드로이드 스튜디오	플러터의 위치를 지정하는 과정이 필요하다. Windows: where flutter 명령어 실행 macOS/Linux: which flutter 명령어 실행 애뮬레이터. 우측 메뉴에 device manager를 통해.

보통 처음 실행하면 에러가 뜨는데...(나중에 정리해보자...

에뮬레이터 사용하기

안드로이드 스튜디오 설치	휴대폰 뮬레이터를 실행하기 위해 필요한 프로그램이다.(iOS개발은 윈도우 컴에선 못함.) 설치파일만 1.1GB 정도. 설치되며 안드로이드와 관련한 이것저것이 함께 설치된다.	https://developer.android.com/studio/installhttps://developer.android.com/studio?hl=ko#get-android-studio
안드로이드 스튜디오 설정	plugins에서 flutter 검색. 설치한다. projects에서 more actions>SDK Manager, Android SDK>SDK Tools>Android SDK command-line Tools(latest)를 Apply 눌러 설치.
기기 추가	Projects에서 Virtual Device Manager에서 기기를 추가하거나 삭제할 수 있다. 잘 따라가면 문제 없음. Projects가 없는 경우 메인페이지에서 more options 등에서 device manager에 접근할 수 있다.	기기를 선택하여 실행하고 setting에서 view mode를 float으로 바꾸면 보기 편하다. 구석 부분을 드래그하여 화면 크기를 조절할 수 있는데.. 요령이 필요하다;
라이센스 동의	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를 오버라이딩 하는 방식으로 이루어진다.

팁

대부분 IDE에서 ctrl+s를 통해 핫 리로드를 제공한다.(코드의 빠른 반영 확인)

예제

사이트	설명	비고
공식 문서		https://api.flutter.dev/
공식	공식 예제 사이트.	https://flutter.github.io/samples/#