---
title: Theta - Design to Flutter - Docs
description: Design to Flutter
next: /getting-started
nextTitle: Getting started
---

![Banner](https://api.buildwiththeta.com/storage/v1/object/public/theta-assets/logos/banner_theta_flutter_colors.jpg)

<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/XGXrGEk4c6"><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)

![Theta Studio](https://api.buildwiththeta.com/storage/v1/object/public/theta-assets/covers/263726701.jpg)

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.