Flutter Tips
Flutter Responsive Widget Development Using a Modular Approach!
This responsive widget is simply reusable♻ across all projects!…
Overview:
A graphic user interface (GUI) design strategy called responsive design is used to provide content that dynamically adapts to different screen sizes which make our application to use conveniently across multiple platform.
Steps involved in creating responsive widget:
- Determine the current screen📱 size.
- Update⬆ the widget with respect to the size.
Get the current screen resolution:
In flutter, the “MediaQuery”💻 is used to obtain the current screen size📱; the code snippet👨💻 to access the screen size is shown below.
Update the widget:
- The above code snippet yields a vector object from we can obtain the screen width in order to replace or resize the widget.
- In this demo application, the widget is switched between large and small screens, and when the screen size is shrunk to its threshold size, a hamburger🍔 menu is replaced in the 🔝top navigation bar.
Responsive Widget:
The Responsive Widget can be passed with a maximum of three different Layouts for three different screen sizes as a parameter. Using media query in flutter, we can fetch screen size and custom functions were created to check the screen size anywhere in the code, and inside layout builder, we return the appropriate layout in terms of screen size.
Here we can have multiple custom screen size depends upon our needs!
🖋 Design distinct layouts for different screen sizes:
I built two unique example layouts for two different screen sizes, which can be simply swapped using the responsive widget mentioned above.
Check my GitHub repo for those demo layouts.
🧱 Assemble everything created in main.dart
I’ve passed LargeScreen and SmallScreen here; you may pass another layout for medium screen size in the same way the other two are. You may build on top of the responsive widget to pass extra layouts as needed.
Some assistance feature to alter asset size dynamically in relation to screen size:
Here is an example use case of the custom function included in a responsive widget: a hamburger menu is replace with the top navigation bar when the screen size is below a certain threshold.
Finally, we reached this
Here is the GitHub reference to utilize the responsive widget on your project!!
Attributes and References:
Cover Image: Concept illustration vector created by storyset — www.freepik.com
Flutter documentation: Creating responsive and adaptive apps
