Flutter 온라인 컴파일러
Flutter 앱을 쓰고 Run을 누르면 브라우저 속 휴대폰에서 써 볼 수 있습니다. 핫 리로드는 상태를 유지합니다. 무료, 가입 필요 없음.
설치 없이 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 온라인 컴파일러는 무료인가요?
Flutter나 에뮬레이터를 설치해야 하나요?
핫 리로드가 되나요?
어떤 패키지를 쓸 수 있나요?
package:flutter와 Dart SDK의 모든 것, 그리고 provider, flutter_riverpod, go_router, http, intl을 쓸 수 있습니다. 여기서는 pub.dev의 다른 패키지를 추가할 수 없습니다.앱에서 API를 호출하거나 인터넷 이미지를 불러올 수 있나요?
http 호출은 실패합니다. 코드에 예시 데이터를 넣고, 실제 네트워크 호출은 내 프로젝트에서 테스트하세요.print() 출력과 오류는 어디서 보나요?
lib/main.dart의 줄을 알려 주고, 실행 중 오류와 print()로 출력한 내용도 모두 여기에 나옵니다.