Flutter is Google’s open-source UI toolkit for building beautiful apps for mobile, desktop, web, and embedded devices from a single codebase. Over the last couple of years, it has become the leading choice for developers who want to build apps for multiple platforms; but designers need a visual tool for prototyping and creating Flutter UI, rather than handcrafting Dart source code. Enter XD to Flutter!
It’s been almost a year since the first preview release of the plugin, and we’ve continued to refine and improve it with a handful of minor updates, a major v1.0 launch last summer, and now a v2.0 release to match with the launch of Flutter 2!
Wait, what is XD to Flutter?
The name probably gives it away, but the XD to Flutter plugin is a powerful, easy-to-use tool to export your stunning Adobe XD designs into clean, functional code for Flutter. You can copy code for specific visual elements from your design, export reusable widgets, or even entire views.
That means that, with the XD to Flutter plugin, you can get your designs running on virtually any device with the click of a button. It’s not going to code your whole app for you, but it’ll give you a head start.
XD to Flutter is built by gskinner in partnership with Adobe, and is published as a plugin for Adobe XD itself, so you can use it with any existing Adobe XD design you’re building.
Awesome! So what’s new?
The initial release of XD to Flutter had great support for outputting all the different visual elements in a design — vector graphics, images, rich text, background blurs, blend modes, shadows, and similar — but the result could be static and inflexible.
While it was handy for grabbing an icon or text style, we wanted it to do more! XD empowers designers to create dynamic UIs, with tools like responsive layout, scrollable areas, stacks, and grids; we want the plugin to support every one of those capabilities, and with v2.0 we’ve made a lot of progress.
Responsive Resize
XD to Flutter supports the responsive layout features of XD, which lets you “pin” elements within their enclosing parent and precisely control how they resize.
Responsive design in Adobe XD
Pic courtesy: medium.com
Responsive resize in Flutter
Pic courtesy: medium.com
This is achieved in Flutter by using a custom Pinned layout widget in the open-source adobe_xd package that developers can leverage directly in their projects.
Pinned widget code example
Pic courtesy: medium.com
Stacks & Scroll Groups
“Stacks” and Scroll Groups provide new ways to lay out content on-screen dynamically in Adobe XD. Stacks in XD let you arrange a bunch of different elements in a horizontal or vertical list, with varying spacing between them; they are more similar to a Flex widget in Flutter than their namesake Stack widget.
Scroll Groups predictably let you define an area to scroll a larger group of content vertically or horizontally, right inside your design.
XD to Flutter v2.0 supports both of these features, converting them into common Flutter widgets (Column, Row, and SingleChildScrollView). You can even put a stack into a scroll group to easily create a scrolling list of items.
Stacks & Scroll Groups in XD (left) and Flutter (right)
Pic courtesy: medium.com
Padding & Background Elements
Another new feature is background elements, which let you designate a visual element as the background for a group. This can be paired with padding to space the background’s edges from the content.
The Flutter export uses a Stack widget to layer the background element behind the content, which is placed into a Padding widget.
Padding & Background in XD (left) and Flutter (right)
Pic courtesy: medium.com
Flutter 2 & null safety
The layout features described above enable much more responsive UI, complimenting Flutter 2’s increased support for form factors like desktop and web.
Flutter 2 also introduces sound null safety — a language feature that helps developers catch nullability issues before they cause problems in apps. XD to Flutter v2.0 includes a new setting to “Export Null Safe Code”, ensuring that the generated code is future-ready.
“Export Null Safe Code” setting and output
Pic courtesy: medium.com
Sounds great! How do we get started?
Whether you’re using it to copy the code for a tricky gradient, or to export fully responsive, parameterized, interactive widgets, it’s simple to join the thousands of creative professionals that are already using the XD to Flutter plugin.
You can install it by selecting “Browse Plugins…” from Adobe XD’s “Plugin” menu and searching for “Flutter” (strangely, searching for “XD to Flutter” doesn’t work),
Pic courtesy: medium.com
Once you have it installed, open the XD to Flutter panel from the plugins panel, and tap the “Need help?” link to check out the plugin documentation.
Flutter 2 is an exciting step forward for the framework, with a focus on building beautiful apps that run virtually anywhere. At gskinner, we’re thrilled to be working with Adobe and Google to ensure that XD to Flutter continues to make the process of faithfully translating a delightful design to a working product even easier.
Stay tuned for more exciting updates to the plugin soon!
For more information and to develop mobile apps using Flutter, Hire Flutter Developer from us as we give you a high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft”. To develop Mobile Apps using Flutter, please visit our technology page.
Content Source:
- medium.com
