플러터:개요
개요
구글이 공개한 앱개발 프레임워크.
간편하게 반응형 웹페이지 따위를 개발할 수 있어 순위가 급격하게 오르는 중이다.
설치
사전준비
- IDE
- 안드로이드 스튜디오와 VSCode, IntelliJ 등 IDE를 사용할 수 있는데, 사용할 IDE가 미리 설치되어 있어야 한다.
- JDK
- Git(선택)
- 오픈소스인 만큼, 많은 개발자가 사용하는 git으로 clone해 사용할 수 있다.(설치를 마무리 할 때 자신이 사용하는 IDE로 지정해주는 것 잊지 말기)
git으로 설치
다운받을 디렉터리를 만들어준 후 명령 프롬프트에서 해당 디렉터리로 이동한다.
클론으로 복사한다. git clone -b stable https://github.com/flutter/flutter.git
그러면 해당 디렉토리 하위에 flutter라는 디렉토리를 만든다.
100%, done 이라는 텍스트가 몇 개 보이면 성공.
path
윈도우에서
제어판>시스템속성(system properties)>고급(advanced)>환경변수(environment variables) 위쪽 칸의 path를 더블클릭.
flutter를 설치한 경로를 추가해준다.(flutter디렉터리 하위의 bin까지)
IDE 연결
각자의 방법으로 연결한다. VSC의 경우, 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/# |
| Flutter Gems | 공식 예제를 익히고 난 다음 참고하면 좋을 사이트. | |