Creating a Responsive UI in Flutter for All Screen Sizes

Every Flutter developer dreams of building an app that looks beautiful and consistent across all devices, especially on mobile devices. But in reality, we often end up using quick fixes by adding padding, hardcoded sizes, or temporary layouts that look perfect on one phone but break on another. 

In this blog, I’ll walk you through how to design a responsive Flutter UI that automatically adapts to any screen size, whether it’s a small mobile, a large tablet, or even a desktop display. 

Why is Responsiveness Important?

Apps are used on a wide range of devices — from small smartphones to large tablets and even desktops. Each device has a different screen size, resolution, and aspect ratio. 

If your app isn’t responsive, the layout that looks perfect on your phone might break, overflow, or look awkward on another device, which can negatively impact user trust and experience. 

A responsive design ensures that your layout automatically adapts to any screen, keeping your app visually consistent, user-friendly, and professional across all devices. 

Step 1: Detecting Screen Resolution and Size 

Flutter provides handy ways to get screen information using MediaQuery. 

Example: 

final size = MediaQuery.of(context).size; 

final height = size.height; 

final width = size.width; 

 

Container( 

  height: height * 0.3,  // 30% of screen height 

  width: width * 0.8,    // 80% of screen width 

  color: Colors.blueAccent, 

  child: Center(child: Text('Responsive Box')), 

); 

Tip: Use percentages of the screen size (like width * 0.x) instead of fixed pixels so your layout scales automatically. 

Step 2: Use Flexible and Expanded Widgets

Instead of giving widgets a fixed width or height (hardcoding), you can use widgets that automatically adjust their size based on the available space. 

• Hardcoded size: 

Container( 

  width: 200,  

  height: 100,  

  color: Colors.blue, 

) 

This container will always be 200×100 pixels, no matter the screen size. 

• Dynamic/adaptive size using Expanded or Flexible: 

final screenHeight = MediaQuery.of(context).size.height; 
Row( 
  children: [ 
    Expanded( 
      flex: 2, 
      child: Container(color: Colors.blue, height: screenHeight * 0.2), 
    ), 
    Expanded( 
      flex: 1, 
      child: Container(color: Colors.green, height: screenHeight * 0.2), 
    ), 
  ], 
) 

Tip: Don’t set a fixed width or height for your widgets. Use layout widgets like Expanded or Flexible so they adapt automatically to different screen sizes. 

Step 3: Use LayoutBuilder for Adaptive Widgets: 

LayoutBuilder is a Flutter widget that builds a widget tree based on the size constraints of its parent. It allows widgets to adapt dynamically to the available space. 

Unlike fixed layouts, LayoutBuilder provides the parent’s maximum width and height via BoxConstraints, so you can change your layout depending on the screen size or container size. 

Example: 

LayoutBuilder( 
  builder: (context, constraints) { 
    if (constraints.maxWidth < 600) { 
      return Column( 
        children: const [ 
          Text('Mobile View'), 
        ], 
      ); 
    } else { 
      return Row( 
        children: const [ 
          Text('Tablet/Desktop View'), 
        ], 
      ); 
    } 
  },); 

Note:  

Show vertical layout for below 600px 

Show horizontal layout above 600px 

“Below/Above 600px” refers to the screen width being less/greater than 600 pixels. 

• Below 600px: Usually considered a mobile screen. 

• 600px – 1024px: a tablet screen. 

• Above 1024px: a desktop screen.

Step 4: Use FittedBox and AspectRatio for Scaling 

This can be used when you want text or images to scale automatically with the available space or to maintain a fixed aspect ratio. 

Example: 

FittedBox( 
  fit: BoxFit.scaleDown, 
  child: Text( 
    'Responsive Text', 
    style: TextStyle(fontSize: 32), ), 
); 

AspectRatio( 
  aspectRatio: 16 / 9, 
  child: Container(color: Colors.black), 
);

Step 5: Responsive Padding and Margins 

Use EdgeInsets.symmetric or EdgeInsets.all based on screen width. This ensures the UI doesn’t look wide on small devices or too spaced out on large screens. 

Example: 

Padding( 
  padding: EdgeInsets.symmetric( 
    horizontal: MediaQuery.of(context).size.width * 0.05, 
  ), 
  child: Text('Adaptive Padding Example'), 
); 

Step 6: Handle Orientation Changes 

Flutter supports responsive orientation layouts with OrientationBuilder. It is a general-purpose Flutter widget that can be used to build any part of a widget tree differently depending on the orientation of its parent widget. But the common use case is to adjust the layout of GridView. 

Example: 

OrientationBuilder( 
  builder: (context, orientation) { 
    return GridView.count( 
      crossAxisCount: orientation == Orientation.portrait ? 2 : 4, 
      children: List.generate(8, (index) => Card(child: Center(child: Text('Item $index')))), 
    ); 
  }, 
); 

Note: MediaQuery is an alternative to OrientationBuilder. 

Step 7: Responsive Images and Fonts 

Just like layouts, images and text also need to scale properly on different screen sizes. Without responsiveness, images can look too big or too small, and text can be unreadable on some devices. 

1. Responsive Images

For this, use MediaQuery or ScreenUtil to set image sizes relative to the screen width. 

Example: 

Image.asset( 
  'assets/banner.png', 
  width: MediaQuery.of(context).size.width * 0.9,  
  fit: BoxFit.cover 
); 

2. Responsive Fonts

For text, do not use fixed font sizes. Instead use MediaQuery or packages like flutter_screenutil. 

Using MediaQuery: 

Text( 
  'Responsive Text', 
  style: TextStyle( 
    fontSize: MediaQuery.of(context).size.width * 0.05,  
  ), 
); 

Using ScreenUtil: 

Text( 
  'Responsive Text', 
  style: TextStyle(fontSize: 16.sp),  
); 

Using this text remains readable on both small phones and large tablets. 

Step 8:Use Third-Party Packages 

To achieve UI responsiveness in a simpler way, we can use some third-party packages as well. 

1. flutter_screenutil : Scales font, width, and height automatically. 
2. responsive_builder: Defines custom breakpoints for mobile, tablet, and desktop. 
3. sizer: This is a Flutter plugin that simplifies the creation of responsive UIs. It automatically adapts your UI to different screen sizes. 
4. device_frame: Preview app UI on different devices easily. 

Building a responsive UI in Flutter, ensuring that the app looks great on all devices, from small smartphones to large tablets and desktops. 

In this blog, I’ve covered the key points that will help you create a responsive UI, and while writing it, I also learned a few new things that I’m excited to apply to my future projects. 

By following these techniques, the Flutter app will remain responsive, user-friendly, and professional on any screen size. 

---

For more details about such case studies, visit us at www.corecotechnologies.com and if you would like to convert this virtual conversation into a real collaboration, please write to [email protected].