[Flutter] Extract Widget

Widget이 계속해서 반복되는 경우, Extract Widget을 사용해 개별적인 Widget으로 해당 Widget을 추출해낼 수가 있다.

vscode를 사용하고 있는 경우,

1) 원하는 Widget위에 커서를 놓는다.

2) 전구 모양을 클릭한다.

3) Extract Widget을 누른다.

만약 내가 reusableCard라는 Widget을 추출해냈다면,  StatelessWidget을 확장한 class가 생성된다.

Widget을 사용할 때 따로 설정하고 싶은 값들이 있다면, Class  내부에서 변수로 지정해준 후, Widget 사용시 해당 값을 지정해주면 된다,

예를 들어 ReusableCard의 경우 Container의 color(colour) 와 GestureDetector의 onTap에 대한 함수 (onPress), Container의 child (cardChild) 를 변수로 지정받아 할당하도록 구현되어 있다.

class ReusableCard extends StatelessWidget {
  ReusableCard({@required this.colour, this.cardChild, this.onPress});
  final Color colour;
  final cardChild;
  final Function onPress;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onPress,
          child: Container(
        margin: EdgeInsets.all(15.0),
        decoration: BoxDecoration(
          color: colour,
          borderRadius: BorderRadius.circular(10.0),
        ),
        child: cardChild,
      ),
    );
  }
}