코드가 길어지면 커스텀 위젯만들기

앱이 좀 커져서 Container() 20개 중첩되고 그러면 내가 원하는 박스들을 한 눈에 찾기 힘듭니다.

그럴 땐 커스텀 위젯을 만들어서 사용하십시오. 

그럼 길고 긴 위젯들을 한 단어로 축약해서 쓸 수 있습니다. 

 

MaterialApp(
  home: Scaffold(
    appBar: AppBar(),
    body: SizedBox( child: Text('안녕') ),
  )
); 

새로운 마음으로 시작하려고 이런 위젯을 만들었습니다.

근데 body: 안에 들어가는 레이아웃이 너무 길고 복잡해서 한 단어로 축약하고 싶은겁니다. 

그러고 싶으면 커스텀 위젯을 만들면 됩니다. 

 

 

class 작명하셈 extends StatelessWidget {
  const 작명하셈({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {

    return 짧은단어로축약할위젯()

  }
} 

커스텀 위젯만드는 마법의 코드입니다.

1. 위 코드 그대로 복붙하고

2. 저기 작명부분은 작명하고 (영어대문자로 시작해야함)

3. return 오른쪽에 위젯넣는 부분에 축약할 위젯들을 넣으시면 됩니다. 

4. 그럼 이제 작명하셈() 이렇게 쓸 때 마다 축약했던 위젯들이 그 자리에 복붙됩니다. 

 

아직은 저게 7줄이 무슨 뜻인지 이해할 필요가 없고 앞으로 복붙해서 자유롭게 쓰십시오.

 

(참고)

- 커스텀 위젯은 만들어놓으면 아무데나 사용가능합니다.

- 커스텀 위젯 안에서 커스텀 위젯도 사용가능합니다. 

- 아무거나 다 커스텀위젯화하지말고 재사용이 잦은 UI 들, 큰 페이지들을 커스텀 위젯화 하는게 어떨까요 

 

사실상 dart 문법글에서도 다뤘듯이 객체지향언어의 장점인 클레스를 하나 만들어서 사용 하는 겁니다.

 

 

Android Studio 혹은 VScode 에디터에서

stless 라고 아무데나 작성하고

탭키나 엔터키 누르면 저거 자동완성됩니다.

 

Q. class 쓰는 이유?

 

1. 모든 Flutter 위젯은 class입니다.

(플러터 만든 사람이 class로 만들래요)

class가 뭔지 초보를 위해 매우 쉽게 말하면 그냥 1. 변수 2. 함수 잔뜩 넣어놓은 일종의 자료라고 생각하면 됩니다. 

 

 

2. 그래서 여러분들 커스텀 위젯 만들고 싶으십니까 그럼 class로 만들어야합니다.

class 위젯명 { 위젯정보~~ }

이게 class 하나 만드는 법인데 이렇게 만들면 커스텀 위젯만들기 끝입니다. 

 

 

3. 근데 문제는 class 안에 수많은 변수와 함수가 들어있어야 위젯용 class로 인정해줍니다. 

그래서 그걸 직접 적는건 넘나 힘든 관계로 완성되어있는 class를 복사해서 사용합니다.

 

 

4. class를 복사해서 새로운 class 만들고 싶으면 extends 키워드 쓰면 됩니다. 

복사하기 좋은 완성된 위젯 class가 StatelessWidget 이라는 것이고 

그걸 복사하면 커스텀 위젯 쉽게 만들 수 있습니다. 

class 작명하셈 extends StatelessWidget {

그래서 이러면 진짜로 위젯 완성됨 

 

 

 

Q. @override 어쩌구가 뭔소리?

일단 class는 변수, 함수 보관함이랬죠?

1. 커스텀 위젯 class 안에는 build(){} 라는 함수를 선언하고 그 안에 위젯을 넣게 되어있습니다.

안그러면 위젯으로 인정안해줌 

 

2. 근데 지금 class 만들 때 다른 class 복사해서 만들었죠? 다른 class 안에도 build(){} 가 존재할 겁니다. 

 

3. 그러면 build(){} 라는 항목 중복이 발생하겠군요.

 

4. 중복발생시 내껄 더 먼저 적용하라고 명령주고 싶을 때 @override 라는걸 위에 사용하면 됩니다. 

 

key 어쩌구 있는 부분은 나중에 state 전송할때 사용하는데 

부모에 state 값을 사용하거나 변경하고 싶을때 사용하는 부분임

 

 

 

 

 

 

-----------------------------

코딩애플님 플러터 강의를 참고해서 작성한 정리 글입니다. 강추 꼭 들으시길 바랍니다 

https://codingapple.com/