[Flutter] (Project) MapleApp: 11. Character Page 제작

캐릭터 페이지에 필요한 정보를 제공할 때, 자료로 남겨두면 좋을 것 같은 내용을 담아봤다.

일단 캐릭터의 사진을 보여주면서, 배경과 함께 블러 처리된 모습으로 전체 배경에 스타일을 따로 주지 않고 멋스럽게 꾸며지길 원했다.

 

그 구조를 설계하는 방법은 다음과 같다.

(main)Conatiner->Stack->(deco)Container+Column

(deco)Container에 블러 처리할 원하는 이미지를 설정하고, Column에 내가 담고 싶은 요소를 담으면 된다. (deco)Container를 설정하는 방법은 다음과 같다.

 

🍒 Container with blur Image of background

※ reference : https://api.flutter.dev/flutter/painting/BoxDecoration-class.html

 

이미지를 블러 처리한 Container를 제작하기 위해선 다음의 Widget 구조를 설계해야 한다

Conatier( // main
	decoration: ~
	child: ClipRect(
		child: BackdropFilter(
			filter: ~
			child: Container() // sub
		)
	)
)

mainContainer에 decoration으로 이미지를 뿌려주고, 그 이미지를 블러 처리할 때 어떻게 자를것인지(ClipRect), 어떤 필터 효과를 줄것인지(BackdropFilter), 그 Filter는 어떤 Widget에 효과를 줄 것인지를 설정하고 자식으로 내가 원하는 요소(subConatiner)를 집어넣으면 된다.

 

decoration을 구현하는 방법은 BoxDecoration을 이용해 image속성에 원하는 Image를 넣고, 이미지의 크기를 지정하면 된다. 여기선 꽉찬 이미지를 활용하기 때문에, BoxDecoration의 color 등의 속성을 사용하지 않는다.

Image를 넣을 땐, Asset에 포함되어 있는 경우 Image.asset()을 많이 사용했을 것이다. 하지만, 위젯을 반환하는 것이 아닌 image 속성에 대입해야 하는 것이므로, AssetImage를 사용해야 한다.

 

나는 URL기반으로 이미지를 가져오기 때문에 NetworkImage를 사용했고, 이후 원하는 요소에 이미지 Widget을 넣을 때는 Image.network()를 사용했다.

 

그리고 이미지에 대한 Filter를 블러처리 하고 싶기 때문에, BackdropFilter에 ImageFilter.blur()를 사용하였다.

 

🥕 내 위젯의 크기는, 내 부모 위젯의 N%만큼 할래!

Container로 구조를 쌓아가다 보면, 내가 원하는 만큼의 너비를 설정할 수 없는 경우가 많다. HTML처럼 width/hegith에 %연산자와 같은 역할을 하는 요소가 없다 생각될 정도로 찾을 수 없었다.

하지만, 내 부모 위젯의 width/height 너비 중 N만큼 크기를 차지할 수 있는 Widget이 있었다. 바로 FractionallySizedBox이다

 

🍒 FractionallySizedBox

widthFactor/heightFactor에 0.0~1.0의 값을 할당하면 내 부모요소의 0% ~ 100%만큼의 너비를 차지하는 SizedBox이다. 이를 활용해서 내가 원하는 크기의 Container를 만들 수 있었다.

 

🥕 박스 및 글자 설정

 

🍒 좌/우측 Border 지정

borderRadius: BorderRadius.horizontal(
	left: Radius.circular(10))

🍒 글자 테두리 설정

※ reference : https://api.flutter.dev/flutter/painting/TextStyle-class.html

 

Borders and stroke(Foreground)항목을 보면 Text 위젯 두개를 겹쳐서 만들어야 한다. 그래서 그냥 stroke_text 패키지를 찾아 활용했다.

flutter pub add stroke_text
flutter pub get

사용 방법은 StrokeText Widget을 사용하자. 내부 속성은 간단하다.

StrokeText(
  text: "Stroke Text",
  textStyle: TextStyle(
    fontSize: 50
  ),
),

StrokeText(
  text: "Flutter",
  textStyle: TextStyle(
    fontSize: 50,
    color: Colors.green
  ),
  strokeColor: Colors.amber,
  strokeWidth: 5,
),

🍒 글자 너비 설정

Text Widget에 letterSpacing 속성을 활용해준다.

 

🍒 폰트 설정

※ reference : https://api.flutter.dev/flutter/painting/TextStyle-class.html

 

다운로드 받은 폰트들을 project 상단 assets/fonts에 저장한다면, pubspec의 fonts 부분에서 example과 같은 형식으로 작성해야 한다. 작성 방법은 다음과 같다.

	example:
		- family: Schyler
				style: italic
		-	family: Trajan Pro
				fonts:
					- asset: fonts/TrajanPro.ttf
					- asset: fonts/TrajanPro_Bold.ttf
						weight: 700

Application 최상단에 위치한 MaterialApp의 theme에 ThemeData Class 속성으로 내가 설정한 family 이름으로 fontFamily를 설정해주면 된다. 만약 NotoSansKR-Bold, NotoSansKR-Light가 있다면 다음과 같이 작성해주면 된다.

theme: ThemeData(
	fontFamily: 'NotoSansKR',
)