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

학교의 모든 지식. SMwiki
둘러보기로 이동 검색으로 이동
잔글 (→‎예제)
잔글 (→‎설치)
16번째 줄: 16번째 줄:
#Git(선택)
#Git(선택)
#:오픈소스인 만큼, 많은 개발자가 사용하는 git으로 clone해 사용할 수 있다.(설치를 마무리 할 때 자신이 사용하는 IDE로 지정해주는 것 잊지 말기)
#:오픈소스인 만큼, 많은 개발자가 사용하는 git으로 clone해 사용할 수 있다.(설치를 마무리 할 때 자신이 사용하는 IDE로 지정해주는 것 잊지 말기)
{| class="wikitable"
|+
!과정
!설명
!비고
|-
|Flutter SDK 설치
|zip파일로 다운받는데, 몇 가지 방법이 있다.


=== 일반적인 설치 ===
# flutter.dev(https://docs.flutter.dev/get-started/install<nowiki/>)에서 os별로 설치를 참고하자.
flutter.dev에서 os별로 설치를 참고하자.
# VS Code를 쓰면 ctrl+shift+p 에서 flutter:New Project를 입력하면 된다. 그대로 따라가면 설치됨.
# git을 이용해 <code>git clone -b stable <nowiki>https://github.com/flutter/flutter.git</nowiki></code>그러면 해당 디렉토리 하위에 flutter라는 디렉토리를 만든다. 100%, done 이라는 텍스트가 몇 개 보이면 성공.


=== git으로 설치 ===
* 찾기 좋은 곳에 압축 푼다.
다운받을 디렉터리를 만들어준 후 명령 프롬프트에서 해당 디렉터리로 이동한다.
|
|-
|안드로이드 스튜디오 설치
|
* 설치파일만 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 눌러 설치.
|
|-
|환경변수 지정.
|(최근엔 위 과정 따라 설치하면 자동으로 경로 지정 되어 있음.)


클론으로 복사한다. <code>git clone -b stable <nowiki>https://github.com/flutter/flutter.git</nowiki></code>
* 각 운영체제의 방법을 따라 경로 지정. [[윈도우:환경변수 설정]] 참고.
그러면 해당 디렉토리 하위에 flutter라는 디렉토리를 만든다.
* flutter 디렉토리 하위의 bin을 지정한다.
100%, done 이라는 텍스트가 몇 개 보이면 성공.
|
<br />
|-
 
|확인
=== path ===
|터미널에서 flutter doctor 입력.
 
어떤 환경에서의 준비가 되어 있는지 확인할 수 있다.
==== 윈도우에서 ====
|
<code>제어판>시스템속성(system properties)>고급(advanced)>환경변수(environment variables)</code> 위쪽 칸의 path를 더블클릭.
|}
 
flutter를 설치한 경로를 추가해준다.(flutter디렉터리 하위의 bin까지)
<br />


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


<syntaxhighlight lang="dart">
<syntaxhighlight lang="dart">

2024년 6월 5일 (수) 23:23 판

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

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

개요

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

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

설치

사전준비

  1. IDE
    안드로이드 스튜디오와 VSCode, IntelliJ 등 IDE를 사용할 수 있는데, 사용할 IDE가 미리 설치되어 있어야 한다.
  2. JDK
  3. Git(선택)
    오픈소스인 만큼, 많은 개발자가 사용하는 git으로 clone해 사용할 수 있다.(설치를 마무리 할 때 자신이 사용하는 IDE로 지정해주는 것 잊지 말기)
과정 설명 비고
Flutter SDK 설치 zip파일로 다운받는데, 몇 가지 방법이 있다.
  1. flutter.dev(https://docs.flutter.dev/get-started/install)에서 os별로 설치를 참고하자.
  2. VS Code를 쓰면 ctrl+shift+p 에서 flutter:New Project를 입력하면 된다. 그대로 따라가면 설치됨.
  3. git을 이용해 git clone -b stable https://github.com/flutter/flutter.git그러면 해당 디렉토리 하위에 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 doctor 입력.

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

IDE 연결

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

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

예제

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