반응형

 

하이브리드앱으로 코르도바를 쓰다가 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 설정을 해보겠다

728x90

'Mobile > Hybrid' 카테고리의 다른 글

Flutter 프로젝트 시작하기 - 페이지 이동  (0) 2025.03.25
Cordova (코르도바) 시작하기  (1) 2024.09.06

+ Recent posts