나는 안드로이드 개발자이지만 예전부터 플러터에도 관심이 보여왔었다. 하지만 막연하게 크로스 플랫폼이라는 사실을 알았을 뿐 직접 문서를 읽거나 그러진 않았었는데, 아주 우연한 기회로 플러터를 시작하게 되었다. 요즘 취미로 브레이브걸스 팬들을 위한 개인앱을 하나 만들어왔었는데
마침 친한 개발자B가 자신도 브레이브 걸스를 위한 앱을 만든다는 소식을 접하게 되었고, 개발자 B가 개인앱이 아니라 개발자들과 PM과 브레이브걸스 전문(?)팬분들이 모여서 대규모 앱제작을 진행중이라고 하였다. 개발자 B가 나와 같이하자고 얘기를 했으나,
사이드 협업 3개, 외주 주요 프로젝트 1개, 스터디 1개, 포트폴리오 개인앱 제작중 등등 너무 많아서 거절했었다. 하지만 우연히 개발자 B의 브레이브걸스를 향한 뜨거운 열정(?)을 들었고 그 이야기를 듣고나서 참여하기로 결정했다.
하지만 문제는 Android, Ios 특정 네이티브 앱이 아니라 크로스플랫폼으로 Flutter 를 사용한다는 것이다. 협업팀 에서 견인차 역활을 하는 한 서버 개발자가 제작기간 1달을 걸었다. 그래서 나는 부랴부랴 Flutter도 공부해야하는 상황에 당첨이 되었기 때문에............ 그렇게 플러터를 시작하게 되었다.
서론이 너무 길었네요 Flutter 정리를 해보도록 하겠습니다.
0.Flutter 의 간단 소개
플러터는 2018년 구글에서 발표한 안드로이드, ios를 동시에 제작할 수 있는 크로스 플랫폼 프레임워크 입니다.
플러터의 특징은 기존 UI를 버리고 자체적으로 UI를 렌더링 하기 때문에 안드로이드 앱에서 IOS 디자인을 접할 수 있고, 반대로도 가능합니다.
플러터의 강력한 점은 엄청나게 빠른 생산성 입니다. ios, 안드로이드 각각 제작을 한다했을 때와 비교를 한다면 플러터가 얻는 생산성이 60%나 더 효율이 좋았다는 얘기가 있습니다. (사적인 얘기에서 일반 네이티브보다 5배나 빠르게 앱제작이 가능하다는 얘기가 있습니다.)
플러터가 채택한 언어는 Dart 인데 기본적으로 객체지향 프로그래밍을 지원합니다. 그리고 java나 C 문법등등과 매우 유사한 부분들이 많습니다. 자바 혹은 c 등등 언어 사용을 하면서 oop 개념을 평소 공부를 해왔던 사람이라면 금방 익힐 수 있는 언어 입니다.
1. Flutter의 UI
Flutter는 모두 위젯으로 이루어져 있습니다. 작은 텍스트나 버튼 혹은 큰 레이아웃 등등 .. UI 가 관련된 무엇을 만들던 UI가 위젯으로 생성이 됩니다. 그래서 위젯 트리라고도 불립니다. 더 구체적인 사진은 아래를 보면 됩니다.
크게 Row Column Container 이 3가지가 위젯 트리를 만들어냅니다.
이 3가지도 위젯으로 취급이 되지만 레이아웃을 구성해주는 위젯 입니다. 눈에 보이지 않는다는점이 특징입니다.
마지막 도착지점에는 항상 눈에 보이는 UI요소가 마지막으로 자리를 잡고 있습니다. (Text,Icon 등등..)
Row는 가로로 하위 위젯을 생성, Columnd은 세로로 하위 위젯을 생성 합니다.
Container는 자식 위젯들을 커스터마이징할 수 있는 위젯 클래스 입니다.
여백, 간격, 테두리 또는 배경색을 추가하고 싶을 때 Container를 사용할 수 있습니다.
2. Flutter 위젯 생성 및 위젯 데이터 변경 적용
Flutter는 모든 ui 요소들이 위젯이기 때문에 사용자에게 보여주는 ui이니, 결국 위젯의 생명주기나 상태변화등등을 컨트롤 한다면 Flutter를 기본적으로 잘 다룰 수 있을겁니다. 위젯 생성하거나 컨트롤 하기위해서 알아야 할것이 있습니다.
바로 StatelessWidget,StatefulWidget,State 이 세가지를 알아야합니다.
2-1) StatelessWidget
StatelessWidget을 클래스에서 상속 받아 사용하면 bulid() 함수를 override 해서 사용해야 합니다. 이 bulid() 함수를 통해서 위젯을 생성하게 됩니다. 하지만 클래스 네이밍을 직역하자면 " 상태가 없는 위젯 "이라는 말로 직역을 할 수 있습니다.
Flutter는 State를 통해서 위젯을 변경합니다. 하지만 State이 없다면 위젯을 변경할 수가 없습니다. StatelessWidget은 State이 없는 위젯을 생성하기 때문에 위젯의 데이터를 변경할 수 없습니다.
- 변경 가능한 상태가 필요하지 않는 위젯
- State 이 없는 Widget을 정의할 때 사용한다.
- 생명주기가 존재하지 않으며 bulid 함수 한번만 실행된다.
2-2) StatefulWidget , State
StatefulWidget은 StatelessWidget과 반대로 State을 가진 위젯을 생성하기 때문에 State에 따라 위젯을 변경 하도록 도와줍니다. 그리고 StatefulWidget사용할때 State는 기본적으로 동시에 같이 사용해야합니다 즉 1+1 처럼 둘이 항상 착 달라붙어서 따라다닙니다.
State은 한마디로 Data라고 정의할 수 있습니다. 생성시 위젯의 생명주기 동안 사용자의 상호작용으로 인한 데이터 변경에 따라 위젯을 변경을 해주는데 도움을 줍니다.
StatefulWidget
-변할 수 있는 스텟이다. state에 대한 configration을 설정한다.
-클래스내의 필드는 항상 final 로 표시된다.
-State 에 따른 UI 변화가 필요할 때 사용한다.
-State 과 같이 사용된다.
State
- 위젯이 빌드될때 동기적으로 읽을 수 있으며
- 위젯의 생명주기 동안 변경될 수 있는 정보
- StatefulWidget 의 생명 주기를 가짐
2-3) StatefulWidget 와 State의 분리이유??
코드를 보다보면 상당히 왜 굳이 두개를 나뉘어 사용할까라는 의구심이 들겁니다.
두개가 분리되서 사용되는 이유는 결과적으로 성능 때문입니다.
속성 또는 부모 위젯이 바뀌게 되면 StatefulWidget 바뀌게 되는데,
이 과정에서 위젯이 재생성하는데 StatefulWidget이 생명주기를
가지고 있으면 생명주기를 다시 복구하는데 꽤나 많은 성능이 필요합니다.
하지만 State이 생명주기를 관리하면 생명주기가
위젯과 함께 폐기되었다가 다시 재생성 하는 일은 없습니다.
또한 State 자체는 폐기되지 않아서 데이터 변경에 대한 응답으로 필요할 때
언제든지 위젯을 만들 수 있습니다.
3) 머트리얼 디자인, 쿠퍼티노 디자인 기본 제공
Flutter 가 강력한 이유는 네이티브단에서 일일히 상태를 지정할 필요 없이
머트리얼 디자인 혹은 쿠퍼티노 디자인에 맞는 UI를 다 제공을 해줍니다.
그외 Scaffold 라는 위젯이 있는데
class EntrancePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Entrance Page'),
),
body: Container(
......생략 이것을 사용하면 너무나 쉽게 머트리얼 디자인의 구성요소인
앱바,네비게이션바,플로팅액션 버튼을 쉽게 만들 수 있습니다.
빠르게 권장 디자인들로 이루어진 UI들을 간편하고 쉽게 위젯으로 만들어 사용하기 때문에
개인앱 제작 혹은 작은 외주 프로젝트용으로 Flutter가 정말 끝판왕이라는 생각이 듭니다.
4) 라우터
라우터는 화면 전환을 하는데 사용합니다. Navigator 라는 클래스를 이용합니다.
class Routes {
Routes._();
static const String firstRoom = '/firstRoom';
static const String secondRoom = '/secondRoom';
static const String bathRoom = '/bathRoom';
static const String exit = '/exit';
static final routes = <String, WidgetBuilder>{
firstRoom: (BuildContext context) => FirstRoom(),
secondRoom: (BuildContext context) => SecondRoom(),
bathRoom: (BuildContext context) => BathRoom(),
exit: (BuildContext context) => ExitPage(),
};
}라우터를 쉽게 사용하기 위해 Routes라는 클래스를 하나 만들었습니다. String 변수들을 보면 다/로 시작하는것을 볼 수 있습니다. 라우터는 앱을 시작하면 /를 바라보기 때문에 /를 붙혀서 짓습니다.
Navigator.pop()을 사용한다면 이전화면으로 돌아올 수 있습니다.
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
routes: Routes.routes,
home: EntrancePage()
....생략....
routes 파라미터로 Routes.routes를 넣어줍니다.
그 다음 이동할 위젯을 만들 때
MaterialButton(
color: Colors.blue,
child: Text('Exit!!'),
onPressed: () {
Navigator.of(context).pushNamed(Routes.exit);
}
)위와 같이 Navigator.of(context).pushNamed(Routes.exit);
이런식으로 사용해주면 위 버튼을 클릭시 지정한 위젯 화면으로 이동하는걸 보실수가 있습니다.
이상 위의 큰 대분류 4가지를 모두 합해서 사용한다면 간단한 UI제작 및 데이터에 따른 UI변경 및 화면 이동은 쉽게 할 수 있게 있습니다. 플러터를 처음 공부한지 하루밖에 안됬는데 조금만 더 고생하면 금방 다 습득할 수 있을것 같습니다. 이상 플러터 1편 포스팅 이었습니다.