Creating a Responsive UI in Flutter: A Step-by-Step Guide

Building responsive user interfaces (UI) is essential for providing a seamless experience across various device sizes, such as mobile phones, tablets, and desktops. In this blog post, we’ll explore how to create a responsive UI in Flutter using a custom Responsive widget. This widget adapts the layout based on the screen size, ensuring your app looks great on any device.

Step-by-Step Guide to Creating a Responsive Widget in Flutter

Here’s how you can create a Responsive widget in Flutter to handle different layouts for mobile, tablet, and desktop devices.

Step 1: Import the Necessary Packages

First, import the material.dart package, which provides the material design components and functionalities.

import 'package:flutter/material.dart';

Step 2: Define the Responsive Widget

Next, create a Responsive widget by extending the StatelessWidget class. This widget will take three parameters: mobile, tablet, and desktop, representing the different layouts for respective device types.

class Responsive extends StatelessWidget {
  const Responsive({
    super.key,
    required this.mobile,
    this.tablet,
    required this.desktop,
  });

  final Widget mobile;
  final Widget? tablet;
  final Widget desktop;

  static bool isMobile(BuildContext context) =>
      MediaQuery.of(context).size.width < 800;

  static bool isTablet(BuildContext context) =>
      MediaQuery.of(context).size.width >= 800 &&
      MediaQuery.of(context).size.width < 1200;

  static bool isDesktop(BuildContext context) =>
      MediaQuery.of(context).size.width >= 1200;

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        if (constraints.maxWidth >= 1200) {
          return desktop;
        } else if (constraints.maxWidth >= 800 &&
                   constraints.maxWidth < 1200) {
          return tablet ?? mobile;
        } else {
          return mobile;
        }
      },
    );
  }
}

Explanation of the Code

1. Helper Methods:
2. • If the width is 1200 pixels or more, it returns the desktop layout.
   • If the width is between 800 and 1199 pixels, it returns the tablet layout if provided; otherwise, it falls back to the mobile layout.
   • If the width is less than 800 pixels, it returns the mobile layout.

build Method:

@override
Widget build(BuildContext context) {
  return LayoutBuilder(
    builder: (context, constraints) {
      if (constraints.maxWidth >= 1200) {
        return desktop;
      } else if (constraints.maxWidth >= 800 &&
                 constraints.maxWidth < 1200) {
        return tablet ?? mobile;
      } else {
        return mobile;
      }
    },
  );
}

The build method uses a LayoutBuilder to determine the appropriate layout based on the screen width:

isDesktop: Determines if the device is a desktop based on its width.

static bool isDesktop(BuildContext context) =>
    MediaQuery.of(context).size.width >= 1200;

isTablet: Determines if the device is a tablet based on its width.

static bool isTablet(BuildContext context) =>
    MediaQuery.of(context).size.width >= 800 &&
    MediaQuery.of(context).size.width < 1200;

isMobile: Determines if the device is a mobile based on its width.

static bool isMobile(BuildContext context) =>
    MediaQuery.of(context).size.width < 800;

Constructor:

const Responsive({
  super.key,
  required this.mobile,
  this.tablet,
  required this.desktop,
});

The constructor initializes the mobile, tablet, and desktop widgets.

Benefits of Using a Responsive Widget

• Consistency: Ensures a consistent UI across different devices.
• Maintainability: Simplifies the management of different layouts within a single widget.
• User Experience: Enhances the user experience by providing optimized layouts for different screen sizes.

Example Usage

Here’s an example of how to use the Responsive widget in your Flutter app:

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Responsive UI Demo',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Responsive UI Demo'),
        ),
        body: const Responsive(
          mobile: MobileScreen(),
          tablet: TabletScreen(),
          desktop: DesktopScreen(),
        ),
      ),
    );
  }
}

class MobileScreen extends StatelessWidget {
  const MobileScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text('Mobile Screen'),
    );
  }
}

class TabletScreen extends StatelessWidget {
  const TabletScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text('Tablet Screen'),
    );
  }
}

class DesktopScreen extends StatelessWidget {
  const DesktopScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text('Desktop Screen'),
    );
  }
}

Conclusion

Implementing a responsive UI in Flutter is straightforward with the custom Responsive widget. By following this guide, you can ensure your app provides an optimal experience across all device types, from mobile phones to large desktop screens. This approach not only enhances user experience but also simplifies the maintenance and scalability of your app’s UI.

By using the Responsive widget, you can easily manage different layouts within your Flutter app, ensuring a seamless and consistent user experience across various screen sizes. Happy coding!