What is the use of PreferredSize widget in flutter?

https://api.flutter.dev/flutter/widgets/PreferredSize-class.html

Any widget with a PreferredSize can appear at the bottom of an AppBar.

You can use PreferredSize to setting up your AppBar Size.

class MyApp1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Example',
        home: Scaffold(
            appBar: PreferredSize(
                preferredSize: Size.fromHeight(100.0), // here the desired height
                child: AppBar(
                  centerTitle: true,
                  title: Text("Example"),
                )
            ),

        )
    );
  }
}

Preferred Size is a custom widget lets you allow to design your custom appbar for you with the same height, width, elevation and feel similar to Appbar.

Sometimes you want to create tabs or more effective design for your appbar then you can create a customChild for your appBar with the help of PreferredSizeWidget.

For Ex : If you want to create a custom appbar with backgradient

import 'package:flutter/material.dart';

Color gradientStartColor = Color(0xff11998e);
Color gradientEndColor = Color(0xff0575E6);

class PreferredSizeApp extends StatefulWidget {
  @override
  _PreferredSizeAppState createState() => _PreferredSizeAppState();
}

class _PreferredSizeAppState extends State<PreferredSizeApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
          preferredSize: const Size(double.infinity, kToolbarHeight),
          child: Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(5.0)),
              boxShadow: <BoxShadow>[
                BoxShadow(
                  color: gradientStartColor,
                  offset: Offset(1.0, 6.0),
                  blurRadius: 10.0,
                ),
                BoxShadow(
                  color: gradientEndColor,
                  offset: Offset(1.0, 6.0),
                  blurRadius: 10.0,
                ),
              ],
              gradient: LinearGradient(
                  colors: [
                    gradientStartColor,
                    gradientEndColor
                  ],
                  begin: const FractionalOffset(0.2, 0.2),
                  end: const FractionalOffset(1.0, 1.0),
                  stops: [0.0, 1.0],
                  tileMode: TileMode.clamp),
            ),
            child: Center(child: Text("Appbar With Gradient",style: TextStyle(color: Colors.white,fontSize: 25.0),)),
          ),
      ),
    );
  }
}

This is the great way to use PreferredSizeWidget. I hope it helps.

You can use it when you're using a container in SliverAppBar()

SliverAppBar(
  pinned: true,
  snap: true,
  floating: true,
  bottom: PreferredSize(
    child: Container(),
    preferredSize: Size.fromHeight(50),
  )),

If you want to create your own custom prefered size widget all you need to do is to implement PreferredSizeWidget interface in your widget.

Example:

import 'package:flutter/material.dart';

class MyWidget extends StatelessWidget implements PreferredSizeWidget {

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

  @override
  Widget build(BuildContext context) {
    return Container(); // Your custom widget implementation.
  }

}

PreferredSize is a wrapper around the PreferredSizeWidget which you can use to create a custom AppBar.

This is how you will extend a PreferredSize class:

class FooBar extends PreferredSize {
  final String data;
  FooBar(this.data);

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

  @override
  Widget build(BuildContext context) {
    return RockingText(data); // Your custom widget implementation. 
  }
}

and this is how you use it:

Scaffold(
  appBar: FooBar('My App bar'),
)