Responsive Design in Flutter

# CHAPTER 26

Responsive Design in Flutter #

1. Introduction #

2. Learning Objectives #

• Retrieve screen dimensions and orientation using MediaQuery.

• Use percentage-based sizing instead of hardcoded pixels.

• Implement LayoutBuilder to change UI structures based on available space.

• Build a responsive layout that adapts from Mobile to Tablet.

3. Reading the Screen (MediaQuery) #

@override
Widget build(BuildContext context) {
  // Read the screen dimensions!
  double screenWidth = MediaQuery.of(context).size.width;
  double screenHeight = MediaQuery.of(context).size.height;
  bool isPortrait = MediaQuery.of(context).orientation == Orientation.portrait;

  return Scaffold(
    body: Container(
      // Never hardcode 400! Use percentages!
      width: screenWidth * 0.8, // Takes up exactly 80% of the screen width!
      height: screenHeight * 0.5, // Takes up 50% of the height!
      color: Colors.blue,
    ),
  );
}

4. Localized Breakpoints (LayoutBuilder) #

LayoutBuilder(
  builder: (context, constraints) {
    // If the widget has less than 600 pixels of space...
    if (constraints.maxWidth < 600) {
      // Build a Mobile Layout (Vertical Column)
      return Column(
        children: [ Icon(Icons.home), Text("Home") ],
      );
    } else {
      // If it has MORE than 600 pixels (Tablet/Web)...
      // Build a Desktop Layout (Horizontal Row)
      return Row(
        children: [ Icon(Icons.home), Text("Home Screen") ],
      );
    }
  },
)

5. Architectural Pattern: Mobile vs Tablet UI #

• Mobile: A single list. You tap an item, it navigates to a new screen.

• Tablet: A split screen. The list is on the left, and tapping an item shows the details on the right simultaneously!

@override
Widget build(BuildContext context) {
  double width = MediaQuery.of(context).size.width;

  if (width < 600) {
    return MobileListViewScreen(); // Standard 1-page UI
  } else {
    return SplitScreenTabletUI(); // 2-page UI using Rows and Expanded!
  }
}

6. SafeArea (Dodging the Notch) #

7. Visual Learning: The Tablet Split Screen #

[ MOBILE (< 600px) ]         [ TABLET/WEB (> 600px) ]
+------------------+         +-----------------+-----------------------+
|  Item 1          |         |  Item 1         |                       |
|  Item 2          |         | >Item 2         |    DETAILS FOR        |
|  Item 3          |         |  Item 3         |    ITEM 2 GO HERE     |
+------------------+         +-----------------+-----------------------+

8. Common Mistakes #

• Hardcoding height: 800: If you hardcode a container to be 800 pixels tall, it will look perfect on your iPhone 14 Pro Max emulator. The moment a user downloads it on a small iPhone SE, the screen will overflow with yellow and black caution tape. NEVER hardcode absolute heights for main layout structures. Use Expanded or MediaQuery percentages.

9. Best Practices #

• Responsive GridView: Instead of hardcoding crossAxisCount: 2 in a GridView, use MediaQuery.

10. Mini Project: Responsive Navigation Shell #

1. 1. Use LayoutBuilder at the root of your Scaffold.

1. 2. If constraints.maxWidth < 600: Return a standard Scaffold with a BottomNavigationBar (exactly as taught in Chapter 13).

1. 3. If constraints.maxWidth >= 600: Return a Scaffold where the body is a Row.

1. 4. The first child of the Row is a NavigationRail widget (Flutter's built-in side-menu for desktops).

1. 5. The second child is an Expanded(child: MainContent()).

1. 6. Resize your web browser window. Watch the UI magically snap from a phone layout to a professional desktop layout!

11. Practice Exercises #

1. 1. What widget automatically adds padding to prevent your UI from rendering underneath the iPhone's physical camera notch?

1. 2. What class is used to retrieve the absolute pixel width and height of the device's screen?

12. MCQs with Answers #

13. Interview Questions #

• Q: Explain the mechanical and architectural differences between MediaQuery and LayoutBuilder. When is it strictly incorrect to use MediaQuery?

• Q: Describe how you would implement a responsive GridView that displays 2 columns on mobile, 4 on tablet, and 6 on desktop.

• Q: What is the SafeArea widget, and what specific hardware evolution in modern smartphones necessitated its creation?

14. FAQs #

15. Summary #

16. Next Chapter Recommendation #