플러터:개요
개요
구글이 공개한 앱개발 프레임워크. Software Development Kit.
간편하게 반응형 웹페이지 따위를 개발할 수 있어 순위가 급격하게 오르는 중이다.
설치
| 과정 | 설명 | 비고 |
|---|---|---|
| Flutter SDK 설치 | zip파일로 다운받는데, 몇 가지 방법이 있다.
|
CMD 등에서 flutter --version 으로 설치 확인. |
| 안드로이드 스튜디오 설치 |
|
https://developer.android.com/studio/installhttps://developer.android.com/studio?hl=ko#get-android-studio |
| 안드로이드 스튜디오 설정 |
|
|
| 기기 추가 |
|
|
| 확인 | 터미널에서 flutter doctor 입력.
어떤 환경에서의 준비가 되어 있는지 확인할 수 있다. |
|
시작
- 안드로이드 스튜디오에서 프로젝트로 시작하든, vscode에서 시작하든.
- 유의할 점은 프로젝트 저장 경로, 플러터 언어의 경로에 절대로 영어 외의 언어가 쓰이면 안된다.(이게 참 불편한 점이다; 회사 원드라이브 경로는 한글인데..)
- 프로젝트를 시작하는 방법과 에뮬레이터(가상기) 사용법에 대하여.
| VSCode |
|
에뮬 켜는 데 시간 좀 걸린다. |
| 안드로이드 스튜디오 | 플러터의 위치를 지정하는 과정이 필요하다.
|
|
vscode ctrl+shift+p에서 Emulator 선택하면 쓸 수 있다.(세팅에서 항상 top에 있게 하면 보기 편하다.)
보통 처음 실행하면 에러가 뜨는데...(나중에 정리해보자...
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를 오버라이딩 하는 방식으로 이루어진다.
팁
대부분 IDE에서 ctrl+s를 통해 핫 리로드를 제공한다.(코드의 빠른 반영 확인)
예제
| 사이트 | 설명 | 비고 |
|---|---|---|
| 공식 문서 | https://api.flutter.dev/ | |
| 공식 | 공식 예제 사이트. | https://flutter.github.io/samples/# |