[Flutter] (Project) MapleApp: 19. Skill Page 제작

앞선 내용들을 진행하면서 Container 제작에는 이제 무리가 없었다. 내가 해온 발자취를 참고하면서 만들어 가도 됐고, 충분히 간단한 내용들이었기 때문이다. 하지만, 특정 자료에서 필요한 데이터를 원하는 형식으로 재 가공하기엔 문법이 다양했다. 물론 JavaScript와 Dart가 엄청나게 비슷하지만, 내부 구현은 실질적으로 다른 부분이 많았기 때문이다. 그래서 스킬 페이지를 만들 땐 이런 부분에 신경 쓰면서 다루는 내용들이 많을 예정이다.

🐇 HashMap

※ reference : https://api.flutter.dev/flutter/dart-collection/HashMap-class.html

다양한 자료형을 key/value 쌍으로 묶어 편하게 관리할 수 있는 Class가 바로 Map이다. HashMap에 대한 자세한 설명은 위 reference를 참고하고, 선언은 다음과 같다.

Map<int, String> map = HashMap();

HashMap을 활용할 수 있는 주요 method는 다음과 같다.

🍒 addAll, addEntries : 데이터 추가

🍒 isEmpty, isNotEmpty : 데이터가 비어있는지 확인

🍒 length : 데이터 길이 확인

🍒 forEach : 모든 항목 반복

🍒 containKey : Key항목이 존재하는지 확인

🍒 remove, removeWhere: 항목 제거

🍒 update, updateAll, putIfAbsent : 항목 업데이트

 

예제와 활용 방법은 reference를 확인하시는 것을 추천드립니다.

🐇 gradient

각 스킬에 맞는 색상을 배경으로 넣다가, 너무 단조롭다 생각하여 gradient를 주려고 했다. 하지만 알고 있는 gradient는 LinearGradient Widget 뿐이었고, 내가 원하는 중심부터 밖까지 gradient 효과를 줄 수는 없었다. 그래서 더 다양한 gradient Widget을 찾아보았다.

 

🥕 RadialGradient

방사형 gardient로 불립니다. 중심과 반경을 기준으로 내가 원하는 색상을 아름답게 조절할 수 있습니다.

 

🍒 center

Alignment Widget으로 중심 점 위치를 변경합니다.

🍒 radius

중심 원의 반경을 <double>radius 만큼 조정합니다.

🍒 stops

colors의 길이와 맞춘 <double>[]를 정의합니다. 정의된 값은 colors[index]가 조정한 값 위치까지만 색이 진행됩니다.

위 그림은 두 가지 색을 조합하여 중심 점으로부터 꽤 큰 반경으로 색상을 표현한 방법입니다. 중심부는 진하고, 외곽 부분은 밝은 제가 원하던 효과였습니다. 예제는 다음과 같습니다.

decoration: BoxDecoration(
  gradient: RadialGradient(
    transform:
        GradientRotation(pi + pi / 2),
    radius: RadiusConfig.minRadius,
    colors: [
      StaticSwitchConfig
              .coreStartBackgroundColor[
          core.hexaCoreType]!,
      StaticSwitchConfig
              .coreEndBackgroundColor[
          core.hexaCoreType]!,
    ],
  ),
),

🥕 SweepGradient

쓸어버리는 듯한 효과를 주는 gradient입니다.

 

🍒 transform

pi를 활용해 시작 점을 회전할 수 있습니다. 기본 시작 점은 90도 시계 방향입니다.

🍒 stops

colors의 길이와 맞춘 <double>[]를 정의합니다. 정의된 값은 colors[index]가 조정한 값 위치까지만 색이 진행됩니다.

단, 멈춘 위치에서 다음 색상까지 변하기 위한 색이 표출됩니다.

 

위 그림은 두 가지 색을 조합하여 구간을 3개로 나누어 표현한 방법입니다. 내가 특정 부분을 분할하고 싶다면 stops위치를 동일하게 하여 다음과 같은 예제가 만들어 질 수 있습니다.

gradient: SweepGradient(	
	transform: GradientRotation(pi + pi / 2),
    colors: [
      StaticSwitchConfig
              .coreStartBackgroundColor[
          core.hexaCoreType]!,
      StaticSwitchConfig.coreEndBackgroundColor[
          core.hexaCoreType]!,
      StaticSwitchConfig
              .coreStartBackgroundColor[
          core.hexaCoreType]!,
      StaticSwitchConfig.coreEndBackgroundColor[
          core.hexaCoreType]!,
    ],
    stops: [
      0.0,
      0.33,
      0.33,
      0.66,
      0.66,
      1.0,
    ],
  ),
)