[flutter] header widget으로 분리

dart 언어는 간단한 ui를 만들어도 다소 길어지는 경향이 있다
react처럼 작은 단위까지 widget으로 쪼개보고자 appbar를 widget으로 분리했는데 다음과 같은 에러가 발생했다

The getter 'preferredSize' was called on null.

appbar의 height 값이 정의되지 않아서 생기는 오류로 위젯분리 없이 Container 위젯의 높이값을 주면 오류가 없으나 위젯을 분리하면 오류가 발생한다.

class HeaderMain extends StatelessWidget implements PreferredSizeWidget {
  const HeaderMain({super.key});

  final double header_height = 60; // 헤더 높이

  @override
  Widget build(BuildContext context) {
    return AppBar(
    ...
    );
  }
  
  // preferredSize 설정
  @override
  Size get preferredSize => Size.fromHeight(header_height);
  
}

PreferredSizeWidget을 implements으로 상속하고 preferredSize 값을 설정해준다
height 값은 변수로 선언하여 명시성을 높이자

++ 업그레이드 했더니 오류가 추가됐다

The argument type 'HeaderBack' can't be assigned to the parameter type 'PreferredSizeWidget?'

위와 같은 오류가 생길경우
위젯에 PreferredSize를 생서하지말고 header위젯을 PreferredSize로 싸줘야 한다

 return Scaffold(
      appBar: const PreferredSize(
        preferredSize: Size.fromHeight(100),
        child: Header(),
      ),
      body: Container(),
    );