Responsive and Adaptive Apps in Flutter

here we discuss the difference and usage of Adaptive and Responsive design.

Flutter’s primary goal is to make a framework for developing apps that look and feel great on any platform from a single codebase.

Depending on the screen size, you may see your app on a watch, a foldable phone with two screens, or a high-definition monitor.

The concepts adaptive and responsive can be used to describe this scenario. In an ideal world, your app would be both, but what does that really mean? Despite their similarities, these terms are not the same.

If you’d like a quick and easy explanation, watch this video:

The difference between an adaptive and a responsive app

Apps can be adaptive but not responsive, or vice versa. They can be both responsive and adaptive. There is no hard and fast rule as to whether an app is either or neither.

Based on the information I have gathered, adaptive design has a set of predefined layouts. When it is run in the browser, in this case, will select the appropriate layout for that screen size. The layout will remain the same if the browser or window is resized, but with a responsive design, the page will adapt according to the changes. You can either make some elements bigger or you can show/hide some others.

1. Responsive:- Basically, responsiveness describes the ability to adapt to changing screen sizes. The layout must adjust to different screen sizes and orientations so that the user feels comfortable. Apps should run on all types of devices, including watches, phones, and tablets, as well as laptops and desktops.
2. Adaptive:- A mobile application that is adaptive must adapt to the platform or device so that it can use features that are only available on those platforms. It requires dealing with the mouse, keyboard, and touch input when adapting an app for different device types, including mobile and desktop devices. Furthermore, platform-specific features (such as top-level windows), visual density, and component selection differ depending on the platform (cascading menus versus bottom sheets, for example).

Create responsive Flutter apps with this option

Flutter lets you build apps that automatically adjust to the size and orientation of a device’s screen. Flutter’s responsive design doesn’t have a one-size-fits-all solution. Your Flutter application can be responsive in a number of ways.

According to the official documentation, there are several ways to do this:

1. LayoutBuilder

There is a builder property in LayoutBuilder that can provide us with the BoxConstraint object, which contains the constraint information for a particular widget. For determining how our display should be rendered, we can use information such as maxWidth and maxHeight.

The size constraints assigned to our widget will help us adjust the display accordingly. Furthermore, when these values change due to screen rotation, LayoutBuilder calls our build function which rebuilds the widget based on the new constraints.

2. MediaQuery

With MediaQuery, we are not only able to get the widget size, but also the overall screen size and device orientation of our application at runtime.

As soon as those configurations are changed, our build method will also run, ensuring that our widget tree is updated with the latest data.

3. AspectRatio

With AspectRatio, you can size the child according to a set aspect ratio.
First, the widget tries the widest width allowed by the layout constraints. Using the given aspect ratio, the widget’s height is calculated as a ratio of width to height.

Also, so many approaches are useful for creating responsive design. Other useful widgets and classes for creating a responsive UI:

• OrientationBuilder
• LayoutBuilder
• FittedBox
• FractionallySizedBox
• MediaQuery
• MediaQueryData
• CustomSingleChildLayout
• CustomMultiChildLayout

An easier approach to responsiveness in Flutter

if you are quite confused and tense think about what approach and which one we will use in our app, so there are other options as well, but it depends on your choice like there are two libraries available for it

• FlutterScreenUtil
• Responsive Sizer

Create adaptive Flutter apps with this option

Flutter allows developers to build apps that run on mobile, desktop, and the web from a single codebase. However, with these opportunities, come new challenges. Users expect your app to feel familiar, adapting to each platform and ensuring a seamless and comfortable experience. Apps need to be more than multiplatform. They should be fully platforming agnostic.

ok, so let’s discuss some approaches which help us for creating an Adaptive app.

1. Mouse enter, exit, and hover

Mouse cursors on desktops are usually changed as the mouse hovers over content to indicate its functionality. The cursor usually appears as a hand over a button or as an I over text when hovered.

MouseRegion is also useful for creating custom rollover and hover effects:

2. Drag and drop

Drag and drop is a core interaction for both touch-based and pointer-based inputs. When scrolling lists of draggable items, there are important differences to consider, even though this interaction is expected for both types of input.
A drag handle is generally expected to separate draggable areas from scrollable ones, or users may initiate a drag by long-pressing. Because scrolling and dragging both uses the same finger, both can be input simultaneously.

3. Scrollbar appearance and behavior

Users expect scrollbars on desktops and mobile devices, but they expect them to behave differently. Desktop users generally expect omnipresent, larger scrollbars they can click or drag, whereas mobile users prefer smaller scrollbars that pop up only when scrolling.

4. Visual density

Due to the different levels of precision offered by different input devices, hit areas have to be sized differently. By using the VisualDensity class, Flutter permits you to easily adjust the density of your views throughout your application, such as making buttons larger (and therefore easier to tap) on a touchscreen.

MaterialComponents that support VisualDensity are animated to match it when you change the VisualDensity for your MaterialApp. By default, both horizontal and vertical densities are set to 0.0, but you can set the densities to any negative or positive value that you want. You can easily adjust your UI by switching between densities:

To set a custom visual density, inject the density into your MaterialApp theme:

5. Selectable text

The mouse cursor is commonly expected to select the most visible text on the web (and to a lesser extent on the desktop). It is common for users on the web to have negative reactions when the text is not selectable.

The SelectableText widget makes it easy to support this:

So that’s all the information that helps us for creating an adaptive and responsive Application, that I want to describe in short. I took it from many websites as some research if you find out any wrong info or miscorrected, please point out or comment below.

If you got something wrong? Mention it in the comments. I would love to improve. your support means a lot to me! If you enjoy the content, I’d be grateful if you could consider subscribing to my YouTube channel as well.

I am Shirsh Shukla, a creative Developer, and a Technology lover. You can find me on LinkedIn or maybe follow me on Twitter or just walk over my portfolio for more details. And of course, you can follow me on GitHub as well.

Have a nice day!🙂

Shirsh Shukla is All about flutter 💙💙💙💙