Problem Statement
What are SizedBox and Spacer widgets used for? How do they differ from Container?
Explanation
SizedBox is a box with a specified width and height, commonly used to add fixed-size spacing between widgets or constrain child widget sizes. SizedBox(width: 10) creates a 10-pixel horizontal spacer in a Row, SizedBox(height: 10) creates a 10-pixel vertical spacer in a Column. Use SizedBox.shrink() to create a zero-size box useful for conditionally showing/hiding widgets without null checks.
SizedBox is more efficient than Container when you only need size constraints because it's a single-purpose widget with less overhead. Container combines multiple widgets internally (padding, decoration, constraints) while SizedBox only handles size. For pure spacing or size constraints, SizedBox is the preferred choice for better performance.
Spacer is a flexible space that expands to occupy available space in Row, Column, or Flex widgets. It's equivalent to Expanded(child: SizedBox.shrink()) but more explicit and readable. Use Spacer to push widgets to edges or distribute space: for example, Row with widget, Spacer, widget pushes widgets to left and right edges with space between.
Spacer also accepts a flex parameter (default 1) to control space distribution when multiple Spacers are used. While SizedBox creates fixed-size spacing, Spacer creates flexible spacing that responds to available space. Choose SizedBox for consistent spacing regardless of screen size, Spacer for responsive layouts where spacing should grow with available space.
