Adobe XD Flutter Code Generator - Plugin

Overview

Adobe XD Flutter Code Generator - Plugin

⚠️ If you encounter an issue or have any feedback which you think could improve Plugin, please open an issue here

About this Project

The idea of the Plugin is:

“Increase productivity and decrease time spent with front-end code”.

Why?

This project was designed to accelerate my company's software development and to help everyone waste time with simple and repetitive Widget creation processes.
I will be happy if you can help me with as many PR's as you like so that we can perfect the plugin more and more

Email-me: [email protected]

Connect with me at LinkedIn.

Installing

Download xdx file from: https://github.com/thize/xd-to-flutter/releases

or

Install via Adobe Xd Plugin Center

Contributing

You can send how many PR's do you want, I'll be glad to analyse and accept them! And if you have any question about the project...

Email-me: [email protected]

Connect with me at LinkedIn.

Thank you!

Comments
  • Generate does not produce any usable output

    Generate does not produce any usable output

    Maybe my lack of understanding, but when using the Generate button nothing happens. How is it intended to be used - do I have select all the artboards, all objects or what? Where is the Generate output going to - the clipboard does not contain anything from what I can tell.

    opened by justoke 7
  • Release (maybe automatically)

    Release (maybe automatically)

    In the Adobe XD plugin marketplace the version is already quite old (1.3.1 - 27. Nov 2019). Please put the latest version on the marketplace.

    Also, I am not sure if that is possible, but ideally this should be automated.

    opened by StefanLobbenmeier 3
  • Code Format

    Code Format

    When I generate code for a widget, it shod be run true a format document.

    From the generate widget:

    Stack(children:<Widget>[const Text(
          'N',
          
          style: GoogleFonts.ubuntu(
            fontSize: 76,
            fontWeight: FontWeight.bold,
            color: Color(0xffffffff),
            
            
          ),
        ),const Text(
          'P',
          
          style: GoogleFonts.ubuntu(
            fontSize: 78,
            fontWeight: FontWeight.bold,
            color: Color(0xffffffff),
            
            
          ),
        )],)
    

    Should look like:

    Stack(
        children:<Widget>[
            const Text(
                'N',
                style: GoogleFonts.ubuntu(
                    fontSize: 76,
                    fontWeight: FontWeight.bold,
                    color: Color(0xffffffff),       
            
                ),
            ),
            const Text(
                'P',
                style: GoogleFonts.ubuntu(
                    fontSize: 78,
                    fontWeight: FontWeight.bold,
                    color: Color(0xffffffff),
                ),
            )
        ],
    )
    

    Link: https://flutter.dev/docs/development/tools/formatting

    I know that I can format the code in the IDE, but I think the plugin shode do it before.

    opened by MatsAndT 3
  • Unable to install

    Unable to install

    Hi,

    I downloaded the latest version of your plugin, but i get the error: extension non compatible I'm running Adobe XD CC 2019 v20.1.12 on Windows 10.

    Thanks!

    opened by gun20 2
  • error message 'artboard not implemented yet' upon clicking on 'Generate' button

    error message 'artboard not implemented yet' upon clicking on 'Generate' button

    image

    I've clicked on the artboard, select export widget and proceed to generate but I'm getting an error message saying that 'artboard not implemented yet'

    I've removed the plugin and reinstalled but still displaying the same error message.

    opened by TechSens 2
  • Feature request: Generate code for Material Design Cards

    Feature request: Generate code for Material Design Cards

    Hello,

    please support exporting Google Material Design Cards to code. It would be awesome if i could get code for this element: Screenshot 2020-02-06 at 15 57 14

    I would like to see a widget like this:

    Widget build(BuildContext context) {
      return Center(
        child: Card(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              const ListTile(
                leading: Icon(Icons.album),
                title: Text(‘The Enchanted Nightingale’),
                subtitle: Text(‘Music by Julie Gable. Lyrics by Sidney Stein.’),
              ),
              ButtonBar(
                children: <Widget>[
                  FlatButton(
                    child: const Text(‘BUY TICKETS’),
                    onPressed: () { /* ... */ },
                  ),
                  FlatButton(
                    child: const Text(‘LISTEN’),
                    onPressed: () { /* ... */ },
                  ),
                ],
              ),
            ],
          ),
        ),
      );
    }
    

    Thank you! Martin

    opened by mwolnymmg 2
  • Request Export Group or Multi Item

    Request Export Group or Multi Item

    Hi, your project is help me a lot, but it's not support generate code for export group item or multi item, since developing on xd focus on design first

    opened by sxywalkr 1
  • plugin failed to install

    plugin failed to install

    plugin failed to install error comming i am uzair recently i try this xd to flutter in windows but its not working for me can you plz help me how to install this xd to flutter plugin secondly one thing i have to mention that i am using adobe xd cc nowadays is that a problem o something else.

    Screenshot (969)

    opened by uzairleo 1
  • Features

    Features

    Send here, all the features you would like to see in this plugin. (all checked checkboxes are in development and are not present in the Release version)

    TODO Tasks progress: https://www.notion.so/a4c1f19c4b9343bfb61ef11aec9ac0b3?v=b14abc190e6842a6ad7734b6ba3d5b6b

    opened by thize 0
  • ReferenceError: dartColor is not defined

    ReferenceError: dartColor is not defined

    https://github.com/thize/xd-to-flutter/blob/844bf98be134a5db64a0b561ed90ee32fecda535/src/export_all.js#L190

    ReferenceError: dartColor is not defined

    /Users/xxxxxx/Library/Application Support/Adobe/Adobe XD/develop/xd-to-flutter/src/export_all.js:190
            colors.push(dartColor(colorStop.color));
                   ^
    Plugin ReferenceError: dartColor is not defined
        at <settings>/develop/xd-to-flutter/src/export_all.js:190:16
        at Array.forEach (<anonymous>)
        at _gradientColorList (<settings>/develop/xd-to-flutter/src/export_all.js:189:25)
        at <settings>/develop/xd-to-flutter/src/export_all.js:68:59
        at Array.forEach (<anonymous>)
        at exportAllColors (<settings>/develop/xd-to-flutter/src/export_all.js:66:18)
        at exportAll (<settings>/develop/xd-to-flutter/src/export_all.js:22:9)
        at <settings>/develop/xd-to-flutter/src/ui/main_panel_ui.js:88:9
        at e.exports.<anonymous> (<settings>/develop/xd-to-flutter/src/ui/main_panel_ui.js:122:13)
        at e.exports.p (uxp://uxp-internal/domjs_scripts.js:2:24351)
    
    
    opened by woaiios 1
Releases(3.3.3)
Owner
Giovani Lobato
Flutter lover 💙
Giovani Lobato
Enum extendable - Dart code generator. Generates enum extensions code.

Generates code for the extension on an enum. Overview Being able to add fields and methods to an enum. Let's say we have the following enum: enum Math

null 0 Jan 10, 2022
Startup-Name-Generator-App-in-Flutter - Business Startup Name Generator App in Flutter

Business Startup Name Generator App #About APP: A simple mobile app that generat

AHSAN SIDDZ 0 Jan 30, 2022
Code generator for Flutter's theme extension classes.

Welcome to Theme Tailor, a code generator and theming utility for supercharging Flutter ThemeExtension classes introduced in Flutter 3.0! The generato

iteo 35 Jan 2, 2023
A convenient code generator for app styleguide, gallery, wireframes and/or storyboard.

Framy A convenient code generator for app styleguide, gallery, wireframes and/or storyboard. ?? Official documentation ?? Packages In order to use Fra

Fidev 145 Dec 19, 2022
Dart code generator for helping with (firebase) analytics.

analytics_events_gen An easy generator for tracking firebase analytics events via type safe methods. Add to pubspec.yaml Check pub for the latest vers

Herbert Poul 2 Nov 16, 2022
The Swift code generator for your assets, storyboards, Localizable.strings, … — Get rid of all String-based APIs!

SwiftGen SwiftGen is a tool to automatically generate Swift code for resources of your projects (like images, localised strings, etc), to make them ty

null 8.3k Dec 31, 2022
bq Scanner : An QR Code and Barcode Scanner and Generator.

bq Scanner A Barcode Scanner. A QR Code Scanner. A Barcode Generator. A QR Code Generator. Visit bq Scanner at https://ritikpatle.github.io/bqscanner/

Ritik Patle 4 Jun 5, 2022
Code-quizzy - Code Quizzy Application Built With Flutter

Flutter Code Quizzy Application Configuration for this application Fortunately,

Nijat Namazzade 21 Jan 1, 2023
Write iOS&Android Code using Dart. This package liberates you from redundant glue code and low performance of Flutter Channel.

Dart_Native Dart_Native operates as both a code generator tool and a bridge to communicate between Dart and native APIs. Replaces the low-performing F

DartNative 893 Jan 4, 2023
A Flutter mobile application built completely using DhiWise and Supabase without coding single line of code. With 100% system generated code

Flutter Expension Getting Started with Flutter ?? Generated with ❤️ from Dhiwise A Flutter mobile application built completely using DhiWise and Supab

DhiWise 11 Oct 23, 2022
A full screen mobile scanner for scanning QR Code and Bar Code.

Flutter QR Bar Scanner A Full Screen Scanner for Scanning QR code and Barcode using Google's Mobile Vision API Reading & Scanning QR/Bar codes using F

Lutfor Rahman 31 Oct 5, 2022
Verify code input. You can create a verify code input.

flutter_verification_code_input A Flutter package that help you create a verification input. Installing flutter_verification_code_input: git:

Tiny Express 49 Dec 7, 2022
Verify code input. You can create a verify code input.

flutter_verification_code_input A Flutter package that help you create a verification input. Installing flutter_verification_code_input: git:

Tiny Express 49 Dec 7, 2022
Android test task master - Create PIN code screen, authentication by PIN code screen and menu screen

Here is described test tasks for a android dev. Need to implement three screens:

null 3 Oct 4, 2022
Shader manages the compilation of your GLSL shaders into SPIR-V byte code and Dart code

shader Shader manages the compilation of your GLSL shaders into SPIR-V byte code and Dart code. Quickstart # Install cli dart pub global activate shad

Felix Blaschke 25 Dec 1, 2022
Flutter route generator

--- for more docs with examples https://autoroute.vercel.app Introduction Installation Setup and Usage Generated routes Navigation Navigating Between

Milad akarie 1.2k Jan 7, 2023
Dart and Flutter sealed class generator and annotations, with match methods and other utilities. There is also super_enum compatible API.

Dart Sealed Class Generator Generate sealed class hierarchy for Dart and Flutter. Features Generate sealed class with abstract super type and data sub

6thSolution 15 Jan 2, 2023
Project Structure Auth Generator For Flutter

get_structure_generator Project Structure Auto Generator This is not the package

Mitul Vaghasiya 6 Mar 22, 2022
A Cross-Platform Wisdom Generator built with Flutter

Wisgen ?? A small Cross-Platform Wisdom Generator, built using Flutter and a combination of external APIs This Wisdom Generator combines random advice

Sebastian Faust 31 Dec 6, 2022