The AppBarDesign can't be assigned to the parameter type 'PreferredSizeWidget'
helpful tips to implementing that without searching any other topics:
class ApplicationToolbar extends StatelessWidget with PreferredSizeWidget{
@override
Widget build(BuildContext context) {
return AppBar( ... );
}
@override
Size get preferredSize => Size.fromHeight(kToolbarHeight);
}
Scaffold requires as appbar a class that implements PreferredSizeWidget
Either wrap your custom appbar into a PreferredSize
Scaffold(
appBar: PreferredSize(
preferredSize: const Size.fromHeight(100),
child: Container(color: Colors.red),
),
)
or implement PreferredSizeWidget:
Scaffold(
appBar: MyAppBar(),
)
...
class MyAppBar extends StatelessWidget implements PreferredSizeWidget {
@override
Size get preferredSize => const Size.fromHeight(100);
@override
Widget build(BuildContext context) {
return Container(color: Colors.red);
}
}
Screenshot:
Create this class:
class CustomAppBar extends PreferredSize {
@override
final Widget child;
final double height;
CustomAppBar({
required this.height,
required this.child,
}) : super(child: child, preferredSize: Size.fromHeight(height));
}
Usage:
appBar: CustomAppBar(
height: 100,
child: Container(
color: Colors.red,
child: Column(
children: [
Text('0'),
Text('1'),
Text('2'),
Text('3'),
],
),
),
)
You can also use following way to design your appbar in separate file and then use it in your whole app.
Widget Custom_Appbar(){
return AppBar(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(bottom: Radius.circular(20))),
title: Text(
'Decimal to Binary & Vice Versa',
style: TextStyle(fontWeight: FontWeight.w400, fontSize: 19),
));
}
And then use it like this
return Scaffold(
appBar: Custom_Appbar(),
)
If you get the error
The argument type x can't be assigned to the parameter type 'PreferredSizeWidget'.
Just wrap x in the PreferredSize widget.
Example:
appBar: AppBar(
bottom: Column(
children: <Widget>[
new TabBar(
tabs: [
new Tab(icon: new Icon(Icons.directions_car)),
new Tab(icon: new Icon(Icons.directions_transit)),
new Tab(
icon: new Icon(Icons.airplanemode_active),
)
],
),
],
),
Here I get the error: The argument type 'Column' can't be assigned to the parameter type 'PreferredSizeWidget'.
Solution:
Click on Column
Click on light bulb
Choose Wrap with Widget
Replace widget with PreferredSize
Add a PreferredSize attribute, such as preferredSize: Size.fromHeight(100.0),
Result:
appBar: AppBar(
bottom: PreferredSize(
preferredSize: Size.fromHeight(100.0),
child: Column(
children: <Widget>[
new TabBar(
tabs: [
new Tab(icon: new Icon(Icons.directions_car)),
new Tab(icon: new Icon(Icons.directions_transit)),
new Tab(
icon: new Icon(Icons.airplanemode_active),
)
],
),
],
),
),