0

I saw many articles and videos on how to do responsive design in flutter. But they all have in common, that they show a standard web page with menu, pictures, text.

What I call "real" in the title, means a full interactive application, so with displaying tables of data, providing input fields and other input elements, showing charts, ... - so all the interaction of a "real" application, not just a web site.

Simple example: If I have a large data table on a desktop screen, it has to be different on a mobile screen to show data in a way, the user can read it and use it sensibly.

So, how do I make the app responsive for all screen sizes without having to implement something twice or have case distinctions all over the place?

Alexander Rühl
  • 6,769
  • 9
  • 53
  • 96
  • “Real” responsive apps are built _without Flutter_. – Dai Jun 26 '22 at 05:24
  • @Dai Why? Everything for a full app should be available. – Alexander Rühl Jun 26 '22 at 05:49
  • 1
    Well, best way to make an app/web responsive is by using LayoutBuilder in my opinion. We can use LayoutBuilder Widget to display different UI’s for different screen sizes. For more info about layout builder please go through docs. – Md. Kamrul Amin Jun 26 '22 at 12:22

1 Answers1

1
  1. Refractor codes into widgets. (very important to reduce boiler plates)
  2. Create an idea on how the webpage will look like based on 12 grid system
  3. In build method check for screen size and return layout based on the screen size.

Please note

  1. The widgets should be responsive by itself based on the size available. For example a chart widget. It should build a chart within the space provided by its parent.
  2. There may be instances where in desktop some elements are in a row and the same element will be in a column in mobile. So you can also write sections like banner section (define web and phone layout), about us section etc so its easier to manage
  3. Use wrap widget to automatically bring widgets down based on screen size
  4. Use BoxConstrains and max width to control a Containers max width
  5. For tables you can use packages like responsive tables
Kaushik Chandru
  • 15,510
  • 2
  • 12
  • 30