Flutter is Google’s open source UI toolkit. With a single code base, you can develop beautiful applications for mobile, desktop, embedded, and Web platforms. For the past few years, Flutter has become the go-to app for developers who want to build multiplatform apps. But designers needed a visual tool to prototype and build the Flutter UI, not the elaborate Dart source code, and XD to Flutter came into being!

It’s been nearly a year since the first preview of the plug-in was released. We’ve been refining and improving it with minor updates; Now, following the big release of Flutter 1.0 last summer, we have released version 2.0 of this plugin to coincide with the release of Flutter 2.

Wait, what is XD to Flutter?

As the name suggests, the XD to Flutter plugin is a powerful, easy-to-use tool for exporting your Adobe XD designs into concise, efficient Flutter code. You can copy code for specific visual elements from your design, export various reusable Widgets, and even export some views in their entirety.

This means that with the XD to Flutter plugin, you can have your design run on any device with the click of a button. This plug-in won’t code the entire application for you, but it will give you a great start.

XD to Flutter was developed by GSkinner in conjunction with Adobe and released as a plug-in for Adobe XD itself, so you can use it for any existing Adobe XD design you are building.

That’s great! What are the new features?

The original release of XD to Flutter was very useful for exporting all the different visual elements of your design, such as vector graphics, images, rich text, background blur effects, blend modes, shadows and other similar elements, but the output was static and not flexible enough.

While grabbing an icon or text style doesn’t take much effort, we wish it could be more useful. XD not only lets designers create dynamic UIs, but also provides tools like adaptive layouts, scrollable areas, stacks, and grids; We wanted this plug-in to support each of these features, and in version 2.0, we made a lot of progress.

Responsive resizing

XD to Flutter supports the responsive layout of XD, allowing you to “anchor” elements to their parent elements and precisely control how they resize.

Responsive design in Adobe XD

Responsive design in Flutter

Flutter implements this functionality using custom Pinned layout widgets in the Adobe_XD open source package that developers can use directly in their projects.

Pinned Widget code examples

Stack and scroll groups

“Stack” and “scroll Groups” give developers new ways to dynamically lay out screen content in Adobe XD. With the “stack” in XD, you can arrange a variety of elements in horizontal or vertical lists, with varying spacing between the elements; The “Stack” is more similar to the Flex Widget in the Flutter than to its namesake Stack Widget.

As you might expect, with “scroll groups,” you can define an area directly within your design to scroll a large group of content horizontally or vertically.

XD to Flutter 2.0 supports all of these features by converting them into common Flutter widgets (Column, Row, and SingleChildScrollView). You can even put a stack into a scroll group to easily create a list of scroll items.

Stack and scroll groups in XD (left) and Flutter (right)

Inside margin and background elements

Another new feature is background elements, that is, you can specify a visual element as the background for another set of elements. Background elements can be paired with inner margins to define the distance between the edge of the background and its content.

The Flutter export tool uses a Stack Widget to layer background elements after the content, which is placed inside a Padding Widget.

Inner margins and background in XD (left) and Flutter

Flutter 2 and air safety mechanisms

This allows for a more responsive UI that enhances Flutter 2’s support for desktop devices and other platforms, including the Web.

Flutter 2 also introduces a robust null-safety mechanism. This language feature helps developers catch non-null-free variables before they cause problems in their applications. XD to Flutter 2.0 contains a new setting “Export Null Safe Code”; Select this setting when exporting to ensure that the generated code will be available in the future.

“Export Null Safe Code” Settings and output

Sounds great! How do I get started?

Whether you want to use it to replicate code with a subtle gradient effect, or to export a fully responsive, parameterized, interactive Widget, you are simply joining the thousands of creative professionals who already use the XD to Flutter plugin.

You simply select “Browse Plugins… “from the Adobe XD “Plugin” menu. (Browse the plugin), then search for “Flutter” (oddly, searching for “XD to Flutter” doesn’t work), or go to adobe.com/go/xd_to_fl… To install the plug-in.

Once installed, open the XD to Flutter panel from the plugin panel and click “Need Help “. For plugin documentation.

Flutter 2 is a welcome step in our ongoing focus on building beautiful applications that can actually run on any platform. The teams at GSkinner are excited to work with Adobe and Google to ensure that XD to Flutter further simplifies the process of transforming designs into a working product.