Previewing responsive design with Flutter 2
When you’re working on a sophisticated user interface for your app, you must have come across situations where it looks right on one form factor and seems off on another. Usually one would require going back and forth between multiple devices of different screen sizes to nail the art. While workarounds do exist, they are just too cumbersome. This changes now!
Flutter 2 brings Web Support to the Stable Channel which means that every time you hit flutter run, your app is ready to go on Android, iOS and even the Web.
This brings you the golden advantage of using your browser as an emulator!
Why use a browser?
A web browser is a piece of software that has been around for decades receiving updates, enhancements and now has its own suite of Developer tools.
Modern browsers like Chrome and Edge can emulate mobile devices, in the sense that you can adjust the screen height, width and pixel density to trick your framework into rendering content the way it would appear on an actual mobile device.
How do I use it?
- Upgrade to the latest build of Flutter (≥ 2.0.0 stable).
flutter upgrade- If your project was created on an older version, then you can add web support to it by running the following command at the root of your project directory.
flutter create .Note: If you have any native code or packages incompatible for the web, then I suggest you create a playground app to design your UI and add the widgets to your app once you’re done designing them.
- Now that web support is enabled, you may run your app in the browser of your choice
flutter run -d chrome- Once you’re in, bring up the Developer Tools [Ctrl+Shift+I] and toggle the Device Toolbar [Ctrl+Shift+M]. Use the dropdown menu to select a device from the many presets or choose ‘Responsive’ to gain full control over the dimensions.
and that’s about it ! Now you can see what your widgets look like on a tablet or a phone or just about any screen from just the browser.
What else can I do?
- Add more emulated devices:
Just in case the given presets aren’t enough for you, you can always add more. From the dropdown menu, click on “Edit...” to get a long list of emulated devices that are ready to use. Just check the one you like to add it to your list or create a custom device.
2. Add a device frame:
If just looking at your bare viewport is boring, then you can use the Device Frame by clicking on the three dots and toggling “Show device frame”.
3. Capture high quality screenshots:
Capture and save high resolution screenshots of your app/widget from your device of choice by using the “Capture screenshot” option in the menu. Show off your designs easily to your clients, all from one place.
Some noteworthy additions in Flutter 2
Here are a few highlights from the Flutter Engage keynote held on 3rd March, 2021 —
Cross platform support gets even better
Flutter builds for six different platforms — Android, iOS, Web, Linux, MacOS, Windows and Embedded Systems. Market leaders like Canonical and Toyota are moving fast to adopt the framework in their products. Developers now have a wider playing field to innovate, design and collaborate.
Adaptive UI/UX for Dual-screen and Foldable devices
Widgets are being given hinge-awareness and MediaQuery now gives you a DisplayFeature object with information like the display type, hinge type and much more. Microsoft has been actively contributing to this feature, a collaboration like this is what makes open-source so great!
Progressive Web Apps
Web-first experiences can be run on Android, iOS or desktop without the need for a standalone app. Flutter for Web is a powerful tool to deliver your webpage as a PWA bringing more experiences to users without launching on an app store.
Improvements to Dart DevTools
DevTools is a suite of performance and debugging tools for Dart and Flutter, which received quite a few additions with the new release, some of which include — Fixed size widgets now appear in the Layout Explorer, Overflowing widgets cause a popup in your IDE and can be inspected from DevTools itself.
Conclusion
With all these latest updates, it is more convenient than ever to build cross-platform applications with a single codebase. With major companies contributing to and adopting Flutter, the road ahead is surely exciting.
I hope that the tips and knowledge shared through this article helped you with your development. Do share the same with your team/colleagues.
Feel free to reach out to me for a dev conversation or even otherwise.
Happy fluttering ;)
