기획자의 앱 도전기 #3 - Flutter UI 구조 이해하기

UI를 만들기 전에 구조를 먼저 이해해보자.

 

UI 구조 구성

Level 1 : MaterialApp 과 CupertinoApp

먼저 어떤 뼈대를 쓸지 골라야 한다.

특징	MaterialApp	CupertinoApp
스타일	Google의 Material Design	Apple의 Cupertino Design
기본 테마	ThemeData	CupertinoThemeData
주요 속성	theme : 앱 전체의 색상, 글꼴, 스타일 정의 home : 앱 실행 시 첫 번째 화면 설정 routes : 화면 전환을 위한 라우팅 테이블 정의 navigatorKey : 글로벌 네비게이터 상태 관리 debugShowCheckedModeBanner : 디버그 배너 표시 여부 제어	theme : 앱 색상, 글꼴, 스타일 정의 home : 앱 실행 시 첫 번째 화면 설정 routes : 라우팅 테이블 정의 navigatorObservers : 네비게이터 상태 관찰
기본 위젯	Scaffold, AppBar, FloatingActionButton	CupertinoPageScaffold, CupertinoTabScaffold,CupertinoNavigationBar
플랫폼	Android 최적화	iOS 최적화
글로벌 라우팅 관리	네이티브 라우팅과 라우트 애니메이션 제공	iOS 스타일의 스택 기반 네비게이션 제공

 

음, 두 개 중에 고르라면 이쁜건 iOS 스타일일거 같긴한데... 내가 애플 제품이 없다보니 일단 MaterialApp으로 선택했다.

 

Level 2 : Scaffold

MaterialApp이라는 뼈대를 골랐으니 이제 기본으로 제공하는 위젯인 Scaffold을 사용할 것이다. 이 위젯은 MaterialApp이라는 뼈대를 실질적으로 구성해주는 위젯이라 생각하면 된다.

대충 내가 이해한 느낌... 왼쪽이 MaterialAPP 구조, 오른쪽은 웹 구조

 

Level 3 : Widget(위젯)

이제 뭐 바텀 네비게이션을 쓸껀지 등등 앱 기초 작업이 끝났으면 마지막으로 앱을 구성하기 위해 사용할 위젯를 만든다. 위젯은 화면을 구성하는 기본 단위이다. 웹에 굳이 따지면 태그일 듯하다. 하지만 위젯은 태그랑 다르게 위젯에서 동작, 데이터까지 표현이 가능하다. 한번에 처리할 수 있다는 점이 매력이 있는 듯하다.(개인적인 견해...)

화면을 구성하기 전에 디자인이나 기획서를 보고 위젯으로 구성할만한 것들을 묶어 커스텀 위젯으로 만들어두면 좋다.

커스텀 위젯을 만드는 방법은 간단하다.

##아니 여긴 다트가 없넹

class CustomWigdet extends StatelessWidget {
	final String text;
    
    const CustomWigdet({
    super.key,
    required this.text
    });
    
    @override
    Widget build(BuildContext context){
    	return Text{
        text
        };
    }
}

약식이긴 한데 Class를 먼저 선언하고 선언할 때 상태관리 필요 여부에 따라 StatelessWidget, StatefulWidget을 선택해서 상속해준다. less면 정적 ful이면 동적이다. 만약 StatefulWidget으로 선언했다면 코드가 달라질 수 있으니 유의하도록 한다.
그리고 생성자를 선언해주고 아래 widget에 대한 정보를 구성(화면에 렌더링되는 곳)해주면 커스텀 위젯이 다 만들어 진다. 

 

마무리

이제 대략적으로 앱 UI를 구성하는 구조를 파악했으니, 본격적으로 화면을 만들어보려고 한다. 시작했더니 너무 귀찮은데 어쩌지...

시작했으니... 무라도... 아니 배포라도 해봐야지... 힘내자