widgets-and-widget-tree - flutter Interview Questions | Preplance

1. What does the Stack widget do in Flutter?

Difficulty: MediumType: MCQTopic: Stack Layout

Stack widget overlays multiple children on top of each other in paint order (first child is on the bottom, last child on top), allowing you to position widgets over each other. It's useful for creating overlays, badges, custom compositions, or layered effects where widgets need to overlap. Children can be positioned using Positioned widget which specifies exact positions relative to Stack edges using top, bottom, left, and right properties. Children without Positioned are sized by Stack's constraints and placed according to alignment property (default center). Non-positioned children are always sized to fit Stack's constraints. Stack sizes itself to contain all non-positioned children by default. Use alignment property to control how non-positioned children are placed within the Stack. Common use cases include placing badges on icons, overlaying loading indicators, creating custom layouts with overlapping elements, or building complex compositions like cards with images and text overlays.

3. What is the main difference between StatelessWidget and StatefulWidget?

Difficulty: EasyType: MCQTopic: Widget State

StatelessWidget is immutable and cannot change once built - all its properties are final, and it only rebuilds when the parent widget changes or when external data changes. Use StatelessWidget for UI that depends only on configuration information (constructor parameters) and doesn't need to change dynamically based on user interaction or other events. StatefulWidget maintains mutable state that can change over time through a separate State object. The widget itself is still immutable, but it creates a State object that persists across rebuilds and can hold mutable data. When you call setState(), Flutter rebuilds the widget with the new state values, updating the UI. Examples: Use StatelessWidget for static text, icons, or layouts that don't change. Use StatefulWidget for forms, animations, counters, or any UI that responds to user input, timers, or streams. The State object lifecycle is managed by Flutter and persists even when the widget is rebuilt.

4. What is the difference between Row and Column widgets?

Difficulty: EasyType: MCQTopic: Layout Widgets

Row arranges its children in a horizontal array from left to right (or right to left in RTL locales), while Column arranges its children vertically from top to bottom. Both are flex widgets that can distribute space among their children using properties like mainAxisAlignment and crossAxisAlignment. MainAxisAlignment controls alignment along the main axis (horizontal for Row, vertical for Column) with options like start, center, end, spaceBetween, spaceAround, and spaceEvenly. CrossAxisAlignment controls alignment perpendicular to the main axis with options like start, center, end, stretch, and baseline. Both Row and Column can contain any number of children in their children property. Use Expanded or Flexible widgets as children to control how they fill available space. Be careful with unbounded constraints - Row can overflow horizontally and Column vertically if children are too large, causing the yellow/black overflow warning.

5. What is the purpose of the Scaffold widget?

Difficulty: EasyType: MCQTopic: Scaffold

Scaffold implements the basic Material Design visual layout structure, providing a framework for common Material Design components like AppBar, BottomNavigationBar, FloatingActionButton, Drawer, and SnackBar. It's typically the root widget of each screen in Material Design apps. Scaffold handles many Material Design layout concerns automatically, like proper spacing, automatic padding for system UI (status bar, notches), and coordinating animations between different components. The body property contains the main content, while other properties add standard UI elements around it. Common Scaffold properties include appBar for the top app bar, body for main content, floatingActionButton for the FAB, bottomNavigationBar for bottom nav, drawer for side menu, and backgroundColor for the scaffold background. Using Scaffold ensures your app follows Material Design guidelines and provides a consistent structure across screens.

6. Why should you use const constructors for widgets when possible?

Difficulty: MediumType: MCQTopic: Const Widgets

Using const constructors tells Flutter that the widget is completely immutable and can be reused across rebuilds without creating new instances. When Flutter sees a const widget, it knows the widget hasn't changed and can skip rebuilding that part of the tree entirely, significantly improving performance especially in frequently rebuilt parts of the UI. Const widgets are canonicalized, meaning identical const widgets share the same instance in memory, reducing memory allocation. When a parent rebuilds, const children are guaranteed to be the same instance, so Flutter's reconciliation algorithm knows it can reuse the corresponding Element and RenderObject without any work. Use const constructors whenever a widget and all its properties are compile-time constants that won't change. This is common for static UI elements like Text('Hello'), Icons, Padding with fixed values, and decorative elements. The Flutter analyzer will suggest adding const where possible, helping you optimize performance with minimal effort.

7. Explain the purpose and usage of Text, Image, and Icon widgets in Flutter.

Difficulty: EasyType: SubjectiveTopic: Widgets Basics

Text widget displays strings with styling options through the style parameter accepting TextStyle objects. You can customize font size, weight, color, letter spacing, line height, and more. Text supports overflow handling with properties like overflow: TextOverflow.ellipsis, maxLines for limiting lines, and textAlign for alignment. Use Text.rich for multiple styles in one text widget with TextSpan. Image widget displays images from various sources: Image.asset for bundled images in your app, Image.network for remote URLs, Image.file for device files, and Image.memory for byte data. Configure fit property to control how images scale (cover, contain, fill, fitWidth, fitHeight). Use width and height to size images, and cacheWidth/cacheHeight to optimize memory by resizing during decode. Icon widget displays Material Design icons from Icons class, which contains hundreds of pre-defined icons. Icons are vector graphics that scale perfectly at any size. Customize with size and color properties. Use IconButton to make icons tappable. Icons are lightweight and work well with themes - Icon.color defaults to theme's icon theme color if not specified. All three widgets are commonly used together in Flutter apps: Text for labels and content, Image for photos and graphics, Icon for symbolic representations. Understanding these fundamental widgets is essential for building any Flutter UI.

8. How do Expanded and Flexible work in Row and Column? Provide examples of when to use each.

Difficulty: MediumType: SubjectiveTopic: Flex Layout

Expanded and Flexible only work as direct children of Row, Column, or Flex widgets. They control how child widgets fill available space along the main axis. Without Expanded or Flexible, children are sized to their natural size, potentially causing overflow if the total size exceeds available space. Expanded forces its child to fill all allocated space based on flex value. For example, in a Row with two Expanded children (both flex: 1), each gets exactly 50% of available width even if their content is smaller. Use Expanded when you want widgets to always fill their allocated space, like equal-width buttons in a button bar or creating responsive layouts where sections should always consume their proportional space. Flexible allows children to occupy up to their allocated space but permits them to be smaller if they want. For example, in a Row with two Flexible children, if one's content is smaller than its allocated space, it only takes what it needs, and the extra space remains unused. Use Flexible when you want to give widgets the option to expand but respect their natural size preferences, like text that might wrap to fewer lines than expected. The flex parameter determines space distribution ratio. Default flex: 1 means equal sharing. If widgets have flex values 2, 1, 1, the first gets half the space and the others quarter each. Combine Expanded and Flexible in the same Row/Column for sophisticated layouts where some children must fill space while others can be flexible.

9. What are the main components of a Scaffold widget and how do you use them to build a screen?

Difficulty: EasyType: SubjectiveTopic: Scaffold

Scaffold's appBar property accepts a PreferredSizeWidget like AppBar, typically containing a title, leading widget (usually back button), and actions (icon buttons). AppBar is the standard top bar in Material Design apps showing screen title and navigation/action buttons. It automatically handles system status bar padding and material elevation. The body property contains the main content of your screen, accepting any widget. This is where you place your primary UI like lists, forms, or custom layouts. Scaffold automatically handles safe area padding for system UI elements like notches and navigation bars. The body is placed below the app bar and above bottom navigation if present. FloatingActionButton (FAB) is a circular button typically used for primary actions, positioned using floatingActionButtonLocation (default bottom right). BottomNavigationBar provides tab navigation at the bottom with BottomNavigationBarItem items. Drawer and endDrawer create slide-in side menus from left and right edges respectively, containing navigation items. Other useful properties include backgroundColor for scaffold background color, resizeToAvoidBottomInset to control resizing when keyboard appears, and snackbar/persistentFooterButtons for additional UI elements. Scaffold coordinates these components automatically, handling layout, safe areas, and Material motion. Understanding Scaffold structure is fundamental to building Material Design apps in Flutter.

10. How do Stack and Positioned widgets work together? Explain with examples of common use cases.

Difficulty: HardType: SubjectiveTopic: Stack Layout

Stack overlays children in paint order where first child is drawn first (bottom layer) and subsequent children are drawn on top. Positioned widget, used as Stack children, specifies exact positions using top, bottom, left, and right properties measured from Stack edges. If a property is not specified, the child is positioned relative to other specified properties or centered if none are specified. For example, Positioned(top: 10, left: 10, child: Icon(Icons.star)) places an icon 10 pixels from top and left edges. Positioned.fill makes a child fill the entire Stack. Use Positioned.directional for RTL-aware positioning. Children without Positioned are sized by Stack's constraints and aligned according to Stack's alignment property (default Alignment.topLeft). Common use cases include badges on icons using Stack with main widget and a Positioned badge in the corner, overlaying loading indicators on content, creating custom app bars with background images and overlaid text, building complex cards with layered content, and creating custom layouts where widgets overlap like profile pictures with edit buttons or image galleries with captions overlaid on images. Stack can use fit property to control how non-positioned children are sized: StackFit.loose (default) sizes children to their natural size within constraints, StackFit.expand forces non-positioned children to fill the Stack, and StackFit.passthrough passes constraints unchanged. Use clipBehavior to control whether children outside Stack bounds are clipped. Understanding Stack and Positioned is essential for creating sophisticated overlapping layouts.

11. Explain the principle of widget composition in Flutter and why it's preferred over inheritance.

Difficulty: MediumType: SubjectiveTopic: Widgets Basics

Widget composition means building complex widgets by combining simpler widgets together rather than using inheritance to add functionality. Flutter's entire UI framework is built on this principle - even complex widgets like Scaffold or Card are compositions of simpler widgets like Container, Padding, Material, and others internally. This approach makes Flutter more flexible and maintainable. Composition is preferred over inheritance because it's more flexible, avoiding deep inheritance hierarchies that are hard to understand and maintain. You can mix and match widgets in any combination to create custom UIs without being constrained by an inheritance structure. Flutter's widgets are designed as building blocks that work together through composition rather than complex inheritance relationships. For example, instead of creating a CustomButton that extends Button and overrides styling, you compose existing widgets: Container with decoration for appearance, GestureDetector for tap handling, and Text for label. This approach is more flexible because you can easily modify any part of the composition, reuse pieces in other contexts, and avoid the fragile base class problem. When building custom widgets, create StatelessWidget or StatefulWidget classes that compose existing widgets in their build methods. Extract reusable widget combinations into separate widget classes rather than using helper methods, as separate widget classes enable Flutter's optimization mechanisms. This composition-first approach makes Flutter code more modular, testable, and maintainable.

12. When and why do you need to use Keys in Flutter widgets? What are the different types of keys?

Difficulty: HardType: SubjectiveTopic: Widget Keys

Keys are required when you need to preserve the state of widgets across rebuilds when their position in the widget tree changes, most commonly in lists where items can be reordered, removed, or added. Without keys, Flutter matches widgets by type and position, which can cause state to be associated with the wrong widget or lost entirely when the tree structure changes. ValueKey uses a value to identify widgets, useful when widgets can be uniquely identified by some data property like an ID. ObjectKey uses object identity for identification. UniqueKey generates a unique key automatically, useful when you need to force Flutter to treat widgets as different. GlobalKey provides access to the widget's state from anywhere in the app and preserves state even when the widget moves to a completely different location in the tree. Example: In a list of stateful widgets (like text fields), if you remove an item from the middle without keys, the state gets confused and may appear on wrong items. Adding ValueKey(item.id) to each item tells Flutter which widget is which, preserving state correctly. Use keys at the level where the problem occurs - typically on the widget that has state or is the child of a list. GlobalKey is more expensive and should be used sparingly, only when you need to access widget state from outside or preserve state across major tree restructuring. For most cases, ValueKey or ObjectKey are sufficient and more efficient. Understanding when to use keys is crucial for building complex dynamic UIs with lists and animations.

13. What is the purpose of the Container widget in Flutter?

Difficulty: EasyType: MCQTopic: Common Widgets

Container is a versatile widget that combines several common widgets like Padding, Align, DecoratedBox, and ConstrainedBox into one convenient package. It can apply padding, margins, borders, background colors, transformations, and size constraints to its child widget, making it one of the most frequently used widgets in Flutter. You can use Container for simple boxes with decorations, spacers with width and height, applying padding and margins, clipping content, transforming child widgets, and more. However, if you only need one specific behavior like padding, it's more efficient to use the specific widget (Padding) rather than Container. Container without a child tries to be as big as possible unless given constraints. With a child, it sizes itself to the child. You can specify width, height, or use constraints. Common properties include color, decoration (for gradients, borders, shadows), padding, margin, alignment, and transform.

14. What is the difference between Expanded and Flexible widgets?

Difficulty: MediumType: MCQTopic: Flex Layout

Expanded is a shorthand for Flexible with fit: FlexFit.tight, forcing its child to fill all available space along the main axis of Row or Column. The child must occupy the space allocated by the flex value, even if it would prefer to be smaller. Use Expanded when you want widgets to fill available space proportionally. Flexible with fit: FlexFit.loose (default) allows its child to be smaller than the allocated space if the child wants to be smaller. The child can occupy up to the allocated space but isn't forced to fill it all. Use Flexible when you want to give widgets the option to expand but allow them to be smaller if their natural size is less. Both use the flex property (default 1) to determine how much space to allocate relative to other Flexible/Expanded children. For example, if two children have flex: 1, they split available space equally. If one has flex: 2 and another flex: 1, the first gets twice the space. Understanding this distinction helps create responsive layouts.

15. Explain the differences between Padding, Margin, Center, and Align widgets and when to use each.

Difficulty: MediumType: SubjectiveTopic: Layout Widgets

Padding widget adds empty space inside a widget, between the widget's boundary and its child. It takes EdgeInsets parameter specifying padding amount: EdgeInsets.all for uniform padding, EdgeInsets.symmetric for horizontal/vertical, or EdgeInsets.only for specific sides. Padding increases the widget's total size by the padding amount and is commonly used to create breathing room around content. Margin is not a separate widget but a property of Container. It adds space outside the widget, between the widget and its neighbors or parent. The difference is subtle: padding is inside the widget's decoration (background, border), while margin is outside. If you only need margin without Container's other features, use Padding widget on the parent instead for better performance. Center widget centers its child within available space, both horizontally and vertically. It's equivalent to Align with alignment: Alignment.center but more explicit and readable. Center expands to fill available space, then positions its child at the center. Use Center when you want simple centering without additional alignment options. Align widget positions its child within itself using Alignment values ranging from -1 to 1 on x and y axes. Alignment.topLeft is (-1, -1), Alignment.center is (0, 0), Alignment.bottomRight is (1, 1). Align gives precise control over positioning and is more powerful than Center. Use FractionalOffset for percentage-based positioning (0.0 to 1.0 range instead of -1 to 1).

16. What are SizedBox and Spacer widgets used for? How do they differ from Container?

Difficulty: EasyType: SubjectiveTopic: Layout Widgets

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.

Master Interviews
Anywhere, Anytime

Widgets & Widget Tree – Flutter interview questions

Set overview

Flutter – Widgets & Widget Tree questions (16)

1. What does the Stack widget do in Flutter?

Continue your preparation

2. What is a Widget in Flutter?

3. What is the main difference between StatelessWidget and StatefulWidget?

4. What is the difference between Row and Column widgets?

5. What is the purpose of the Scaffold widget?

6. Why should you use const constructors for widgets when possible?

7. Explain the purpose and usage of Text, Image, and Icon widgets in Flutter.

8. How do Expanded and Flexible work in Row and Column? Provide examples of when to use each.

9. What are the main components of a Scaffold widget and how do you use them to build a screen?

10. How do Stack and Positioned widgets work together? Explain with examples of common use cases.

11. Explain the principle of widget composition in Flutter and why it's preferred over inheritance.

12. When and why do you need to use Keys in Flutter widgets? What are the different types of keys?

13. What is the purpose of the Container widget in Flutter?

14. What is the difference between Expanded and Flexible widgets?

15. Explain the differences between Padding, Margin, Center, and Align widgets and when to use each.

16. What are SizedBox and Spacer widgets used for? How do they differ from Container?

More sets in Flutter

Explore related subjects

Master Interviews Anywhere, Anytime

Widgets & Widget Tree – Flutter interview questions

Set overview

1. What does the Stack widget do in Flutter?

Continue your preparation

2. What is a Widget in Flutter?

3. What is the main difference between StatelessWidget and StatefulWidget?

4. What is the difference between Row and Column widgets?

5. What is the purpose of the Scaffold widget?

6. Why should you use const constructors for widgets when possible?

7. Explain the purpose and usage of Text, Image, and Icon widgets in Flutter.

8. How do Expanded and Flexible work in Row and Column? Provide examples of when to use each.

9. What are the main components of a Scaffold widget and how do you use them to build a screen?

10. How do Stack and Positioned widgets work together? Explain with examples of common use cases.

11. Explain the principle of widget composition in Flutter and why it's preferred over inheritance.

12. When and why do you need to use Keys in Flutter widgets? What are the different types of keys?

13. What is the purpose of the Container widget in Flutter?

14. What is the difference between Expanded and Flexible widgets?

15. Explain the differences between Padding, Margin, Center, and Align widgets and when to use each.

16. What are SizedBox and Spacer widgets used for? How do they differ from Container?

More sets in Flutter

Explore related subjects

Master Interviews
Anywhere, Anytime