• About WordPress
    • WordPress.org
    • Documentation
    • Support
    • Feedback
  • Log In
  • Register
  • Home
  • Courses
  • Past Paper
  • FYP
  • Interview Questions
  • University Events
  • Contact
  • Quiz & Assignment
Cuitutorial
  • Home
  • Courses
  • Past Paper
  • FYP
  • Interview Questions
  • University Events
  • Contact
  • Quiz & Assignment

Mobile Application Development

Home » Blog » Creating responsive and adaptive apps in flutter

Creating responsive and adaptive apps in flutter

  • Posted by saqib
  • Categories Mobile Application Development
  • Date November 2, 2022
  • Comments 0 comment

How to Creating responsive and adaptive apps in flutter

How to Creating responsive and adaptive apps in flutter

One of Flutter’s primary goals is to create a framework that allows you to develop apps from a single codebase that look and feel great on any platform.

This means that your app may appear on screens of many different sizes, from a watch, to a foldable phone with two screens, to a high def monitor.

Two terms that describe concepts for this scenario are adaptive and responsive. Ideally, you’d want your app to be both but what, exactly, does this mean? These terms are similar, but they are not the same.

The difference between an adaptive and a responsive app

Adaptive and responsive can be viewed as separate dimensions of an app: you can have an adaptive app that is not responsive, or vice versa. And, of course, an app can be both, or neither.

Responsive
Typically, a responsive app has had its layout tuned for the available screen size. Often this means (for example), re-laying out the UI if the user resizes the window, or changes the device’s orientation. This is especially necessary when the same app can run on a variety of devices, from a watch, phone, tablet, to a laptop or desktop computer.
Adaptive
Adapting an app to run on different device types, such as mobile and desktop, requires dealing with mouse and keyboard input, as well as touch input. It also means there are different expectations about the app’s visual density, how component selection works (cascading menus vs bottom sheets, for example), using platform-specific features (such as top-level windows), and more.

Creating a responsive Flutter app

Flutter allows you to create apps that self-adapt to the device’s screen size and orientation.

There are two basic approaches to creating Flutter apps with responsive design:

Use the LayoutBuilder class
From its builder property, you get a BoxConstraints object. Examine the constraint’s properties to decide what to display. For example, if your maxWidth is greater than your width breakpoint, return a Scaffold object with a row that has a list on the left. If it’s narrower, return a Scaffold object with a drawer containing that list. You can also adjust your display based on the device’s height, the aspect ratio, or some other property. When the constraints change (for example, the user rotates the phone, or puts your app into a tile UI in Nougat), the build function runs.
Use the MediaQuery.of() method in your build functions
This gives you the size, orientation, etc, of your current app. This is more useful if you want to make decisions based on the complete context rather than on just the size of your particular widget. Again, if you use this, then your build function automatically runs if the user somehow changes the app’s size.

Other useful widgets and classes for creating a responsive UI:

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

Creating an adaptive Flutter app

  • Share:
author avatar
saqib

Previous post

Building layouts in Flutter
November 2, 2022

Next post

Building adaptive apps in Flutter
November 2, 2022

You may also like

Beautiful UI design in flutter
5 January, 2023

Beautiful UI design in flutter In project home page import velocity and put the previous lecture list with the following properties import ‘package:flutter/material.dart’; import ‘package:flutter/services.dart’; import ‘dart:convert’; import ‘package:flutter_catalog/models/catalog.dart’; import ‘package:flutter_catalog/widgets/drawer.dart’; import ‘package:flutter_catalog/widgets/item_widget.dart’; import ‘package:flutter_catalog/widgets/themes.dart’; import ‘package:velocity_x/velocity_x.dart’; class HomePage extends …

GridView GridTile in flutter
29 December, 2022

GridView GridTile in flutter A grid view is a graphical control element used to show items in the tabular form. In this section, we are going to learn how to render items in a grid view in the Flutter application GridView …

Json Mapping-Data Class Generator-ProgressIndicator
20 December, 2022

Json Mapping-Data Class Generator-Progress Indicator in Flutter if we have to get data in json formate than we first have to map the data in catalog.dart file like this import ‘dart:convert’; class CatalogModel { static List<Item> items; } class Item …

Leave A Reply Cancel reply

You must be logged in to post a comment.

admin@cuitutorial.com
Facebook-f Twitter Youtube Linkedin Instagram Stack-overflow Pinterest Github Quora Whatsapp
Courses
  • All Courses
  • Past Paper
  • Final year projects
  • Interview Questions
  • Contact
Important Pages
  • Privacy Policy
  • Terms of Service
  • Cookie Policy
Links
  • University Events
  • Team
Education & learning platform for All Computer science subjects
Final year projects
Past Paper
Interview questions
Programming, C/C++, Asp.net/MVC. Android, MySql, Jquery, Ajax, javascript, Php, Html5, Bootstrap4.
NTS, GAT, PPSC, FPSC

Copyright © 2021 | Cuitutorial