플러터:개요 편집하기

{{플러터}}

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

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

= 설치 =
{| class="wikitable"
|+
!과정
!설명
!비고
|-
|Flutter SDK 설치
|zip파일로 다운받는데, 몇 가지 방법이 있다.

* flutter.dev(https://docs.flutter.dev/get-started/install<nowiki/>)에서 os별로 설치를 참고하자.https://docs.flutter.dev/get-started/install/windows/desktop#143-tab-panel
* VS Code를 쓰는 경우.
# 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 이라는 텍스트가 몇 개 보이면 성공.

* 찾기 좋은 곳에 압축 푼다.
|
|-
|안드로이드 스튜디오 설치
|
* 설치파일만 1.1GB 정도.
* 설치되며 안드로이드와 관련한 이것저것이 함께 설치된다.
|https://developer.android.com/studio/install
|-
|안드로이드 스튜디오 설정
|
* plugins에서 flutter 검색. 설치한다.
* projects에서 more actions>SDK Manager, Android SDK>SDK Tools>Android SDK command-line Tools를 Apply 눌러 설치.
|
|-
|환경변수 지정.
|(최근엔 위 과정 따라 설치하면 자동으로 경로 지정 되어 있음.)

* 각 운영체제의 방법을 따라 경로 지정. [[윈도우:환경변수 설정]] 참고.
* flutter 디렉토리 하위의 bin을 지정한다.
|
|-
|확인
|터미널에서 flutter doctor 입력.
어떤 환경에서의 준비가 되어 있는지 확인할 수 있다.
|
|}

= 시작 =

* 안드로이드 스튜디오에서 프로젝트로 시작하든, vscode에서 시작하든.
* 프로젝트를 시작하는 방법과 에뮬레이터(가상기) 사용법에 대하여.

{| class="wikitable"
|+
!
!
!
|-
|VSCode
|ctrl+shift+p에서 flutter를 기입해 적절한 것을 선택해 시작한다.
애뮬레이터
우측 하단에 자신이 사용하고 있는 OS 이름이 있을 텐데, 이곳에서 에뮬레이를 고를 수 있다.
|
|-
|안드로이드 스튜디오
|플러터의 위치를 지정하는 과정이 필요하다.

* Windows: <code>where flutter</code> 명령어 실행
* macOS/Linux: <code>which flutter</code> 명령어 실행

에뮬레이터.

우측 메뉴에 device manager를 통해.
|
|-
|
|
|
|}
vscode ctrl+shift+p에서 Emulator 선택하면 쓸 수 있다.(세팅에서 항상 top에 있게 하면 보기 편하다.)

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



어려워서  안드로이드 스튜디오로 넘어간다.

device manager에서 기기를 선택하여 실행하고 setting에서 view mode를 float으로 바꾸면 보기 편하다.

=== IDE 연결 ===
각자의 방법으로 연결한다. VSCode의 경우, extention에서 flutter를 검색하면 설치할 수 있다.

<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를 오버라이딩 하는 방식으로 이루어진다.

= 예제 =
{| class="wikitable"
|+
!사이트
!설명
!비고
|-
|공식 문서
|
|https://api.flutter.dev/
|-
|공식
|공식 예제 사이트.
|https://flutter.github.io/samples/#
|-
|
|
|
|-
|
|
|
|}