What is the use of PreferredSize widget in flutter?

Question

I'm new in flutter, and I see there are few widgets for the layout design such as SizedBox and Container. There is one widget which is PreferredSize Widget that I don't know and cannot find any example about it. What makes it different from other widgets such as container and SizedBox which can set height and width?.
Can someone give an example?

Answer 1

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"),
                )
            ),

        )
    );
  }
}

Answer 2

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.