Flutter ) The argument type '...' can't be assigned to the parameter type 'PreferredSizeWidget'.

 

안녕하세요 :) Zedd입니다.

# 상황

일단 저는 Widget을 극한으로 쪼개고 싶습니다.

class MainWidget extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
      return Scaffold(appBar: CupertinoNavigationBar(middle: Text("iOS"))); 
  }
}

이것도 좋지만, 

저 CupertinoNavigationBar(middle: Text("iOS"))도

하나의 StatelessWidget으로 만들어서 관리하고 싶은 마음입니다.

그래서

class MainWidget extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
      return Scaffold(appBar: NavigationBar()); //❗️ Error ❗️
  }
}

class NavigationBar extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return CupertinoNavigationBar(middle: Text("iOS"));
  }
}

이런식으로 해줬는데, 

The argument type 'NavigationBar' can't be assigned to the parameter type 'PreferredSizeWidget'.

라는 에러가 발생...

 

# 해결 

Scaffold의 정의로 가면 appBar가 PreferredSizeWidget 타입인걸 볼 수 있습니다.

PreferredSizeWidget은 abstract class이고, preferredSize라는 프로퍼티를 요구합니다.

 

그럼, 제 NavigationBar가 이 PreferredSizeWidget을 구현해주면 되겠네요.

class MainWidget extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
      return Scaffold(appBar: NavigationBar()); // ✅
  }
}

class NavigationBar extends StatelessWidget with PreferredSizeWidget {

  @override
  Widget build(BuildContext context) {
    return CupertinoNavigationBar(middle: Text("iOS"));
  }

  @override
  Size get preferredSize => Size.fromHeight(kToolbarHeight); // ✅
}

kToolbarHeight은 AppBar의 높이를 가지고있는 상수에요.

특정 사이즈를 주고싶다면..

@override
Size get preferredSize => const Size.fromHeight(100);

이런식으로 주면 됩니다. 

 

Q : CupertinoNavigationBar / AppBar 높이가 100이 되는거야?

A : CupertinoNavigationBar의 높이는 변하지 않는 것 같고, 

 

AppBar의 높이만 변하는 것 같습니다.