Per iniziare

Theta funziona tra la piattaforma hosted e la libreria client. Per iniziare:

• Iscriversi a buildwiththeta.com (in closed beta è necessario un invito).
• Creare un nuovo progetto e disegnare la prima interfaccia.
• Copiare la pagina con il nome che si desidera.
• Installare [Theta client library] (https://pub.dev/packages/theta) e utilizzare una UIBox('nome della pagina') per integrare la pagina nella propria applicazione.

Theta è un'applicazione web che può essere utilizzata da un browser. Per un'esperienza ottimale, attenersi ai requisiti di sistema:

• È consigliato utilizzare un desktop o un laptop.
• Utilizzare uno schermo di almeno 12 pollici.
• Si consiglia di utilizzare Google Chrome (in caso di problemi, provare a vedere se i problemi persistono con Chrome).
• Per fare copia e incolla all'interno di un progetto, permetti l'utilizzo degli appunti (una finestra di dialogo apparirà su app.buildwiththeta.com).

• Vedere come spostare e ridimensionare gli elementi.
• Vedere come impostare i limiti responsive.

flutter pub add theta

Inizializzare Theta chiamando Theta.initialize con la chiave anonima. Assicurarsi di chiamare questo metodo all'inizio dell'applicazione.

importare 'package:theta/theta.dart';

Future<void> main() async {
    await Theta.initialize(anonKey: 'thetaKey');
}

Avvolgere l'applicazione con ThetaProvider per consentire a qualsiasi UIBox di ricevere gli stili del tema e del progetto.

ThetaProvider(
    theme: ThemeMode.light,
    child: MaterialApp(
        home: // ...
    ),
)

Tutto ciò che occorre fare è aggiungere un widget UIBox alla propria applicazione e passare il nome del componente come parametro.

/// La vostra applicazione
return Scaffold(
    body: Center(
        child: UIBox('Nome del componente'),
    ),
);

È possibile visualizzare un widget segnaposto durante il caricamento e un widget di errore.

UIBox(
    'Homepage',
    placeholder: CircularProgressIndicator(),
    errorWidget: (error) => Text(error),
)

Si desidera un'interfaccia utente dinamica con supporto ai gesti (onTap, doubleTap, ecc.)? È possibile aggiungere codice personalizzato, chiamato 'workflow', basato su trigger di gesti.

1. Selezionate un singolo elemento dell'interfaccia utente in base al suo id o al suo nome.
2. Scegliere il trigger per la quale si avvierà l'azione.
3. Aggiungere il codice.

UIBox(
    'CupertinoAppBar',
    workflows: [
        Workflow('Element id', Trigger.onTap, (context) {
            /// Il vostro metodo
        }),
    ]
)

Puoi sovrascrivere le proprietà di ogni blocco UI utilizzando un widget Flutter combinando il no-code con Flutter.

UIBox(
    'Social card',
    overrides: [
        Override('Post title')
            ..setText('My beautiful cat')
            ..setColor(Colors.white, 0.5),
        Override('Cover')
            ..setImage('https://...'),
    ],
),

Se nel componente no-code l'elemento a cui si vuole sovrascrivere il figlio ne ha già uno, verrà rimosso e sostituito con quello inserito dall'utente tramite codice.

È possibile utilizzare la UIBox anche all'interno di altre UIBox. Ciò offre un grado di personalizzazione molto elevato.

UIBox(
    'Component name',
    overrides: [
        Override('Element id')
            ..setChild(UIBox('Other component')),
    ],
),

È possibile sovrascrivere i figli di un elemento.

UIBox(
    'Component name',
    overrides: [
        Override('Element name')
            ..setChildren([
                Text('Child 1'), 
                Text('Child 2')
            ]),
    ],
),