[Flutter로 iOS 앱 개발하기] 재사용가능한 위젯 만들기

Udemy 사이트에서 Flutter 강좌를 수강 중입니다!
공부하는 내용을 최대한 정리하여 업로드 하려고 합니다.
* Mac을 기준으로 합니다.

 

반복적으로 사용되는 위젯을 함수처럼 정의해놓고 필요할 때마다 가져와서 쓸 수 있는 방법이 존재한다.

예를 들어, 아래 코드와 같은 Container 위젯을 반복적으로 사용해야 한다고 생각해보자.

Container(
	margin: EdgeInsets.all(15.0),
	decoration: BoxDecoration(
	borderRadius: BorderRadius.circular(10.0),
	color: Colors.black,
	),
)

Container 위에 커서를 위치시켜 놓고, Android Studio 우측에 있는 Flutter Outline을 클릭해준다.

간혹 Flutter Outline을 클릭해도, 아래 이미지처럼 Nothing to show 가 뜰 수 있다.

이럴 땐 당황하지 말고, command 키를 누른 채로 Container를 클릭해주면 간단하게 해결이 된다!

이제 Flutter Outline 의 내용이 제대로 확인이 되면, Container 위젯을 우클릭한다.

Extract Widget을 클릭하면, 이름을 설정할 수 있는 창이 뜬다.

원하는 이름으로 설정해준다. 나는 Angela 선생님을 따라할 거니까 ReusableCard 라고 이름을 설정했다.

설정 후에 Refactor를 클릭해주면, 자동으로 아래의 코드가 생성된다.

class ReusableCard extends StatelessWidget {
  const ReusableCard({
    Key key,
  }) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.all(15.0),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10.0),
        color: Colors.Black,
      ),
    );
  }
}

 

이제 ReusableCard라는 이름으로 위젯을 불러와서 사용이 가능하다.