Summary and Next Steps

In this course, we learned what it means for a Flutter application to have a responsive and adaptive design. We discovered the Flutter widgets that can help with responsive layout, both single-child widgets and multi-child widgets, and how to use them to display a responsive UI. We implemented a smartphone application whose UI was not responsive, and we analyzed its layout problems.

Next, we learned about the MediaQuery and LayoutBuilder widgets, which we used to make the UI of our application responsive We used Flutter single-child and multi-child widgets in combination with MediaQuery and LayoutBuilder to fix the layout of our sample application.

After that, we discussed adaptive design for mobile and desktop devices and learned about VisualDensity. Finally, we reviewed a few external packages that can be helpful when working on responsiveness and adaptivity of our applications.

Key points

The main takeaways of this course can be summarized as follows:

• The application UI should change when the screen size changes.
• To give the user familiarity with our applications, the UI should also adapt to the platform it’s running on.
• Functional adaptivity is often included in the packages that implement that specific functionality.
• We should use the device_preview package as a developer tool.
• We can use external packages, but we should be careful because Flutter might stop their maintenance.

Where to go from here?

There are reviewable topics available in the Appendix of this course. There are also links to the packages used in this course, as well as additional resources.

The next time you work on a Flutter app, make sure to decide in advance if you want to use external packages to handle the responsiveness and adaptability of the UI. If so, please refer to the specific lessons of this course. Every time you work on a new application page or UI widget, use the content of this course to plan responsiveness from the start.