“실전 Flutter – Flutter 시작하기” 편에 오신 것을 환영합니다.
Flutter 강좌, 유튜브등 공부할 수 있는 Contents는 차고 넘칩니다.
그럼 저는 무엇이 다르고 싶냐면, 우선 문법, 예제풀이을 조각조각 연습하는 것 말고 실제로 상용화하는데 필요한 기술들을 실질적으로 다루고자 합니다.
제가 이론적으로만 이해하고 있을때와 상용화를 마치고 나서는 무엇을 알아야 하는지 차이가 있다는걸 알게되었기 때문입니다.
그리고 과정중에 소통을 많이 하고 실제로 앱을 만들어나가는 과정을 함께 했으면 합니다.
소통하는 방법은 고민중인데 우선은 영상을 생각하고 있습니다.
Flutter
Flutter는 구글의 Cross Platform SDK로써 오픈 소스 프로젝트입니다.
언어는 Dart입니다.
Flutter를 시작하게되면 Reactive Native나 Xamarin같은 다른 Cross Platform과 뭐가 다르냐는 질문을 많이 받을 것입니다.
Architecture적인 차이가 있고 설명이 가능하지만 편한 상대에게 설명한다면 Java script를 잘하시는 분이면 Flutter보다는 Reactive Native에 먼저 관심을 갖으실거고 그렇지 않은 분들은 어차피 공부해야 한다는 생각에 Dart 시작해도 좋다고 해도 되지 않을까 합니다.
그래도 정리가 필요하시다면 다음에 다시 정리 한번 하겠습니다.
제가 몰라서 넘어가는건 절대 아니니 오해는 하지 말아주세요. ^^;
어차피 이미 여기까지 읽은신 분은 그냥 Flutter하세요. 후회하지는 않습니다.
플러터를 설치하는 방법은 플러터 홈페이지에 가면 잘 설명되어 있습니다.
저의 개발환경
오히려 실제 개발 과정을 공유할때는 개발 환경을 먼저 설명하는게 중요합니다.
그래야지 똑같이 했는데 다른 현상에 대한 오해가 없고 제가 영상을 목표로 하고 있기 때문에 영상을 봤을때 더더욱 이해하기 쉽기 때문입니다.
전 Mac Book M1 air, Android Studio, IdeaVIM Plugin, Flutter는 3.x 최신을 사용합니다.
아 그리고 Emulator로 개발하시려고 하시지 마시고 초기 개발 과정에서는 그냥 Web build를 사용하심을 권장해드립니다.
이후 Platform 연관성이 높아지면 실제 단말을 연결해서 개발하는 것을 권장해드립니다.
Hello World!
새로운 언어의 기본 코스 Hello World!는 한번 하고 가셔야죠.
새 Flutter Project를 만들고 나면 아래와 같이 Folder Tree가 자동으로 구성됩니다.
android, ios, web 각 Platform을 위한 code들이 위치합니다.
그리고 실제 Flutter Code는 lib folder밑에 main.dart 에서 시작합니다.
첫 프로젝트를 생성하고 들어가면 Default Code가 있습니다만 과감히 지워버립니다.
그리고 다음과 같이 코딩합니다.
주석을 잘 살펴봐주시고 번호를 잘 봐주세요.
중요 포인트를 번호로 지정하여 아래에서 설명하겠습니다.
import 'package:flutter/material.dart';
void main() { // 1. 시작 포인트
runApp(const MyApp()); // 2. Root Widget Rendering 하기, 즉, MyApp이 Root Widget입니다.
}
class MyApp extends StatelessWidget { // 3. StatelessWidget은 내부에 상태를 갖지 않은 Widget이고
// StatefulWidget은 내부에 상태를 갖는 Widget입니다.
const MyApp({Key? key}) : super(key: key); // 4. Key를 외부에서 지정할 수 있도록 하기 위해서 key를 받을 수도 있도록 합니다.
@override
Widget build(BuildContext context) { // 5. Rendering될때 호출되는 build method입니다.
return const MaterialApp( // 6. Material Style을 구현한 Widget, iOS Style은 CupertinoApp입니다.
home: Scaffold( // 7. Scaffold는 Material Style Layout으로 AppBar, Body, FloatingButton등으로 구성됩니다.
body: Center( // 8. Center Widget으로 child widget들은 center로 정렬됩니다.
child: Text('Hello World!') // 9. Text Widget으로 'Hello World!'를 Display합니다.
)
)
);
}
}짜잔~! 다음과 같이 결과를 볼 수 있습니다.
코드 중요 포인트
3. StatelessWidget 는 상태가 없어야 한다기보다 상태를 내부에 갖을 필요가 없다는 의미이기에 실제는 외부에 있는 경우에도 사용합니다.
초반에 가장 헷갈릴 포인트이기도 하고 실전 Flutter에서 상태 관리는 중요한 핵심이 됩니다.
4. Key를 외부에서 지정하여 Widget을 생성하는 경우는 많이 사용되는 경우가 아니니 나중에 필요시 설명 예정입니다.
6. CupertinoApp을 이용하여도 Android에서 잘 작동합니다. 혹시 오해가 있는 분이 계실까봐 언급합니다.
8. Center가 Widget의 Tree에 속해 있는 것을 Flutter Widget Layout Tree의 특징이라고 설명하지만 실제로 개발해보면 그렇게 중요한 포인트가 아닙니다.
Widget Layout Tree
Flutter Inspector 기능을 사용하여 Layout을 보겠습니다.
앗! 그런데 Android Studio에서 Flutter Inspector가 안되네요.
전에 아래 화면을 캡쳐해둘때까지는 됐었는데 말입니다.
DevTools를 실행해서 하는 방법은 다음 블로그에 정리하겠습니다.
아래의 그림을 보시면 Layout Tree가 MyApp – MaterialApp – Scaffold – Center – Text 로 계층을 이루고 있음을 확인할 수 있습니다.
Center와 같은 layout 처리는 Attribute로 처리되는 경우가 많은데 Flutter에서는 Widget으로도 처리가 가능한 것일뿐 내부를 보면 분명 부모 Widget이 display될 수 있는 영역에 대해서 Center를 계산하여 자식 Widget들을 display하는 처리만을 담당하고 있을 것입니다.
그래서 Flutter를 사용하다보면 많은 경우 각 Widget들이 align과 같은 parameter들을 가지고 있고 이를 사용하게 되는 경우가 많습니다.
마치며
다음 화부터는 좀 더 자세한 내용을 다루도록 하겠습니다.
Hits: 0