v4.0 of the “XD to Flutter” plugin is available now, with a focus on simplifying and improving the Dart code it generates.

Building on v3’s focus on improving the developer experience, v4 includes a fairly significant refactor of how layout code is generated by the plugin to enable smarter, cleaner results.

Previously, all responsive layouts were exported using the custom Pinned layout widget from the adobe_xd package. This worked well as it directly mirrors XD’s layout model, but isn’t as familiar or concise as some common Flutter layout widgets.

Pinned.fromPins(
  Pin(start: 10.0, end: 10.0),
  Pin(start: 10.0, end: 10.0),
  child: Container(
    decoration: BoxDecoration(
      color: const Color(0xFFFF0000),
    )
  ,)
),

In v4, the plugin recognizes layouts that can be handled by widgets like Center, Align, or in this case, Padding:

Padding(
  padding: EdgeInsets.all(10.0),
  child: Container(
    decoration: BoxDecoration(
      color: const Color(0xFFFF0000),
    )
  ,)
),

Even better, it will identify that the child is a Container, and thus supports margin, eliminating the need for a layout widget entirely:

Container(
  margin: EdgeInsets.all(10.0),
  decoration: BoxDecoration(
    color: const Color(0xFFFF0000),
  ),
),

And lastly, v4 notices that the BoxDecoration only contains a color, which can be hoisted to the Container:

Container(
  margin: EdgeInsets.all(10.0),
  color: const Color(0xFFFF0000),
),

From 10 lines of code to 4 — v4’s output is more concise and readable all round. And the foundational changes that were introduced should make these kinds of improvements easier going forward.

v4 also fixes a number of bugs, adds a few more minor features (ex. angular gradients, and the ability to toggle layer name comments), and adds a reasonably robust XD test suite file to the repo.

You can learn more from the README or install the latest version at adobe.com/go/xd_to_flutter. We always welcome feedback, contributions, and bug reports on GitHub.

Need help building something cool in Flutter? We’d love to chat.