Generate responsive pages and apps on HTML, Tailwind, Flutter and SwiftUI.

Related tags

Templates html swift typescript responsive conversion svelte flutter figma tailwind tailwindcss swiftui figma-plugins
Overview

Figma to Code

Figma to Code

Twitter

Most design to code plugins are bad, some are even paid. This project aims to raise the bar by generating responsive layouts in Tailwind, Flutter and SwiftUI. The plan is to eventually add support for Jetpack Compose and possibly standard HTML or other frameworks like React Native, Bootstrap or Fluent. Feedback, ideas and partnerships are appreciated!

Gif showing the conversion

How it works

This plugin takes an unconventional approach to improve code quality: it optimizes the layout before the conversion to code even begins. The standard Figma Nodes (what represents each layer) is a joy to work with, but it can't modify a layer without modifying the user project. For this reason, I decided to virtualize it, remaking the official implementation and naming them AltNodes. During the process of converting a Node into an AltNode, the plugin does the following:

Conversion Workflow

That process can also be seen as an Intermediate Representation and might allow this plugin to, one day, live outside Figma.

Hard cases

When finding the unknown (a Group or Frame with more than one child and no vertical or horizontal alignment), Tailwind mode uses insets for best cases and left, top from standard CSS for the worst cases. Flutter mode uses Stack and Positioned.fill. Both are usually not recommended and can easily defeat the responsiveness. In many scenarios, just wrapping some elements in a Group or Frame can solve:

Conversion Workflow

Tip: Instead of selecting the whole page, you can also select individual items. This can be useful for both debugging and componentization. For example: you can use the plugin to generate the code of a single element and then replicate it using a for-loop.

Todo

  • Vectors (tricky in HTML, unsupported in Flutter)
  • Images (they are local, how to support them?)
  • Line/Star/Polygon (todo. Rectangle and Ellipse were prioritized and are more common)
  • The source code is fully commented and there are more than 30 "todo"s there

Tailwind limitations

  • Width: Tailwind has a maximum width of 384px. If an item passes this, the width will be set to w-full (unless it is already relative like w-1/2, w-1/3, etc). This is usually a feature, but be careful: if most layers in your project are larger than 384px, the plugin's result might be less than optimal.

Flutter limits and ideas

  • Stack: in some simpler cases, a Stack could be replaced with a Container and a BoxDecoration. Discover those cases and optimize them.
  • Material Styles: text could be matched to existing Material styles (like outputting Headline6 when text size is 20).
  • Identify Buttons: the plugin could identify specific buttons and output them instead of always using Container or Material.

How to build the project

The project is configured to be built with Webpack or Rollup. The author couldn't find a way to correctly configure Svelte in Webpack, so Rollup was added. But Rollup is a lot less stable than Webpack and crashes regularly in watch mode when editing Typescript files. So, if you are going to work with Typescript only, I recommend sticking with Webpack. If you are going to make changes in the UI, you need to use Rollup for now.

Issues

The Figma file for this README and icon is also open and welcome to changes! Check it here.

I took decisions thinking about how it would benefit the majority of people, but I can (and probably will!) be wrong many times. Found a bug? Have an idea for an improvement? Feel free to add an issue or email me. Pull requests are also more than welcome.

Comments
  • Transformers Idea

    Transformers Idea

    I think that seperating the transform logic from the rest of the code is a good idea, just expose the transformed IR, and then a module with the transformation logic is called for each type of transformation, and people can contribute writing their own transformation logic, I'm working on something very similar here https://github.com/figmatools/figma2css-app, but you're way ahead of me, I already use something like that in production where I work, but I'm trying to make a nice frontend so more people can use it, If you give me the go ahead I'm gonna try to implement my transformer idea and write a transformer for vanilla css, which is what I use. My usecase is: I Already have the HTML structure, I just need the styles

    opened by 0000marcell 7
  • Should 100% be flex: 1 ?

    Should 100% be flex: 1 ?

    https://github.com/bernaferrari/FigmaToCode/blob/master/src/html/builderImpl/htmlSize.ts#L19

    if (typeof size.width === "number") {
} else if (size.width === "full") {
  w += formatWithJSX("width", isJsx, "100%");
}

    In flexbox, width: 100%; makes fixed width of neighbors wrong. Their fixed width won't be the assigned value. flex: 1; solves the issue.

    opened by oney 5
  • Add option to prettify the code (i.e. nice indents)

    Add option to prettify the code (i.e. nice indents)

    This plugin is amazing, I love it!

    I tried using it to add in some HTML for me with Tailwind, and the output for the plugin is mostly minified. I have to then go back into the code and then format it. Ideally, there should be an option to deliver the output for Tailwind in a way that is more readable.

    opened by TanayB11 5
  • Change div closing syntax

    Change div closing syntax

    Hi! Awesome plugin. Could you please modify generated <div .../> to <div ...></div>, so it will work in pure HTML without React in Chrome and other browsers

    opened by kopotp 4
  • Text and Corner radius bugs

    Text and Corner radius bugs

    1

    Text elements under auto layout parent with "Fill container" width doesn't have width: 100% in generated codes.

    2

    Corner radius in Figma doesn't produce border-radius: in generated codes.

    3

    Text's color generates something like<p class="Location" style="font-size: 11.50px; text: rgba(37.78, 188.06, 13.32, 1);">Text</p>. It should be color: rgba(37.78, 188.06, 13.32, 1);

    4

    In auto layout, the bottom empty spacing div's height of a Text should = parent's spacing + Text's height - Text's font size to be more accurate.

    opened by oney 4
  • Code for images

    Code for images

    I'm not getting any code where there are containers with image backgrounds. Is it possible to this in even is the file name of the image can just be a placeholder.

    opened by michael4reynolds 4
  • Basic usage manual

    Basic usage manual

    Forgive my ignorance, not super familiar with Figma plugins.

    I don't unterstand how to run this plugin.

    1. Installed the plugin
    2. Plugin is listed on manage plugins
    3. Plugin is not listed anywhere else in Figma as far as I have seen.
    4. x Don't get how to display the Figma To Code window as displayed in introduction video in the readme

    Alternate path:

    1. Checked out the repo
    2. npm install, npm run build, npm run start
    3. working local server with a web ui similar to the Figma To Code window at localhost:5000
    4. x No connection to Figma whatsoever.

    I have the feeling I'm missing something super obvious here. :)

    Appreciate your help/feedback!

    opened by mlnmln 3
  • Dont convert hidden elements

    Dont convert hidden elements

    This is just what I mentioned in issue #9, I was going to put a option to ommit hidden elements in the UI, something like a checkoutbox, but I don't understand whats the point of converting the hidden elements in any situation so I'm just filtering out the invible elements, elements that have visible false

    opened by 0000marcell 3
  • Crude support for images in Tailwind

    Crude support for images in Tailwind

    Currently the images are exported as divs with no indication whatsoever that they are images — a bit disorienting, the user has to play detective to figure out where to put their assets.

    This is my crude fix: treat images as a special case, emit an image tag with a placeholder of the right size. The result looks pretty helpful: Снимок экрана 2021-02-16 в 22 38 18

    opened by colorfulfool 2
  • Not really an issue

    Not really an issue

    I love this tool so much! But, is there a way to add positioning like X and Y? I'm not very good with HStacks, ZStacks, and VStacks so that would be a great feature!

    opened by AyaanZaveri 2
  • Bump loader-utils from 1.4.0 to 1.4.1

    Bump loader-utils from 1.4.0 to 1.4.1

    Bumps loader-utils from 1.4.0 to 1.4.1.

    Release notes

    Sourced from loader-utils's releases.

    v1.4.1

    1.4.1 (2022-11-07)

    Bug Fixes

    Changelog

    Sourced from loader-utils's changelog.

    1.4.1 (2022-11-07)

    Bug Fixes

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Bump qs from 6.5.2 to 6.5.3

    Bump qs from 6.5.2 to 6.5.3

    Bumps qs from 6.5.2 to 6.5.3.

    Changelog

    Sourced from qs's changelog.

    6.5.3

    • [Fix] parse: ignore __proto__ keys (#428)
    • [Fix] utils.merge: avoid a crash with a null target and a truthy non-array source
    • [Fix] correctly parse nested arrays
    • [Fix] stringify: fix a crash with strictNullHandling and a custom filter/serializeDate (#279)
    • [Fix] utils: merge: fix crash when source is a truthy primitive & no options are provided
    • [Fix] when parseArrays is false, properly handle keys ending in []
    • [Fix] fix for an impossible situation: when the formatter is called with a non-string value
    • [Fix] utils.merge: avoid a crash with a null target and an array source
    • [Refactor] utils: reduce observable [[Get]]s
    • [Refactor] use cached Array.isArray
    • [Refactor] stringify: Avoid arr = arr.concat(...), push to the existing instance (#269)
    • [Refactor] parse: only need to reassign the var once
    • [Robustness] stringify: avoid relying on a global undefined (#427)
    • [readme] remove travis badge; add github actions/codecov badges; update URLs
    • [Docs] Clean up license text so it’s properly detected as BSD-3-Clause
    • [Docs] Clarify the need for "arrayLimit" option
    • [meta] fix README.md (#399)
    • [meta] add FUNDING.yml
    • [actions] backport actions from main
    • [Tests] always use String(x) over x.toString()
    • [Tests] remove nonexistent tape option
    • [Dev Deps] backport from main
    Commits
    • 298bfa5 v6.5.3
    • ed0f5dc [Fix] parse: ignore __proto__ keys (#428)
    • 691e739 [Robustness] stringify: avoid relying on a global undefined (#427)
    • 1072d57 [readme] remove travis badge; add github actions/codecov badges; update URLs
    • 12ac1c4 [meta] fix README.md (#399)
    • 0338716 [actions] backport actions from main
    • 5639c20 Clean up license text so it’s properly detected as BSD-3-Clause
    • 51b8a0b add FUNDING.yml
    • 45f6759 [Fix] fix for an impossible situation: when the formatter is called with a no...
    • f814a7f [Dev Deps] backport from main
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump decode-uri-component from 0.2.0 to 0.2.2

    Bump decode-uri-component from 0.2.0 to 0.2.2

    Bumps decode-uri-component from 0.2.0 to 0.2.2.

    Release notes

    Sourced from decode-uri-component's releases.

    v0.2.2

    • Prevent overwriting previously decoded tokens 980e0bf

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.1...v0.2.2

    v0.2.1

    • Switch to GitHub workflows 76abc93
    • Fix issue where decode throws - fixes #6 746ca5d
    • Update license (#1) 486d7e2
    • Tidelift tasks a650457
    • Meta tweaks 66e1c28

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.1

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump loader-utils from 1.4.0 to 1.4.2

    Bump loader-utils from 1.4.0 to 1.4.2

    Bumps loader-utils from 1.4.0 to 1.4.2.

    Release notes

    Sourced from loader-utils's releases.

    v1.4.2

    1.4.2 (2022-11-11)

    Bug Fixes

    v1.4.1

    1.4.1 (2022-11-07)

    Bug Fixes

    Changelog

    Sourced from loader-utils's changelog.

    1.4.2 (2022-11-11)

    Bug Fixes

    1.4.1 (2022-11-07)

    Bug Fixes

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump terser from 4.8.0 to 4.8.1

    Bump terser from 4.8.0 to 4.8.1

    Bumps terser from 4.8.0 to 4.8.1.

    Changelog

    Sourced from terser's changelog.

    v4.8.1 (backport)

    • Security fix for RegExps that should not be evaluated (regexp DDOS)
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump svelte from 3.35.0 to 3.49.0

    Bump svelte from 3.35.0 to 3.49.0

    Bumps svelte from 3.35.0 to 3.49.0.

    Changelog

    Sourced from svelte's changelog.

    3.49.0

    • Improve performance of string escaping during SSR (#5701)
    • Add ComponentType and ComponentProps convenience types (#6770)
    • Add support for CSS @layer (#7504)
    • Export CompileOptions from svelte/compiler (#7658)
    • Fix DOM-less components not being properly destroyed (#7488)
    • Fix class: directive updates with <svelte:element> (#7521, #7571)
    • Harden attribute escaping during SSR (#7530)

    3.48.0

    • Allow creating cancelable custom events with createEventDispatcher (#4623)
    • Support {@const} tag in {#if} blocks #7241
    • Return the context object in setContext #7427
    • Allow comments inside {#each} blocks when using animate: (#3999)
    • Fix |local transitions in {#key} blocks (#5950)
    • Support svg namespace for {@html} (#7002, #7450)
    • Fix {@const} tag not working inside a component when there's no let: #7189
    • Remove extraneous leading newline inside <pre> and <textarea> (#7264)
    • Fix erroneous setting of textContent for \<template> elements (#7297)
    • Fix value of let: bindings not updating in certain cases (#7440)
    • Fix handling of void tags in <svelte:element> (#7449)
    • Fix handling of boolean attributes in <svelte:element> (#7478)
    • Add special style scoping handling of [open] selectors on <dialog> elements (#7495)

    3.47.0

    • Add support for dynamic elements through <svelte:element> (#2324)
    • Miscellaneous variable context fixes in {@const} (#7222)
    • Fix {#key} block not being reactive when the key variable is not otherwise used (#7408)
    • Add Symbol as a known global (#7418)

    3.46.6

    • Actually include action TypeScript interface in published package (#7407)

    3.46.5

    • Add TypeScript interfaces for typing actions (#6538)
    • Do not generate unused-export-let warning inside <script context="module"> blocks (#7055)
    • Do not collapse whitespace-only CSS vars (#7152)
    • Add aria-description to the list of allowed ARIA attributes (#7301)
    • Fix attribute escaping during SSR (#7327)
    • Prevent .innerHTML optimization from being used when style: directive is present (#7386)

    3.46.4

    • Avoid maximum call stack size exceeded errors on large components (#4694)
    • Preserve leading space with preserveWhitespace: true (#4731)

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • CLI command line

    CLI command line

    Your plugin is impressive ! Thank you.

    Could you guide us how we could make it work as a CLI command line similar to this tool ? https://github.com/marcomontalbano/figma-export

    We would like to integrate the retrieve of the CSS in our CI CD process.

    Thanks in advance for your help.

    opened by bevrard 2
Owner
Bernardo Ferrari
Android native and Flutter developer. Computer Scientist.
Bernardo Ferrari
GitHub https://www.figma.com/community/plugin/842128343887142055
Responsive-Ui-builder - The responsive ui builder package contains widgets that helps you to create your UI responsive

Responsive Ui Builder Getting Started The responsive ui builder package contains

null 0 Feb 1, 2022
A complete remake of JustWatch App using Flutter (previously written in SwiftUI)

JustWatch-Flutter A complete remake of JustWatch App using Flutter (previously written in SwiftUI) Getting Started This project is a starting point fo

null 1 Oct 15, 2021
Given a JSON string, this library will generate all the necessary Dart classes to parse and generate JSON.

JSON to Dart Given a JSON string, this library will generate all the necessary Dart classes to parse and generate JSON. This library is designed to ge

Javier Lecuona 1.2k Dec 25, 2022
Simple Dart package for creating mailto links in your Flutter apps or web pages

mailto Simple Dart package for creating mailto links in your Flutter and Dart apps The mailto package helps you build mailto links and provides you wi

SMAHO Engineering OSS 21 Jul 8, 2022
A Flutter widget for rendering HTML and CSS as Flutter widgets

flutter_html A Flutter widget for rendering HTML and CSS as Flutter widgets. Screenshot 1 Screenshot 2 Screenshot 3 Table of Contents: Installing Curr

Vishal Raj 1 Dec 15, 2021
A revolutionary new browser. HTML to Flutter transpiler. Written in Go (using Dart FFI) and Flutter.

Flutter Browser An experimental HTML & CSS to Flutter transpiler written in Go, using Dart FFI and Flutter. Screenshots Notice This works great for si

Mitja 12 Oct 24, 2022
Flutter package to render html as widgets that supports hyperlink, image, audio, video, iframe and many other tags.

HtmlWidget monorepo This repo contains the source code for everything HtmlWidget-related. Name Link flutter_widget_from_html_core flutter_widget_from_

Đào Hoàng Sơn 445 Jan 6, 2023
A lightweight HTML-Richtext editor for Flutter

Flutter HTML Editor Flutter HTML Editor is a simple HTML-based Richtext editor, which is able to edit and parse a selected set of HTML tags into a Flu

Herry 14 Oct 19, 2022
This library helps you to convert Delta to HTML. Based on Flutter_Quill Delta

Delta_To_HTML This library helps you to convert Delta to HTML. Based on Flutter_Quill Delta [ currently in under development ] Usage import 'package:d

Secanonm 4 Dec 20, 2022
Utils and widgets to make your flutter apps and websites fully responsive.

Super Responsive A responsive library for Flutter that is easy to use and easy to read makes your app look great on all devices makes your app more re

Gustavo Guzmán 5 Sep 12, 2022
A responsive scaffold widget that adjusts to your device size, for your flutter mobile and web apps.

scaffold_responsive A responsive scaffold widget that adjusts to your device size, for your flutter mobile and web apps. Check out the Live demo here

Tushar Sadhwani 9 Sep 27, 2022
A routing package that lets you navigate through guarded page stacks and URLs using the Router and Navigator's Pages API, aka "Navigator 2.0".

A Flutter package to help you handle your application routing and synchronize it with browser URL. Beamer uses the power of Router and implements all

Sandro Lovnički 485 Jan 7, 2023
Trying out Flutter for desktop Web app development as an alternative to SPA frameworks (such as React and Angular) by recreating one of the pages of an existing CV Management web app

HTML Renderer Demo CanvasKit Renderer Demo Reddit discussion This repo contains a PoC of using Flutter as a traditional SPA framework for creating a d

Maxim Saplin 20 Oct 11, 2022
This is the flutter code for One health app admin and doctor pages.

one_health_doctor_and_admin A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get

Moideen Rafih P A 4 Aug 7, 2022
A wrapper around Navigator 2.0 and Router/Pages to make their use a easier.

APS Navigator - App Pagination System This library is just a wrapper around Navigator 2.0 and Router/Pages API that tries to make their use easier: ??

Guilherme Silva 14 Oct 17, 2022
This is an auction application just like eBay. Using firebase as the backend for signup & sign-in functionality. In addition to that, it's a two pages application with user bid in input and count down view.

Nilam This is an auction application just like eBay. Using firebase as the backend for signup & sign-in functionality. In addition to that, it's a two

Md. Siam 5 Nov 9, 2022
More than 130+ pages in this beautiful app and more than 45 developers has contributed to it.

flutter-ui-nice ❤️ Star ❤️ the repo to support the project or ?? Follow Me.Thanks! Facebook Page Twitter Medium QQ Group Flutter Open NieBin Flutter O

Flutter开源社区 3.4k Jan 3, 2023
Easily build and deploy your Dart web app to GitHub pages

Run flutter build web or dart pub run build_runner build and put the output in another branch. An easy way to update gh-pages. Install $ dart pub glob

Kevin Moore 183 Dec 20, 2022
More than 130+ pages in this beautiful app and more than 45 developers has contributed to it.

flutter-ui-nice ❤️ Star ❤️ the repo to support the project or ?? Follow Me.Thanks! Facebook Page Twitter Medium QQ Group Flutter Open NieBin Flutter O

Flutter开源社区 3.4k Jan 5, 2023