하이브리드앱으로 코르도바를 쓰다가 html, css, js 범벅이 힘들어서 flutter를 공부해봤다.
기본적인 jdk, gradle 은 있다고 생각하겠다.
1. Flutter SDK 다운로드
https://docs.flutter.dev/release/archive
Flutter SDK archive
All current Flutter SDK releases: stable, beta, and main.
docs.flutter.dev
(Windows 기준)
이곳에서 stable SDK 버전을 다운받고 개인 PC 내 특정 폴더에 위치시킨다.
그리고 환경변수 PATH 에 해당 위치를 등록.
나의 경우는 D:\bin\flutter\bin 이었고 bin 까지만 하면된다
2. IntelliJ 플러그인 flutter 추가
File -> Setting -> Plugins -> Dart, Flutter 플러그인을 추가한다.
3. 프로젝트 생성
New Project -> Flutter 생성한다.
이때 Flutter SDK Path 에 내가 환경변수에 설정했던 flutter 위치가 와있으면 성공
패키지명 설정해서 대강 만들고 실행하면 된다.
나는 ios, android 만 만들거라서 이렇게했는데
빌드할때마다 모바일로 보지말고 web을 선택해서 browser도 확인하는것도 좋을것같다.
4. 개발시작
main.dart 가 첫 시작이다.
보통 lib > main.dart 얘를 index로 보는거같고 각종 header, footer 와 같은 layout 성 화면들을 [widgets]폴더에,
기타화면은 [screens] 폴더에 넣는것같다
하여간 처음 실행시키면 main.dart 에 알수없는 코드가 많은데 싹다지우자
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: Text("test")
);
}
}
이렇게 설정해주면 아래와 같이 보일것이다.
나는 갤럭시 23을 테스트모델로 작업했고, release 버전이 아닌 이상, 보이는바와 같이 우측상단에 DEBUG 라고 보인다.
다음포스팅에선 페이지이동과 layout 설정을 해보겠다
'Mobile > Hybrid' 카테고리의 다른 글
Flutter 프로젝트 시작하기 - 페이지 이동 (0) | 2025.03.25 |
---|---|
Cordova (코르도바) 시작하기 (1) | 2024.09.06 |