[DartPad] 설치없이 웹에서 Dart/Flutter 코딩 연습하기

[DartPad] 설치없이 웹에서 Dart/Flutter 코딩 연습하기

안녕하세요~! 

오늘은 별도의 설치없이 Flutter (플러터) 코드를 작성하고 실행해볼 수 있는 툴을 공유 드릴게요. 

Flutter는 앱 개발자라면 한번쯤 들어봤을 하이브리드앱 개발 프레임워크 입니다.

언어로는 Dart를 사용하는데, Dart라는 언어가 생소해보일 수도있지만 누구나 쉽게 배울 수 있어요.

 

 

Flutter를 사용하기전에 설치해야하는게 너무나도 많아서.. 시작하기도 전에 스트레스 받을수도있지만,

 'DartPad' 라는 툴을 사용하면 별도의 설치없이도 간단한 코드를 연습해볼 수 있습니다.

 

https://dartpad.dev/?null_safety=true&id 

DartPad

 

DartPad에 접속하면 좌우 분할된 화면을 볼 수 있는데, 왼쪽 상단의 New pad를 눌러 새로운 패드를 열 수 있습니다.

Dart를 선택하면 HTML버튼이 활성화 되는데, 버튼을 체크하면 Dart 언어로 HTML 코딩도 연습해볼 수 있습니다. 

저는 Flutter를 사용해서 간단한 모바일 앱을 코딩해보겠습니다.

 

  

중앙 상단에 있는 Run버튼을 누르면 좌측화면의 코드가 실행되고 Hellow, World! 라는 문구가 표시되는걸 볼 수 있습니다.

그럼 조금만 바꿔서 실행해볼게요.

 

 

배경색도 바꾸고 Row 위젯을 사용해서 4가지의 텍스트를 넣었어요.

Flutter를 구성하고 있는 위젯이 어떻게 동작하는지 간단하게 알아보기에는 편해보이네요.

다만 자동완성기능이 되지않기에... 주의해서 작성하셔야합니다. ㅎㅎㅎ

 

아직 취미로 간단한 앱만 조금씩 만들어보는 중인데, 조만간 스토어에 배포할 예정이니 그때 또 공유드릴게요~!