Test your understanding of Flutter fundamentals with these easy questions focused on widgets and layout concepts. This quiz helps you reinforce key skills and common terms used in building Flutter user interfaces.
Which widget is most commonly used to arrange its child widgets vertically on the screen?
Explanation: The 'Column' widget organizes its children in a vertical direction, making it the standard choice for vertical layouts. 'Row' arranges children horizontally, 'Stack' places children on top of each other, and 'List' is not a standard widget name in Flutter for layouts; the correct options would be 'ListView' or 'ListTile', but not just 'List'. So, 'Column' is most appropriate for vertical arrangements.
Which property would you adjust to change the horizontal alignment of children within a Row widget?
Explanation: 'mainAxisAlignment' is used to control the alignment of children on the main axis—the horizontal axis in a Row. 'crossAxisAlignment' aligns children vertically in a Row. 'verticalAlign' is not a property in Flutter, and 'alignment' is a more general property not directly associated with Row alignment specifics.
If you want to add space inside a widget between its content and its border, which widget should you use?
Explanation: The 'Padding' widget wraps a child and adds space on the inside, separating the content from the edges. 'Margin' is not a standalone widget but a property used with certain widgets. 'Border' is related to the decoration of a widget, not spacing. While 'Container' can apply padding, it is generally recommended to use the dedicated 'Padding' widget for clarity.
What is the main purpose of using the Stack widget in a Flutter layout?
Explanation: 'Stack' is designed to place its children on top of each other, allowing layering of widgets. 'Arrange widgets in a grid' would require a GridView widget. Horizontal alignment is best handled by Row, and vertical arrangements should use Column, so Stack is correct for overlaying.
Which widget is commonly used to display a simple string of text on the screen?
Explanation: 'Text' is the default widget for displaying text strings. 'Label' is not a standard Flutter widget for text, and 'StringWidget' and 'Paragraph' are not actual Flutter widget names, making 'Text' the clear choice.
Which widget allows a child to expand and fill available space within a Row or Column?
Explanation: 'Expanded' lets a child stretch and fill the available space within a Row or Column, according to the flex property. 'Stacked' and 'FitBox' are not valid Flutter widgets, and 'FlexibleBox' is not a recognized widget; the closest option for adjusting size is 'Flexible', but the most specific answer for filling space is 'Expanded'.
Which widget is best suited to display a long, scrollable list of items efficiently?
Explanation: 'ListView' is designed for creating scrollable lists and can handle large numbers of children efficiently. 'GridBox' and 'ScrollPane' are not Flutter widget names. 'List' is a class type in Dart and not used for scrollable views in the layout.
Which widget should you use to show an image from a network URL in your app?
Explanation: 'Image.network' is used to load and display images from URLs. 'NetworkPicture' and 'PicWidget' are not actual Flutter widget names. 'PhotoView' is not a core widget for images; 'Image.network' is both correct and straightforward.
If you want to arrange two buttons side by side horizontally, which widget should you use as the parent?
Explanation: 'Row' arranges its child widgets horizontally, making it perfect for placing items side by side. 'Column' arranges children vertically, 'Stack' overlays them, and 'Alignment' is not a layout widget by itself, so 'Row' is correct.
Which widget protects your content from being hidden under device notches or system bars?
Explanation: 'SafeArea' adds padding to avoid system UI overlaps, such as notches. 'MarginSafe' and 'SafeWidget' are not Flutter widgets, and 'VisibleArea' does not provide the required behavior, making 'SafeArea' the most appropriate.
What property name is commonly used to define multiple children for layout widgets like Row or Column?
Explanation: 'children' is the standard property (with an 'e') to assign multiple widgets as children within Row or Column. 'items', 'childs', and 'widgets' are not the correct property names, with 'childs' especially being a common typo.
If you want to insert adjustable empty space between two widgets in a Row, which widget would you use?
Explanation: 'Spacer' inserts flexible space between widgets in a Row or Column. 'Gap' and 'Separator' are not part of Flutter's default widget set, and 'Divider' is used for drawing a visual line rather than spacing, so 'Spacer' is preferred here.
Which widget is most useful for adding background color, border, and size constraints to its child?
Explanation: 'Container' is versatile, allowing you to set color, decorations, and size constraints around its child. 'Frame', 'BoundedBox', and 'Window' are not correct Flutter widget names, making 'Container' the best answer.
What is the primary use of the Align widget in a Flutter layout?
Explanation: 'Align' positions its child within its parent based on alignment properties. It does not organize widgets in a column, which would require a 'Column' widget, nor does it add padding (use 'Padding'), or display lists (use 'ListView'), so the first option is correct.
Which widget can you use to force a child widget to have a specific width and height?
Explanation: 'SizedBox' sets fixed width and height for its child. 'Flexible' allows the child to take up available space proportionally, 'LimitBox' is less commonly used for this purpose and does not enforce strict sizing, and 'FitWidget' is not an actual Flutter widget.
Which widget is typically used to show a visual icon, such as a star or a menu symbol?
Explanation: 'Icon' is specifically used to display graphic icons from a given set. 'Symbol', 'Logo', and 'Sign' are not standard widgets for displaying icons, and their names are not parts of the core set, so 'Icon' is correct.