Describe a strategy for ListView on phones and GridView on tablets

What's really being asked

This question probes your ability to build adaptive UIs in Flutter using layout-aware widgets rather than device-type assumptions. Interviewers want to see that you separate layout logic from device identity and that you know which widgets expose constraint and size information.

The full answer

First, name LayoutBuilder as the preferred widget because it receives the parent's BoxConstraints, letting you decide based on the actual available space rather than the full screen size. Second, mention MediaQuery.of(context).size or MediaQuery.sizeOf(context) as an alternative when you need the full screen dimensions or want to react to system-level changes. Third, state a concrete breakpoint; the Material Design guidelines suggest 600 dp as the threshold between compact and medium layouts, so widths below 600 dp render a ListView and widths at or above 600 dp render a GridView. Fourth, explain that you return the appropriate widget from a conditional inside the build method or a dedicated builder method, keeping the data source identical so only the presentation changes. Fifth, note that OrientationBuilder is insufficient on its own because a phone in landscape can be wider than a small tablet in portrait, meaning width beats orientation for this decision.

The mistakes people make

Relying on Platform.isAndroid or Platform.isIOS to decide layout is a major anti-pattern because layout should depend on available space, not operating system. Using Orientation.portrait versus Orientation.landscape misses large phones and foldables in landscape. Hard-coding pixel values like 800 without referencing density-independent pixels shows a lack of understanding of Flutter's device-independent rendering. Finally, rebuilding the entire screen with setState when the user rotates is wasteful; LayoutBuilder already rebuilds automatically when constraints change.

What usually comes next

How would you handle a foldable device with two screens? The interviewer expects mention of MediaQuery.displayFeatures or the TwoPane widget from the flutter_adaptive_scaffold package. What if the list items have different aspect ratios in grid cells? You should discuss GridView.builder with a SliverGridDelegateWithMaxCrossAxisExtent or fixed cross-axis counts. How do you avoid rebuilding the list when switching layouts? You would keep the scroll controller and data source outside the conditional so state persists.

A concrete example

Suppose you wrap the body in a LayoutBuilder. Inside the builder, you check if constraints.maxWidth is greater than 600. If true, you return GridView.builder with crossAxisCount set to two and itemBuilder pointing to your existing card widget. If false, you return ListView.builder with the same itemBuilder and itemCount. Both widgets read from the same list variable, so no data duplication occurs, and the transition is instantaneous when the window resizes on desktop or tablet.