I’m very excited to announce the release of v3.0 of the “XD to Flutter” plugin, with a number of powerful new developer features.
Prior to v1.0, the primary goal was just to output as much of the content in Adobe XD to Flutter as possible: Vector graphics, text, images, fills, blurs, blend modes, etc. Version 1 tackled responsive layout, and v2.0 built on that with support for stacks, scroll groups, and padding. Version 2 also included the ability to export null-safe code, a critical developer feature for working with Flutter 2.
In v3.0 we’ve doubled down on improving the workflow for developers, including providing new ways to clean up the exported code and integrate dynamic content.
We’ve added a new project setting called “Normalize Names” that helps to ensure your generated code matches Dart’s naming standards. For example, exporting an XD artboard called “my view” will create a class named
MyView in a file
Group export settings
We’ve added a new dropdown in the settings to change how a group is exported. It defaults to “Export as inline code”, which matches previous behavior, but offers new options to generate more powerful and better organized code:
Export as build method
This option will separate the group into a new build method (ex.
buildMyGroup) on the enclosing Widget. This lets you better organize your code, reduces nesting depth, and makes it possible to override the method in a subclass to inject dynamic content.
Replace with builder param
Alternatively, you can replace the group with a call to a (required) builder parameter that will be exposed in the enclosing Widget’s constructor. This allows you to dynamically inject content without editing the exported code.
Replace with custom code
Lastly, you can replace a group with arbitrary Flutter code. This is handy for injecting simple Widgets that don’t have an equivalent in XD. Because the contents of the group are ignored, it makes it easy to build out a library of stand-ins that look the part in XD, but export to the correct Widget in Flutter.
There is even experimental support for including the content or children of the group in your custom code via tags such as
<CHILDREN>. For example, to wrap the children of a group in a layout Widget that isn’t directly supported in XD.
Data params for grids
Grids now have the option to expose a data parameter, which makes it easy to assign dynamic data at run time.
We made additional minor fixes & additions, like adding a
ScrollBar Widget to all scrollable content, improving some error/warning messages, and removing the trailing semi-colon when copying to clipboard to make pasting elements into your code less fussy.
Need help building something cool in Flutter? We’d love to chat.