buildwiththeta
 <p align="center"> <a href="https://pub.dev/packages/theta"><img src="https://img.shields.io/pub/v/theta?label=pub.dev&logo=dart" alt="pub"></a> <a href="https://github.com/buildwiththeta/buildwiththeta"><img src="https://img.shields.io/github/stars/buildwiththeta/buildwiththeta?logo=github" alt="github"></a> <a href="https://discord.gg/zz9fAwqNHf"><img src="https://img.shields.io/discord/1110506355728584714?logo=discord" alt="discord"></a> <a href="https://github.com/buildwiththeta/buildwiththeta"><img src="https://img.shields.io/github/contributors/buildwiththeta/buildwiththeta?logo=github" alt="contributors"></a> </p> <p align="center"> <a href="https://docs.buildwiththeta.com/en/getting-started">Get started</a> • <a href="https://docs.buildwiththeta.com">Documentation</a> • <a href="https://github.com/buildwiththeta/buildwiththeta/tree/main/examples/">Examples</a> • <a href="https://discord.gg/zz9fAwqNHf">Community & Support</a> • <a href="https://buildwiththeta.com">Website</a> </p> # 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.** - 🔗 [Website](https://buildwiththeta.com)  2. **Navigate to a Flutter project, and open the terminal:** Install Theta CLI. ```sh $ dart pub global activate theta_cli ``` Link a project by its key. ```sh $ theta link -k <anon key> ``` You can generate files from design by running: ```sh $ theta gen ``` 3. **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: ```dart PaywallWidget( initialTheme: ThemeMode.light, ) ``` **🟡 Before running your app:** 1. Initialize ThetaClient instance for your project. Write at the root of your app: ```dart await initializeThetaClient(); ``` 2. Add the path in the pubspec.yaml file to theta_assets folder, to access the widget data: ```yaml 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`. ```dart 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](https://github.com/buildwiththeta/buildwiththeta/blob/main/CONTRIBUTING.md) for details. ### License Theta is licensed under the Apache License 2.0. See [LICENSE](https://github.com/buildwiththeta/buildwiththeta/blob/main/LICENSE) for details.