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

학교의 모든 지식. SMwiki
둘러보기로 이동 검색으로 이동
잔글 (→‎설치)
 
(같은 사용자의 중간 판 14개는 보이지 않습니다)
2번째 줄: 2번째 줄:


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


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


= 설치 =
= 설치 =
17번째 줄: 16번째 줄:
|zip파일로 다운받는데, 몇 가지 방법이 있다.
|zip파일로 다운받는데, 몇 가지 방법이 있다.


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


* 찾기 좋은 곳에 압축 푼다.
|CMD 등에서 flutter --version 으로 설치 확인.
|-
|확인
|터미널에서 flutter doctor 입력.
어떤 환경에서의 준비가 되어 있는지 확인할 수 있다.
|
|
* 라이센스 동의 관련은 flutter doctor --android-licenses 로 들어가 y를 계속 입력하면 된다.
|-
|-
|안드로이드 스튜디오 설치
|안드로이드 스튜디오 설치
|
|휴대폰 뮬레이터를 실행하기 위해 필요한 프로그램이다.(iOS개발은 윈도우 컴에선 못함.)
* 설치파일만 1.1GB 정도.
* 설치파일만 1.1GB 정도.
* 설치되며 안드로이드와 관련한 이것저것이 함께 설치된다.
* 설치되며 안드로이드와 관련한 이것저것이 함께 설치된다.
|https://developer.android.com/studio/install
|https://developer.android.com/studio/install<nowiki/>https://developer.android.com/studio?hl=ko#get-android-studio
|-
|-
|안드로이드 스튜디오 설정
|안드로이드 스튜디오 설정
37번째 줄: 50번째 줄:
|
|
|-
|-
|환경변수 지정.
|기기 추가
|(최근엔 위 과정 따라 설치하면 자동으로 경로 지정 되어 있음.)
|Configure에서 AVD manager를 선택하여 버츄얼 디바이스를 설치한다.(보통 픽쳐를 선택)
 
* Projects에서 device manager에서 기기를 추가하거나 삭제할 수 있다. 잘 따라가면 문제 없음.
* 각 운영체제의 방법을 따라 경로 지정. [[윈도우:환경변수 설정]] 참고.
* Projects가 없는 경우 메인페이지에서 more options 등에서 device manager에 접근할 수 있다.
* flutter 디렉토리 하위의 bin을 지정한다.
|
|
* 기기를 선택하여 실행하고 setting에서 view mode를 float으로 바꾸면 보기 편하다.
* 구석 부분을 드래그하여 화면 크기를 조절할 수 있는데.. 요령이 필요하다;
|-
|-
|확인
|
|터미널에서 flutter doctor 입력.
|
어떤 환경에서의 준비가 되어 있는지 확인할 수 있다.
|
|
|}
|}
52번째 줄: 65번째 줄:
= 시작 =
= 시작 =


* 안드로이드 스튜디오에서 프로젝트로 시작하든, vscode에서 시작하든.
* 안드로이드 스튜디오에서 프로젝트로 시작하든, vscode에서 시작하든.(이 챕터 이후 VScode 세팅 등은 [[플러터:VSCode|플러터:VSCode - 학교의 모든 지식. SMwiki]]를 참고하자.)
* 유의할 점은 프로젝트 저장 경로, 플러터 언어의 경로에 절대로 영어 외의 언어가 쓰이면 안된다.(이게 참 불편한 점이다; 회사 원드라이브 경로는 한글인데..)
* 프로젝트를 시작하는 방법과 에뮬레이터(가상기) 사용법에 대하여.
* 프로젝트를 시작하는 방법과 에뮬레이터(가상기) 사용법에 대하여.


{| class="wikitable"
{| class="wikitable"
|+
|+
!
!단계
!
!설명
!
!비고
|-
|-
|VSCode
|설치
|ctrl+shift+p에서 flutter를 기입해 적절한 것을 선택해 시작한다.
|
애뮬레이터
우측 하단에 자신이 사용하고 있는 OS 이름이 있을 텐데, 이곳에서 에뮬레이를 고를 수 있다.
|
|
|-
|-
73번째 줄: 85번째 줄:
* macOS/Linux: <code>which flutter</code> 명령어 실행
* macOS/Linux: <code>which flutter</code> 명령어 실행


에뮬레이터.
*애뮬레이터.
 
:우측 메뉴에 device manager를 통해.
우측 메뉴에 device manager를 통해.
|
|
|-
|-
82번째 줄: 93번째 줄:
|
|
|}
|}
vscode ctrl+shift+p에서 Emulator 선택하면 쓸 수 있다.(세팅에서 항상 top에 있게 하면 보기 편하다.)
 


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


 
== 기본 양식 ==
 
어려워서  안드로이드 스튜디오로 넘어간다.
 
device manager에서 기기를 선택하여 실행하고 setting에서 view mode를 float으로 바꾸면 보기 편하다.
 
=== IDE 연결 ===
각자의 방법으로 연결한다. VSCode의 경우, extention에서 flutter를 검색하면 설치할 수 있다.
 
<syntaxhighlight lang="dart">
<syntaxhighlight lang="dart">
import 'package:flutter/material.dart';  // 마테리얼 디자인 관련 라이브러리.(안드로이드 방식. 이지만 ios도 지원)
import 'package:flutter/material.dart';  // 마테리얼 디자인 관련 라이브러리.(안드로이드 방식. 이지만 ios도 지원)
119번째 줄: 122번째 줄:


</syntaxhighlight>기본적인 흐름은 main>runApp>위젯 형식이다. 위젯을 상속한 클래스의 build를 오버라이딩 하는 방식으로 이루어진다.
</syntaxhighlight>기본적인 흐름은 main>runApp>위젯 형식이다. 위젯을 상속한 클래스의 build를 오버라이딩 하는 방식으로 이루어진다.
== 팁 ==
대부분 IDE에서 ctrl+s를 통해 핫 리로드를 제공한다.(코드의 빠른 반영 확인)


= 예제 =
= 예제 =

2024년 9월 20일 (금) 14:55 기준 최신판

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

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

개요[편집 | 원본 편집]

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

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

설치[편집 | 원본 편집]

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

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

  • 라이센스 동의 관련은 flutter doctor --android-licenses 로 들어가 y를 계속 입력하면 된다.
안드로이드 스튜디오 설치 휴대폰 뮬레이터를 실행하기 위해 필요한 프로그램이다.(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를 Apply 눌러 설치.
기기 추가 Configure에서 AVD manager를 선택하여 버츄얼 디바이스를 설치한다.(보통 픽쳐를 선택)
  • Projects에서 device manager에서 기기를 추가하거나 삭제할 수 있다. 잘 따라가면 문제 없음.
  • Projects가 없는 경우 메인페이지에서 more options 등에서 device manager에 접근할 수 있다.
  • 기기를 선택하여 실행하고 setting에서 view mode를 float으로 바꾸면 보기 편하다.
  • 구석 부분을 드래그하여 화면 크기를 조절할 수 있는데.. 요령이 필요하다;

시작[편집 | 원본 편집]

  • 안드로이드 스튜디오에서 프로젝트로 시작하든, vscode에서 시작하든.(이 챕터 이후 VScode 세팅 등은 플러터:VSCode - 학교의 모든 지식. SMwiki를 참고하자.)
  • 유의할 점은 프로젝트 저장 경로, 플러터 언어의 경로에 절대로 영어 외의 언어가 쓰이면 안된다.(이게 참 불편한 점이다; 회사 원드라이브 경로는 한글인데..)
  • 프로젝트를 시작하는 방법과 에뮬레이터(가상기) 사용법에 대하여.
단계 설명 비고
설치
안드로이드 스튜디오 플러터의 위치를 지정하는 과정이 필요하다.
  • Windows: where flutter 명령어 실행
  • macOS/Linux: which flutter 명령어 실행
  • 애뮬레이터.
우측 메뉴에 device manager를 통해.


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

기본 양식[편집 | 원본 편집]

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/#