CODEWITHSUNDEEP
androidflutterdartuser-interfaceresponsive-design
Tedd Samo
Tedd Samo

Reputation: 1

Flutter responsiveness desing

i am a new flutter developer. I have problem with application responsiveness, I have worked with layout widgets such as column rows etc but the results in different screens differ. I need help on how to achieve responsiveness with less dependencies help please.

Upvotes: 0

Views: 50

Answers (2)

Devan Bhensdadiya
Devan Bhensdadiya

Reputation: 9

We can make responsive designs in many ways in flutter, some of those I exaplain below.

MediaQuery : Use MediaQuery to get the size of the screen and adjust your layouts accordingly. MediaQuery allows you to access the size and orientation of the screen, which you can use to make your UI elements responsive.

MediaQuery.of(context).size.width
MediaQuery.of(context).size.height

LayoutBuilder: Use LayoutBuilder widget to build UIs based on the parent widget’s constraints. This allows you to create UIs that adapt to different screen sizes and orientations.

LayoutBuilder(
  builder: (context, constraints) {
    if (constraints.maxWidth < 600) {
      //UI for small screens
    } else {
      //UI for large screens
    }
  },
),

Upvotes: 0

Sisir
Sisir

Reputation: 5388

You haven't provided any code which makes it difficult to answer. So I am going to take a very generic approach here. Checkout the below points and try to use them wherever you can:

  1. Expanded Widget - Can make its child/children grow/shrink based on available screen space
  2. Flexible Widget - Similar as above but with slight difference
  3. MediaQuery - Can give the exact screen height and width of the physical device. This information you can use to define different screens/layouts for mobile/tab/desktop
  4. Visibility Widget - Can hide/show based on certain condition. Use MediaQuery to get screen size and then based that hide/show sections of your screen
  5. LayoutBuilder - provides the parent widget's constraints at layout time.

And finally, checkout this official blog from flutter team on Responssive UI Design.

Upvotes: 1

Related Questions