Menu
CoddyTech

Flutter 온라인 컴파일러

Flutter 앱을 쓰고 Run을 누르면 브라우저 속 휴대폰에서 써 볼 수 있습니다. 핫 리로드는 상태를 유지합니다. 무료, 가입 필요 없음.

lib/main.dart

설치 없이 Flutter 앱을 온라인으로 실행하세요

lib/main.dart에 Flutter 앱을 쓰고 Run을 누르면 이 페이지 안의 휴대폰에서 바로 앱을 써 볼 수 있습니다. 코드는 Flutter 3.41.7과 Dart 3로 컴파일되고, 실제 Flutter 웹 엔진이 앱을 실행하므로 위젯, 레이아웃, 제스처, 애니메이션이 Flutter 웹 빌드와 똑같이 동작합니다.

먼저 예제를 골라 보세요. setState 카운터, 할 일 목록, 회원가입 폼, provider 장바구니, flutter_riverpod 앱, 다크 모드 스위치, 애니메이션이 있습니다. 코드를 바꾸고 Hot reload를 누르면 앱이 상태를 유지한 채 업데이트됩니다. 위젯을 시험하고, 레이아웃을 확인하고, 상태 관리가 어떻게 동작하는지 보기 좋은 곳입니다. SDK도, 에뮬레이터도, 설정도 필요 없습니다.

이 Flutter 플레이그라운드로 할 수 있는 것

  • 진짜 Flutter SDK: 코드는 Flutter 3.41.7과 Dart 3로 컴파일되고, Flutter 웹 엔진이 휴대폰 화면 안에 앱을 그립니다.
  • flutter run과 같은 핫 리로드: 코드를 바꾸면 앱이 상태를 잃지 않고 업데이트됩니다. 처음부터 다시 시작하려면 Run을 누르세요.
  • 휴대폰 아래의 콘솔: print()로 출력한 모든 내용과 줄 번호가 표시되는 컴파일 오류가 여기에 나옵니다.
  • 바로 import할 수 있는 패키지: provider, flutter_riverpod, go_router, intl, 그리고 package:flutter의 모든 것.
  • 입력하는 동안 코드가 브라우저에 저장됩니다. 복사하거나 main.dart를 내려받아 내 프로젝트에서 이어서 작업하세요.

Flutter 플레이그라운드에서 만들 수 있는 것

  • Scaffold, AppBar, Column, Row, ListView로 만든 화면. 레이아웃이 어떻게 동작하는지 알 수 있습니다.
  • StatefulWidget과 setState로 만든 인터랙티브 위젯: 카운터, 체크리스트, 스위치, 입력 검사가 있는 폼.
  • provider(ChangeNotifier)와 flutter_riverpod(Notifier, ProviderScope)를 이용한 상태 관리.
  • 테마, 다크 모드, 기준 색에서 만든 Material 3 색상, AnimatedContainer 같은 애니메이션.

Flutter 온라인 컴파일러 자주 묻는 질문

이 Flutter 온라인 컴파일러는 무료인가요?
네. 무료이고 계정도 필요 없습니다. 페이지를 열고 코드를 고친 다음 Run을 누르면 됩니다.
Flutter나 에뮬레이터를 설치해야 하나요?
아니요. 코드는 Coddy 서버에서 Flutter 3.41.7로 컴파일되고, 앱은 브라우저 안의 휴대폰 화면에서 실행됩니다. 최신 브라우저만 있으면 됩니다.
핫 리로드가 되나요?
네. 코드를 바꾼 뒤 Hot reload를 누르면 카운터 값 같은 상태를 유지한 채 앱이 업데이트됩니다. 클래스 구조를 바꾸는 것처럼 일부 변경은 재시작이 필요하며, 이때는 플레이그라운드가 앱을 다시 실행해 줍니다.
어떤 패키지를 쓸 수 있나요?
package:flutter와 Dart SDK의 모든 것, 그리고 provider, flutter_riverpod, go_router, http, intl을 쓸 수 있습니다. 여기서는 pub.dev의 다른 패키지를 추가할 수 없습니다.
앱에서 API를 호출하거나 인터넷 이미지를 불러올 수 있나요?
안정적으로는 안 됩니다. 앱은 자체 출처가 없는 격리된 화면 안에서 실행되기 때문에 대부분의 API와 이미지 서버가 요청을 거부하고, http 호출은 실패합니다. 코드에 예시 데이터를 넣고, 실제 네트워크 호출은 내 프로젝트에서 테스트하세요.
print() 출력과 오류는 어디서 보나요?
휴대폰 아래의 콘솔에서 볼 수 있습니다. 컴파일 오류는 lib/main.dart의 줄을 알려 주고, 실행 중 오류와 print()로 출력한 내용도 모두 여기에 나옵니다.
써 본 다음 Flutter는 어떻게 배우나요?
예제를 바꿔 보며 무엇이 달라지는지 확인해 보세요. 단계별로 배우고 싶다면 Coddy의 Flutter 강좌가 위젯, 레이아웃, 상태, 화면 이동을 짧은 레슨으로 가르쳐 줍니다. 앱은 여기와 같은 휴대폰에서 실행됩니다.