Git Product home page Git Product logo

Banner

pub github discord contributors

Get startedDocumentationExamplesCommunity & SupportWebsite

Theta

Design to Flutter in 1 command.

  • 🦄 Why? Manually coding the entire UI can be time-consuming and costly. Transform your design into Flutter with just one command.
  • 👥 Who? Individual developers and teams aiming for quicker and more visual UI development.

🧙 Design to Flutter

Tree steps:

  1. Build your UI with Theta.

Theta Studio

  1. Navigate to a Flutter project, and open the terminal:

Install Theta CLI.

$ dart pub global activate theta_cli

Link a project by its key.

$ theta link -k <anon key>

You can generate files from design by running:

$ theta gen
  1. Use the generated UI widgets:

Theta will generate the following files

  • /assets
    • /theta_assets
      • theta_preload.json
      • ... all the media
  • /lib
    • theta_ui_assets.g.dart
    • theta_ui_widgets.g.dart

You can use them as normal widgets:

PaywallWidget(
    initialTheme: ThemeMode.light,
)

🟡 Before running your app:

  1. Initialize ThetaClient instance for your project. Write at the root of your app:
await initializeThetaClient();
  1. Add the path in the pubspec.yaml file to theta_assets folder, to access the widget data:
assets: 
    - assets/theta_assets/

Congrats, you have now your UI 🥳

🔴 Live widgets

There is an option for fetching widgets from the back-end in runtime.

You can easily active it by setting isLive: true.

PaywallWidget(
    initialTheme: ThemeMode.light,
    isLive: true,
)

By making it live, you can set A/B testing from Theta's editor or update its content in real-time.


Contributing

See CONTRIBUTING.md for details.

License

Theta is licensed under the Apache License 2.0. See LICENSE for details.

Build with Theta's Projects

buildwiththeta icon buildwiththeta

The open source way of designing server-driven UI, with instant updates. Follow to stay updated about our Beta.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.