20. [Dart, Flutter] extension활용하여 가독성 높이는 코드작성하기 [2부]

드디어 Extension을 Flutter에 활용해보도록 하자.

 

어떻게 활용하면 좋은지 혹시 감이 오는사람이면 코딩이 소질이 좀 있다고 할 수 있다. 만약 안 떠오른다면 그래도 속상해하지말고 이 포스팅 글을 읽고 따라하다보면 보는 시야가 넓어질 것이다.

 

자 이제 시작해보자.

(extension 꿈을)

---

dart extension 복습

앞서 포스트를 보지 않은 사람들을 위해 링크를 추가해주고 짧게나마 설명을 하겠다.

https://pcseob.tistory.com/68

19. [Dart, Flutter] extension에 대하여 [1부]

 

extension은 어떠한 타입, 오브젝트, 클래스를 확장하는데 사용할 수 있는 기능으로 원하는 기능을 추가해서 사용할때 사용한다.

 

 

Flutter extension

 

자 플러터에서 extension을 어떻게 활용하면 좋을까?

 

우선 간단하게 SizedBox에 대해 알아보자.

 

우리는 간혹 SizedBox를 이용해서 간격을 주기도 한다. 물론 Expanded나 Flexible의 widget을 활용해서 조절을 할 수도 있지만, 대부분SizedBox를 이용해서 간격을 조절할 것이다.

 

일단 일반적으로 우리가 사용하는 코드를 보자.

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          children: [
            SizedBox(
              height: 100,
            ),
            Text("여기는 높이 100을 띄워주세요.")
          ],
        ),
      ),
    );
  }
}
		// SizedBox(
            //   height: 100,
            // ),

 

이렇게 사용한다. 근데 너무 보기가 싫다.(개인적으로) 코드가 너무 긴거같고 조금 더 짧게 하려면 extension을 활용해서 어떻게 하면 좋을까? 여기서 번득이는 사람들은 직접해보고 아래 더 보길 바란다.

 

 

 

바로 이렇게 extension을 활용해서 선언하고 사용하면 좋다.

 

extension ForSizedBox on double {
  /// 가로로 공백을 줄 때 사용하는 SizedBox입니다.
  SizedBox get widthBox => SizedBox(
        width: this,
      );

  /// 세로로 공백을 줄 때 사용하는 SizedBox입니다.
  SizedBox get heightBox => SizedBox(
        height: this,
      );
}


...
      body: Center(
        child: Column(
          children: [
            // SizedBox(
            //   height: 100,
            // ),
            100.0.heightBox,
            Text("여기는 높이 100을 띄워주세요.")
          ],
        ),
      ),
...

 

이렇게하면 된다. 참고로 SizedBox에 들어가는 숫자는 double을 사용해아하므로 .0을 붙여야한다. 다만 이것도 귀찮다면 이렇게 할 수 있다.

 

extension ForSizedBox on double {
  /// 가로로 공백을 줄 때 사용하는 SizedBox입니다.
  SizedBox get widthBox => SizedBox(
        width: this,
      );

  /// 세로로 공백을 줄 때 사용하는 SizedBox입니다.
  SizedBox get heightBox => SizedBox(
        height: this,
      );
}

extension ForIntSizedBox on int {
  /// 가로로 공백을 줄 때 사용하는 SizedBox입니다.
  SizedBox get widthBox => SizedBox(
        width: this.toDouble(),
      );

  /// 세로로 공백을 줄 때 사용하는 SizedBox입니다.
  SizedBox get heightBox => SizedBox(
        height: this.toDouble(),
      );
}

...
  body: Center(
        child: Column(
          children: [
            // SizedBox(
            //   height: 100,
            // ),
            100.heightBox,
            100.5.heightBox,
            Text("여기는 높이 100을 띄워주세요.")
          ],
        ),
      ),
...

 

어떤가 코드가 아주 깔끔해진걸 볼 수 있다.

 

그런데 뭔가 Text도 참 마음에 들지않는다. extension을 활용하여 좀 더 간단하게 작성해보도록 하자.

extension ForText on String {
  Text get toDefaultText => Text(this);

  Text toCustomText({TextStyle? textStyle}) => Text(
        this,
        style: textStyle,
      );
}


...
 body: Center(
        child: Column(
          children: [100.heightBox, "여기는 높이 100을 띄워주세요.".toDefaultText],
        ),
      ),
...

 

코드가 너무깔끔하다! 물론 코드가 깔끔한게 무조건 좋은건 아니지만, 줄일 수 있고 가독성을 높일 수 있다면 충분히 활용할만한 가치가 높다고 생각한다.

 

오늘은 Flutter에서 extension을 활용하는 법을 포스팅했다. 이것보다 훨씬 더 무궁무진하게 활용이 가능하니, 활용해서 코드의 가독성을 높여보도록 하자!