프로젝트를 진행하면서, Flutter를 공부하게 되었다.
아직 Flutter가 나에게 와 닿지 않지만, 피할 수 없으므로, 재밌게 공부해볼까한다.
개발 문서로 공부하면서 Flutter가 정확히 어떤 것이고, 기존 안드로이드에서 사용하는 방법과 어떻게 다른지 이해해보려고 한다.
https://flutter-ko.dev/docs/get-started/flutter-for/android-devs
위의 링크는 플로터 한글판 개발 문서이다.
잘 이해가 안되지만, 천천히 정리하면서 이해해보도록 하자.
Flutter는 다양한 기능과 구성을 위해 모바일 운영체제를 사용한다.
그렇기에 Android 관련 지식과 기술은 Flutter 앱을 만들 때 아주 유용하게 적용된다.
Flutter는 모바일에서 UI를 만드는 새로운 방법이다.
UI 이외 작업을 위해서 Android와 통신하는 플로그인 시스템도 가지고 있다.
먼저 뷰에 대해서 공부해보자!
Flutter에서 View와 동일한 것은?
Android에서, 뷰는 화면에 나타는 모든 것이다. 즉, 버튼, 툴바, 입력창 등 모든것이 뷰이다.
Flutter에서는 Widget(위젯)이 뷰와 유사하다.
위젯이 안드로이드의 뷰와 정확하게 일치하는 것은 아니지만,
Flutter를 익힐 때, 위젯이 "UI를 선언하고 구성하는 방식이라고 이해하면 쉬울 것이다."
여기서 위젯과 뷰에 차이점이 있다.
생명주기가 다르다.
위젯은 변경 불가능하고, 변경이 필요할 때까지만 존재한다.
위젯 혹은 위젯의 상태가 변경되면, Flutter는 위젯 인스턴스의 새로운 트리를 생성한다.
반면, 안드로이드의 뷰는 한번만 그려지고, invalidate가 호출되기 전까지는 다시 그리지 않는다.
Flutter의 위젯은 불변하기 때문에 가볍다.
Flutter는 머티리얼 컴포넌트 라이브러리를 포함하고, 머터리얼 가이드라인을 따르고 있다.
위젯을 변경하는 방법은 무엇인가?
안드로이드에서는 뷰를 직접 수정하여 변경사항을 적용한다.
Flutter의 위젯은 불변이기에 직접 변경될 수 없고, 대신 위젯의 state를 변경할 수 있다.
여기서 Stateful 위젯과 Stateless 위젯 개념이 나오게된다.
StatelessWidget은 말 그대로 상태 정보가 없는 위젯이다.
사용자 인터페이스 부분이 구성 정보 외에 다른 어떤 정보에도 의존하지 않을 때 유용하다.
예를 들어, 안드로이드 이미지 뷰에 로고를 배치하는 경우와 비슷하다.
StatefulWidget은 Http 호출이나, 사용자와의 상호작용을 통해 받은 데이터를 기반으로
UI를 동적으로 변경하기를 원할 때 사용된다. Flutter 프레임워크에 State가 변경되었다고
알려주면 위젯이 변경되게 된다.
여기서 중요한 점은 Stateless와 Stateful은 둘다 모든 프레임을 다시 빌드한다는 점이 같다.
차이는 Stateful은 프레임 전체에 걸쳐 상태를, 데이터를 저장하고
다시 반환하는 State 객체를 가지고 있다는 점이다.
가장 쉽게 이해하기 위해서는 Stateless는 위젯이 변경되지 않을경우, Stateful은 위젯이 변경될 경우
라고 알아두면 될 것이다.
아래 예제는 Sample App이라는 앱바를 표시하고, FloatingActionButton을 클릭할 때 Text 위젯의 상태값을
변경하는 예제이다.
FloatingActionButton을 클릭하면 Text의 값이 "I Like Flutter"에서 "Flutter is Awesome!"으로 바뀌게 될 것이다.
import 'package:flutter/material.dart';
//앱 첫 실행
void main() {
runApp(SampleApp());
}
//변하지 않는 위젯
//home에서는 변하는 위젯을 호출
class SampleApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Sample App',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: SampleAppPage(),
);
}
}
//변하는 위젯
class SampleAppPage extends StatefulWidget {
SampleAppPage({Key key}) : super(key: key);
//StatefullWidget을 상속받으면, createState()를 오버라이드 함
//여기서 State를 상속받는 클래스를 리턴해줘야한다.
// => 는 return을 뜻함.
@override
_SampleAppPageState createState() => _SampleAppPageState();
}
//State에 대한 내용을 구현
class _SampleAppPageState extends State<SampleAppPage> {
// Default placeholder text
String textToShow = "I Like Flutter";
void _updateText() {
setState(() {
// update the text
textToShow = "Flutter is Awesome!";
});
}
//body에서 chile의 Text에 업데이트되는 textToShow 값을 넘겨주고 있음.
//floatingActionButton을 onPressed하면 _updateText가 호출되면서
//textToShow의 값이 변경됨.
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Sample App"),
),
body: Center(child: Text(textToShow)),
floatingActionButton: FloatingActionButton(
onPressed: _updateText,
tooltip: 'Update Text',
child: Icon(Icons.update),
),
);
}
}
