flutter-editor

The First Customizable Web Editor for Flutter made with React JS as a Component Library!

Installation

npm install --save flutter-editor

[NOTE] After npm package installation, the "FontManifest.json" must be created in the public directory of your React JS application.The FontManifest.json must contain a list of all the fonts that the Flutter application will use in the following format:

[
  {
    "family": "MaterialIcons",
    "fonts": [
      {
        "asset": "fonts/MaterialIcons-Regular.otf"
      }
    ]
  }
]

[NOTE] The dartpad backend services must be configured as per https://github.com/dart-lang/dart-services and the endpoint must be provided as a property to the FlutterEditor component as mentioned below in the sample usage.

Usage

import React, { Component } from 'react'

import Check from '@material-ui/icons/Check'
import Button from '@material-ui/core/Button'

import { CodeEditorController, FlutterCodeEditor } from 'flutter-editor'

const controller = new CodeEditorController()

function SampleComponent() {
  return (
    <FlutterCodeEditor
      theme='dark'
      secondaryButton={
        <Button
          variant='contained'
          onClick={() => {
            console.log(controller.code)
          }}
        >
          <Check></Check>
        </Button>
      }
      width={(window.innerWidth * 2) / 3}
      disableZoom={true}
      outputAspectRatio='1:1'
      controller={controller}
      dartBackendUrl={'https://api.dartpad.test/api/dartservices/v2/compileDDC'}
    ></FlutterCodeEditor>
  )
}

class App extends Component {
  render() {
    return <SampleComponent></SampleComponent>
  }
}

export default App

[NOTE] The dartBackendUrl provided above is a dummy URL. You will need to provide a working endpoint for successfull compilation.

Contributing

This project is still a work in progress. Please do not use this on any production level applications, yet. Need help on the following:

• [ ] Unit tests.
• [ ] Persisting code across sessions.
• [ ] Review and refactor code.
• [x] Adding controller to the editor.
• [x] Rotate output viewer to portrait/landscape.
• [ ] Documentations

PR's and contributions are welcome.

License

MIT © abhimanyupandian

This project is still a work in progress.