Flutter _ Reusable Widgets

230521

 

---

 

오늘은 저번 포스팅에 이어

계속해서 앱을 만들어 보겠다.

---

왼쪽의 노란색 Container에 이어

오른쪽의 검정계열의 Container을 만들어 보자.

 

우리는 현재 어플리케이션 화면의

2행에 위젯을 추가하고있고

 

똑같은 디자인의 Container를

2행의 첫 번재 Container뒤에 복사에서

붙여 넣은 다음 텍스트 색깔만 바꿔주었다.

 

결과 화면을 보니

우선 2개의 Container가 붙어있고

오른쪽에 이상한 문구 하나가 떠있다.

 

우선 위의 문구부터 설명을 하자면

앱의 위젯이 얼마만큼 벗어나있다고

경고해 주는 것이다.

 

이렇게 Flutter의 Debug모드 실행은

우리에게 아주 유익한 경고까지 해준다.

 

자 그럼 위의 문제를 해결해주기위해

padding의 값을 바꿔주자.

 

위와 같이 본문 UI의 padding을

20으로 바꾸어주고

 

이 참에 Container 색상도

예시와 같게 바꾸어 줬더니

 

더 이상 경고 문구도 뜨지 않고

Container색상도 이제는 같아진것을 볼 수 있다.

 

자, 이제 두 Container를 떨어트려 보자.

 

---

두 Container를 떨어트리기 위해

부모 객체인 두 번째 Row로 가준다.

 

위와 같이

MainAxisAlignment.spaceBetween을

사용하여 두 Container를 떨어트릴 수 있다.

 

위와 같이

잘 떨어졌다.

 

---

1. Widget Extraction

위의 두 Container작업을 통해서

굉장히 불편한 점은

같은 요소이지만 조금 다르다고 해서

복사, 붙여넣기를 통해

작업을 한다는것이다.

 

이러한 불편함을 줄이기 위해

widget extraction을 통해

나만의 위젯을 만들어보자.

 

내가 추출하고 싶은 위젯 앞에

커서를 옮기면

 

왼쪽에 돋보기 아이콘이 나타나는데이를 클릭해보면

 

여러 유용한 기능들이 있지만

(정말 유용하다 꼭 기억하자!)

 

위의 Extract Widget을 사용하여

위젯을 추출하고 저장할 수 있다.

 

그럼 위와같이

추출할 위젯의 이름을 정할 수 있다.

 

추출할 위젯의 이름을 입력하고

Enter를 누르면

 

내가 추출하려고 했던

두 번재 Container가 

 

MyButton이란 내가 정한 이름의 위젯으로

변경 된것을 확인할 수 있다.

 

그리고 위와 같이

Class까지 선언해준다.

 

정말 굉장하다.

 

---

두 번째 방법은

디렉토리를 새로 만들어서

저장해 놓는 것이다.

lib 폴더에widgets이라는 폴더를 만들고그 안에 button.dart라는 파일을 만들어보자.

 

그리고 위와 같이

Class를 생성해준다.

 

build에

내가 원하는 위젯을 넣어준다.

 

return과 함께 Container 코드 하나를

넣어보자.

 

추가로

결국 우리는 Text와, Backgroundcolor, textcolor만

사용하기에 이를 class에 final로 선언해보자.

 

위와 같이 변수와 생성자를 선언해주었다.

 

이제 위의 변수를 활용해

Container의 값을 수정해보자.

 

위와 같이 값을 적용해주면

아래에 error가 뜨는데

 

그 이유는 Padding이 const로 되어있기 때문이다.

 

하지만 현재 커스터마이징한 Container는

const가 아니기에 const를 지워주고

 

대신에 EdgeInsets 앞에 const를 넣어주자.

 

위와 같이

error가 뜨지 않는것을 확인할 수 있다.

 

이제 다시 main 함수로 돌아가서

두 container를 지우고

 

우리가 만든 Widget을 사용해보자.

 

우리가 선언한 Button Class를 가져와서

요소만 변경해주었더니

 

위와 같이 똑같이

결과물이 나오는것을 볼 수 있다.

 

코드도 짧아지고 가독성도 아주 좋아진것 같다.