한이음 프로젝트에서 플러터를 이용해서 모바일 앱 개발을 기획하고 있어서 종강을 하고 플러터를 공부하고 있습니다. 노마드 코더의 무료 강의로 공부를 하고 있는데, 강의 내용이 정말 좋아서 따라하면서 배우기 쉬운 것 같습니다. 이 글에서는 제가 처음 플러터를 공부하면서 느꼈던 장점들과 플러터로 기본적인 UI를 만드는 방법들에 대해 작성해보려 합니다.
Flutter 로 웹툰 앱 만들기 – 노마드 코더 Nomad Coders
Flutter for Beginners
nomadcoders.co
아래는 노마드 코더의 강의를 보며 따라서 만들어본 간단한 UI입니다. StatelessWidget으로만 구성되어 아직 기능은 없습니다. 이 글에서는 StatelessWidget으로 만드는 간단한 UI 그리는 방법들과 제가 경험한 엄청난 플러터의 개발 환경을 소개해보려 합니다.
💻 플러터의 개발 환경
디버깅 버튼을 클릭하면 아래와 같이 시뮬레이터를 선택할 수 있습니다. 저는 안드로이드 시뮬레이터는 사용해보고 그닥 좋지 않다고 생각하기도 하였고, 아이폰 시뮬레이터는 전혀 사용해보지 않아서 이번에는 아이폰 시뮬레이터를 사용해보았습니다!
VSCode에서 디버깅 버튼을 누르면 아래와 같이 플러터에서 제공해주는 디버깅 환경을 볼 수 있습니다. ⚡️(hot reload)와 🔍(Widget Inspector)가 플러터의 장점인 디버깅 기능들입니다.
1. Hot reload ⚡️
우선, hot reload는 코드의 수정사항을 바로바로 시뮬레이터에서 확인할 수 있습니다. 또다시 빌드해야 할 필요가 없습니다. 이번 학기 모바일 프로그래밍 수업을 들으면서 안드로이드 개발을 하였는데, 코드 한 줄만 고쳐도 다시 빌드해서 확인해야 하는 작업이 가장 시간이 오래 걸려서 생산성을 매우 떨어뜨린다는 것을 직접 경험할 수 있었습니다. 하지만, 플러터에서는 코드 수정사항이 바로바로 반영되어 실시간으로 눈으로 확인이 가능합니다. 역시 UI 작업에 최적화된 프레임워크라는 것을 체감하였습니다.
2. Widget Inspector 🔍
Widget Inspector page입니다. 여기서는 내가 만든 위젯과 그 속성값들을 아주 직관적으로 확인할 수 있습니다. 위젯간의 부모자식관계와 정렬 속성 등, 코드에서는 한눈에 보기 어려운 것들을 Widget Inspector가 다 그려줍니다. 진짜 미친 것 같아요.. 또, Widget Inspector에서 여러가지 속성값을 클릭해가면서 바꾸면 화면에서 어떻게 바뀌는지 보여줍니다..! 코드 수정 없이 속성 값을 바꿔가면서 확인할 수 있어요..! 🫢
🎨 플러터에서 기본적인 UI 그리기 - Stateless Widget
1. 루트 클래스 (StatelessWidget 상속)
우선, main() 함수가 가장 먼저 불립니다. main함수에서는 runApp메서드로 앱의 루트가 되는 클래스를 부릅니다. 아래 코드에서는 App()이라는 클래스가 루트 클래스가 됩니다. 그리고 App은 Widget타입이어야 하는데, 기본적으로 상태값이 없는 위젯을 만들기 위해서는 StatelessWidget을 상속받습니다. 그리고 StatelessWidget의 build() 메서드를 오버라이딩하여 UI를 그려보겠습니다.
2. 모든 것은 클래스..!
build() 메서드는 MaterialApp이라는 클래스를 리턴하고, home이라는 이름의 파라미터를 Scaffold라는 클래스 타입으로 받고 있습니다. body라는 이름의 파라미터는 SingleChildScrollView로 받고 있네요. SingleChildScrollView는 child로 Padding이라는 클래스를 가지고 있습니다. 또 패딩은 child로 Column이라는 클래스를 가집니다. UI를 보면 컴포넌트들이 세로로 나열되어있기 때문에 Column안에 컴포넌트들을 children에 넣어줍니다. children에는 세로로 나열되어있는 SizedBox, Row, Text, CurrencyCard(CurrencyCard는 커스텀 위젯입니다.) 등등이 리스트 안에 담겨있습니다. 그리고 각각의 컴포넌트들은 또 child들을 가질 것입니다. 대충 이런식으로 UI를 구성할 수 있습니다.
각각의 클래스가 어떤 역할을 하는지는 설명하지 않겠습니다. 공식 문서를 참고하거나 직접 코드를 참고하는 것이 훨씬 정확하고 쉬울 것 같습니다.
개인적으로 플러터를 왜 이제야 배웠지... 후회가 될 정도로 너무 좋은 프레임워크라는 생각이 들었습니다. 아직 초보이지만, 플러터를 이용하여 개발하는 것이 너무 재미있어서 앞으로도 계속 사용하여 개발해야겠다는 생각도 들었습니다. 원체 백엔드 개발만 주로 했어서 그런지, 이렇게 직관적인 예쁜 플러터의 개발 환경이 정말 마음에 들었던 것 같아요...♡ 스프링 이제 쳐다도 안 볼 것 같은데여,,,🍃
'flutter' 카테고리의 다른 글
| 🎯 1시간 안에 다트 뽀개볼래? (0) | 2023.06.18 |
|---|---|
| [Flutter] Test Drive (앱 구동 시켜보기) (0) | 2021.05.17 |
| [Flutter] 시작하기 + 설치 + Editor 설정 방법 (0) | 2021.05.17 |
댓글