[Flutter] (Project) MapleApp: 21. Stat Page 제작-2

🐇 custom shapes

🥕 ClipPath

※ reference : https://api.flutter.dev/flutter/widgets/ClipPath-class.html

직접 원하는 커스텀 도형을 만들어내고 싶다면, 위의 ClipPath reference를 활용해서 도전하라.

 

🥕 flutter_custom_clippers

※ reference : https://pub.dev/packages/flutter_custom_clippers/install

그러기에 다각형 도형을 구현하는 것에 너무 많은 비용이 든다 싶어 찾아낸 라이브러리다. 일반적으로 알려진 다양한 도형에 대해 얻고 싶다면, flutter_custom_clippers를 활용하는 것도 좋은 방법이다.

flutter pub add flutter_custom_clippers
flutter pub get

하지만 실제로 적용해보니 내가 원하는 정 다각형의 모습을 보여주지 않았다. 그래서 그냥 직접 그리기로 했다.

 

🥕 CustomClipper<Path>

내가 원하는 Path로 Clip할 수 있도록 도와주는 class라고 생각하면 편하다. 앞으로 내가 원하는 도형을 그려나가면서 알아낸 정보에 대해 작성하며 어떻게 그려나가는지 확인하겠다

 

※ reference : https://medium.com/flutter-community/flutter-custom-clipper-28c6d380fdd6

Custom Clipper에 대한 설명을 자세하게 적어준 참고자료로서, 너무 유익한 정보를 담고 있으니 더 깊게 파헤치고 싶으면 위 reference를 찾아가길 바란다.

 

🍒 ..method

..구문은 "cascades" 또는 "cascade notation"라고 불리며 메소드 호출을 연결하여 동일한 객체에 대해 연이어 작업을 수행할 수 있게 해줍니다. 즉, class 내 여러 메소드를 동시에 사용하고 싶을 때 사용하는 구문이다.

기본적으로 선을 그릴 때, Path 객체를 다루는데, Path 객체를 생성할 때 moveTo, lineTo, closeTo와 같은 method에 대한 연이은 작업을 진행할 때 아주 유용하다.

🍒 lineTo

가장 기본적으로 내가 원하는 도형을 직선을 활용해서 그리는 행위이다.

🍒 addPolygon

Offset으로 이루어진 여러개의 점을 한번에 이어주는 역할을 합니다.

정 육각형은 아니지만, 정 육각형에 가까운 모습으로 최대한 그리기 위한 방법입니다. 이때, 대각변과 가로변의 길이 차는 0.22 정도입니다. 위 정보를 활용해서 OffsetList를 만들고 addPolygon method를 사용하면 다음과 같이 getClip을 진행할 수 있습니다.

class CustomHexagonClipper extends CustomClipper<Path> {
  @override
  getClip(Size size) {
    double y = size.height;
    double x = size.width;

    var points = [
      Offset(0, y / 2),
      Offset(x / 4, y),
      Offset(x / 4 * 3, y),
      Offset(x, y / 2),
      Offset(x / 4 * 3, 0),
      Offset(x / 4, 0),
    ];

    Path path = Path()
      ..addPolygon(points, false)
      ..close();

    return path;
  }

	@override
  bool shouldReclip(covariant CustomClipper oldClipper) {
    return false;
  }
}

그런 다음 화면에 적용 시켜 봅니다.

Flexible(
  flex: 1,
  fit: FlexFit.tight,
  child: AspectRatio(
      aspectRatio: 1,
      child: ClipPath(
        child: Container(color: Colors.red),
      )),
),

육각형으로 결과가 나오긴 하지만 아름다운 모습을 볼 순 없었습니다. 그래서 다시 한번 라이브러리를 찾아 다녔고 hexagon library를 찾을 수 있었습니다.

그래서 Path를 직접 찍으면서 찾아가는 방법은, 삼각함수에 대해 더 깊게 고민한 뒤 추후에 직접 만들어보려 합니다.

 

🥕 hexagon

※ reference : https://pub.dev/packages/hexagon

flutter pub add hexagon
flutter pub get

사용 방법은 간단합니다!

HexagonWidget.flat(
	width: MediaQuery.of(context).size.width / 2,
	child: Container(),
)

만약 hexagon에 테두리를 만들고 싶다면, 부모 hexagonWidget보다 작은 hexagonWidget을 자식으로 두면 됩니다!

HexagonWidget.flat(
	width: MediaQuery.of(context).size.width / 2,
	child: HexagonWidget.flat(
		width: MediaQuery.of(context).size.width / 4,
		child: Container(),
	),
)

🐇 ShaderMask

우리는 기본 gradient로 LinearGradient를 알고 있습니다. 근데 LinearGradient에서 다양한 표현 방식에 대해 설명할 때, Text gradient에 대해서도 설명해줍니다. 그때 등장하는 Widget이 바로 ShaderMask입니다.

 

※ reference : https://api.flutter.dev/flutter/widgets/ShaderMask-class.html

ShaderMask는 정말 유용합니다! Widget에 gradients를 적용할 때 사용할 수 있고, Image를 적용할 때도 사용할 수 있습니다. 사용 방법은 다음과 같습니다.

ShaderMask(
  shaderCallback: (Rect bounds) {
    return RadialGradient(
      center: Alignment.topLeft,
      radius: 1.0,
      colors: [
				Colors.yellow, 
				Colors.deepOrange.shade900,
			],
      tileMode: TileMode.mirror,
    ).createShader(bounds);
  },
  child: const Text(
    'I’m burning the memories',
    style: TextStyle(color: Colors.white),
  ),
)

내가 원하는 Gradient효과를 shaderCallback에 넣어주고, gradient widget의 createShader method를 활용해 shader를 만들어줍니다. 그러면 ShaderMask Widget이 shader를 감지하고 자식의 배경으로 숨겨주죠!

opacity, CustomPaint, DecoratedBox, BackgroundFilter class들은 더 다양한 효과를 넣을 수 있는 방법들 입니다. 더 자세히 알고 싶으면 reference를 참고하세요.

🐇 소수점 출력

double type의 값을 string으로 표현할 때, 소수점에 대해 신경써야 할 부분이 생겼다. 가장 간단한 방법은 toStringAsFixed method를 사용하는 것이다.

 

※ reference : https://api.flutter.dev/flutter/dart-core/num/toStringAsFixed.html

사용 방법은 간단하다.

value.toStringAsFixed(3); // result: 1.000