[Flutter] 좀 더 쉬운 플러터 렌더링

안녕하세요~ 요번엔 다른걸 가져와봣는데욤

https://pub.dev/packages/easy_ui

easy_ui | Flutter package

조금 생소하죠? 제가만들었거든요ㅋㅋㅋ

 

일단 플러터는 선언형방식이지만 여러모로 앱을 만들다보면 너무 코드가 감싸져있는게 많아서 알아보기가 힘들어요

저는 swiftui를 하다보니 거기에서 좋았던 부분을 가져와서 해당 패키지를 제작했어요

 

예시를 하나들어볼께요

저번에 사용했던 디자인을 다시 사용해볼꺼에요 

https://www.figma.com/file/2BWILGgkeIwv2KjE4Fipy7/Aspen-Travel-App-Exploration--Mobile-App-Design-(Community)?type=design&node-id=0-11&mode=design&t=e4o34iWFvtZQ9V1W-0

Figma

해당 디자인의 홈화면 상단을 보면

이런식으로 코딩할수있어요

 

Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 20),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    "explorer",
                    style: Theme.of(context).textTheme.subTitle,
                  ),
                  Row(
                    children: [
                      SvgPicture.asset(XImages.location.path),
                      const SizedBox(
                        width: 6,
                      ),
                      Text(
                        "Aspen, USA",
                        style: Theme.of(context)
                            .textTheme
                            .hint
                            ?.copyWith(color: XColors.x606060),
                      ),
                      const SizedBox(
                        width: 6,
                      ),
                      SvgPicture.asset(XImages.down.path),
                    ],
                  )
                ],
              ),
            ),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 20),
              child: Text(
                "Aspen",
                style: Theme.of(context).textTheme.title1,
              ),
            ),
            const SizedBox(
              height: 24,
            ),
            Container(
              margin: const EdgeInsets.symmetric(horizontal: 20),
              padding: const EdgeInsets.all(16),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(24),
                color: XColors.pcolor05,
              ),
              child: Row(
                children: [
                  // SvgPicture.asset(XImages.se.path),
                  Text(
                    "Find things to do",
                    style: Theme.of(context).textTheme.hint,
                  )
                ],
              ),
            )
          ],
        )

 

길죠,.,.?

거기에다가 복잡한 로직까지 들어가기 시작하면 더더욱 복잡해질꺼에요

그럼 제가 사용하는 방법을 알려드릴께요

Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                "explorer".toWidget().xstyle(context.t.subTitle),
                Row(
                  children: [
                    SvgPicture.asset(XImages.location.path),
                    const SB().w(6),
                    "Aspen, USA"
                        .toWidget()
                        .xstyle(context.t.hint.c(XColors.x606060)),
                    const SB().w(6),
                    SvgPicture.asset(XImages.down.path),
                  ],
                )
              ],
            ).wpHorv(20),
            "Aspen".toWidget().xstyle(context.t.title1).wpHorv(20),
            const SizedBox().h(24),
            Container(
              color: XColors.pcolor05,
              child: Row(
                children: [
                  "Find things to do".toWidget().xstyle(context.t.hint),
                ],
              ).wpv(16),
            ).round(24).wpHorv(20)
          ],
        )

좀 뭐가 많이 줄은것같나요?

 

훨씬더 위젯의 구조를 보기가 편해진것같아요

일단 어떤부분에서 사용한건지알려드릴께요

 

 

1. SizedBox는 너무길고 너비와 높이 지정을하다보면 기본적으로 2~3줄먹기시작해요

> 그래서 SB()로 매우짧게 변경하고 .w형식으로 해당 위젯의 너비나 높이를 지정할수있어요

 

2. Theme.of(context).textTheme 역시 너무길어요

> context.t 로 한방에 줄여버렸어요

 

3. padding값이 한줄한줄 차지하다보면 어지러워져요 거기에 Flutter는 패딩값이 EdgeInsets를 활용해야되기때문에 직관성이 떨어져요

> wpHor wpVer wpTop 등등의 메소드로 간편하게 패딩을 정의하세요

 

4. 텍스트를 쓰다보면 아여기엔 위젯을 가져다놔야되지 할때가 너무많았어요

> 그냥 string에 extension을 달아놨어요

 

물론 이렇게 하다보면 장점만있는건아니에요

 

단점은

1. flutter inspector로 원하는 위젯을 찾기가힘들어져요 

메소드를 하나 콜할때마다 하나의 위젯으로 감싸지는 형태이기때문에 원하는 위젯을 한번에 찾기는 어려워진답니다.

그치만 bloc을 쓰다보면 어짜피 트리 깊숙히 박히게되는건 똑같아요, 그리고 상용앱을 개발해도 bloc사용하지않더라도 위젯트리는 깊어질수밖에없답니다. 그냥 생산성을 가져가는것또한 방법이지않을까요?

 

2. 혹시모를 성능이슈가 있을수도.,,,?

제가 더사용하면서 알려드리긴하는데,, 확실하지 않은걸 싫어하시는분들은 자제해주세요 책임질수는없거든요 ㅋㅋ

근데 제가 제작하는앱들은 다 저렇게 제작했고, 성능상 이슈또한 아직 발견하지 못했어요

왜냐면. 요즘폰들은 성능이 엄청 좋거든요

 

이방법을 사용해서 앱의 생산성을 늘리면서 가독성 또한 확보하는 flutter앱을 제작해보는건 어떨까요??!

 

그럼 이만!