본문으로 이동

플러터:개요: 두 판 사이의 차이

학교의 모든 지식. SMwiki
← 이전 편집
편집 취소Sam (토론 | 기여)
봇, 사무관, 인터페이스 관리자, 푸시 구독 관리자, 기록보호자, 관리자, 교사
9,264 편집
시각위키텍스트
잔글 →설치
 
(같은 사용자의 중간 판 2개는 보이지 않습니다)
42번째 줄: 42번째 줄:
::* flutter 디렉토리 하위의 bin을 지정한다.
::* flutter 디렉토리 하위의 bin을 지정한다.
* '''VS Code를 쓰는 경우.(1.77 이상.)'''
* '''VS Code를 쓰는 경우.(1.77 이상.)'''
# [필수](개발을 한다면 보통 설치되어 있을텐데..) [https://gitforwindows.org/ git 2.27] 이상을 요구한다. 설치 후 재부팅해줘야 clone이 오류 없이 되더라.(귀찮더라도 재부팅 해주고.. 문제 생기면 그때라도 재부팅 해주자.)
# [필수](개발을 한다면 보통 설치되어 있을텐데..) [https://gitforwindows.org/ git 2.27] 이상을 요구한다. 설치 후 재부팅해줘야 clone이 오류 없이 되더라.(귀찮더라도 재부팅 해주고.. 문제 생기면 그때라도 재부팅 해주자. 그냥 지금 재부팅 하는 게 좋을 걸..?)
# extentions에서 flutter를 다운받는다.
# extentions에서 flutter를 다운받는다.
# ctrl+shift+p 에서 flutter:New Project를 입력하면 된다. Download SDK부터 SDK를 설치할 폴더를 선택하면 하위에 flutter 디렉토리가 생김.(몇 분 걸림)
# ctrl+shift+p 에서 flutter:New Project를 입력하면 된다. Download SDK부터 SDK를 설치할 폴더를 선택하면 하위에 flutter 디렉토리가 생김.(몇 분 걸림)
59번째 줄: 59번째 줄:


* 윈도우 어플의 경우: 윈도우 어플을 개발하려면 비주얼스튜디오가 필요하다.(https://visualstudio.microsoft.com/downloads/)
* 윈도우 어플의 경우: 윈도우 어플을 개발하려면 비주얼스튜디오가 필요하다.(https://visualstudio.microsoft.com/downloads/)
*
== 에뮬레이터 사용하기 ==
{| class="wikitable"
!과정
!설명
!비고
|-
|안드로이드 스튜디오 설치
|휴대폰 뮬레이터를 실행하기 위해 필요한 프로그램이다.(iOS개발은 윈도우 컴에선 못함.)
* 설치파일만 1.1GB 정도.
* 설치되며 안드로이드와 관련한 이것저것이 함께 설치된다.
|https://developer.android.com/studio/install<nowiki/>https://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) 과 같은 메시지가 뜬다.
라이센스 동의 관련은 <code>flutter doctor --android-licenses</code> 를 입력해 y를 계속 입력하면 된다.
|
|}
=== 발생할 수 있는 문제 ===
{| class="wikitable"
!과정
!설명
|-
|...... to "build\flutter_assets\shaders/ink_sparkle.frag" failed with exit code -1073741819.
|보통 프로젝트나 플러터의 경로에 한글이 포함되어 있을 때 발생하는 에러이다.
{| class="wikitable"
|-
|윈도우. 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|플러터:VSCode - 학교의 모든 지식. SMwiki]]를 참고하자.)
* 프로젝트를 시작하는 방법과 에뮬레이터(가상기) 사용법에 대하여.
{| class="wikitable"
|+
!단계
!설명
!비고
|-
|안드로이드 스튜디오
|플러터의 위치를 지정하는 과정이 필요하다.
* Windows: <code>where flutter</code> 명령어 실행
* macOS/Linux: <code>which flutter</code> 명령어 실행
*애뮬레이터.
:우측 메뉴에 device manager를 통해.
|
|}
보통 처음 실행하면 에러가 뜨는데...(나중에 정리해보자...
== 기본 양식 ==
<syntaxhighlight lang="dart">
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!'),
        ),
      ),
    );
  }
}
</syntaxhighlight>기본적인 흐름은 main>runApp>위젯 형식이다. 위젯을 상속한 클래스의 build를 오버라이딩 하는 방식으로 이루어진다.
위의 경우, MyApp에서 빌드를 진행한다.
== 팁 ==
대부분 IDE에서 ctrl+s를 통해 핫 리로드를 제공한다.(코드의 빠른 반영 확인)
= 학습 =
{| class="wikitable"
!사이트
!설명
!비고
|-
|공식 문서
|
|https://docs.flutter.dev/get-started/codelab
|-
|다트 패드
|다트로 작성한 코드를 실행하는 코드 에디터. 간단한 플러터 코드를 실험해볼 수 있다.
|https://dartpad.dev/
|}
= 예제 =
{| class="wikitable"
|+
!사이트
!설명
!비고
|-
|공식 문서
|
|https://api.flutter.dev/
|-
|공식
|공식 예제 사이트.
|https://flutter.github.io/samples/#
|-
|
|
|
|-
|
|
|
|}

2026년 1월 4일 (일) 23:23 기준 최신판

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

  1. 플러터:개요
    1. 플러터:VSCode
    2. 플러터:안드로이드 스튜디오
  2. 플러터:실행
  3. 플러터:개념 잡기
    1. 플러터:화면 하나 만들기
    2. 플러터:변하는 화면(StatefulWidget)
    3. 플러터:화면 전환(화면 쌓기, 하단 네비게이션 바)
    4. 플러터:화면 전환(Drawer)
    5. 플러터:입력 관련
      1. 플러터:버튼
      2. 플러터:키보드 입력
      3. 플러터:슬라이더
    6. 플러터:그래프 그리기(fl chart)
    7. 플러터:데이터 저장(간단한 데이터)
    8. 플러터:인증(Firebase 인증)(미완)
    9. 플러터:인증(OAuth2)(미완)
  4. 권한 사용
    1. 플러터:마이크 입력
  5. 위젯
    1. 플러터:아이콘
    2. 플러터:레이아웃 계열 위젯
    3. 플러터:네비게이션 계열 위젯
    4. 플러터:버튼
    5. 플러터:상태관리(미완)
  6. 플러터:DB연결
    1. 플러터:Firebase(미완)
    2. 플러터:MySQL(미완)
  7. 디자인
    1. 플러터:테마
    2. 플러터:앱바
  8. 플러터:배포
  9. 플러터:참고자료
  10. 플러터:위젯
    1. 플러터:공간배치용 위젯
  11. 플러터:라이브러리
    1. 플러터:logger

개요

[편집 | 원본 편집]

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

  • 간편하게 반응형 웹페이지 따위를 개발할 수 있어 순위가 급격하게 오르는 중이다.
  • 일반적인 웹 툴과 다르게, UI가 먼저 있고, 여기에 변화가 생기면 구성 요소를 새롭게 불러오는 방식이다.
  • 생각보다 설치하고 시작하는 것 자체부터 고비다;; 다른사람들이 정리해둔 글을 그대로 따라해도 안되는 경우가 상당하다;; 그럴땐 침착하게 창을 껐다 켜든가 재부팅을 하는 방향으로.
  • 25년12월 기준 web이나 일반 데스크톱 OS에선 따로 구현해주어야 하는 기능들이 상당수 있다.

설치

[편집 | 원본 편집]

설치 전 유의사항

[편집 | 원본 편집]
과정 설명 비고
경로는 무조건 영어로 프로젝트 저장 경로, 플러터 언어의 경로에 절대로 영어 외의 언어가 쓰이면 안된다.(이게 참 불편한 점이다; 회사 원드라이브 경로는 한글인데..)

하여, 필자는 비고와 같이 설정하여 경로를 우회를 시도하였으나.. 이도 쉽진 않다.

윈도우. CMD에서 다음의 명령으로 가상 드라이브 생성.

subst X: "D:\OneDrive - 원주중학교\for coding computer"

설치

[편집 | 원본 편집]
과정 설명 비고
Flutter SDK 설치 zip파일로 다운받는데, 몇 가지 방법이 있다.
  1. 찾기 좋은 곳에 압축 푼다.
  2. 환경 변수 지정.
  • VS Code를 쓰는 경우.(1.77 이상.)
  1. [필수](개발을 한다면 보통 설치되어 있을텐데..) git 2.27 이상을 요구한다. 설치 후 재부팅해줘야 clone이 오류 없이 되더라.(귀찮더라도 재부팅 해주고.. 문제 생기면 그때라도 재부팅 해주자. 그냥 지금 재부팅 하는 게 좋을 걸..?)
  2. extentions에서 flutter를 다운받는다.
  3. ctrl+shift+p 에서 flutter:New Project를 입력하면 된다. Download SDK부터 SDK를 설치할 폴더를 선택하면 하위에 flutter 디렉토리가 생김.(몇 분 걸림)
  4. 이후 그대로 따라가면 설치됨.(프로젝트 생성까지 해보자.)
  • Git을 이용하는 경우.
  1. git clone -b stable https://github.com/flutter/flutter.git그러면 해당 디렉토리 하위에 flutter라는 디렉토리를 만든다. 100%, done 이라는 텍스트가 몇 개 보이면 성공.
 CMD 등에서 flutter --version 으로 설치 확인.
확인 터미널에서 flutter doctor 입력.

어떤 환경에서의 준비가 되어 있는지 확인할 수 있다.

원본 주소 "https://smwiki.info/index.php?title=플러터:개요&oldid=10871"