Pour commencer

Theta fonctionne entre la plateforme hosted et la bibliothèque client. Pour commencer :

• Inscrivez-vous sur buildwiththeta.com (une invitation est requise pour la bêta fermée).
• Créez un nouveau projet et concevez votre première interface.
• Copiez la page sous le nom que vous souhaitez pour le miroir.
• Installez Bibliothèque du client Theta et utilisez UIBox('name of the page') pour intégrer la page dans votre application.

Theta est une application web qui peut être utilisée à partir d'un navigateur. Pour une expérience optimale, veuillez respecter les exigences du système :

• Il est recommandé de travailler sur un ordinateur de bureau ou un ordinateur portable.
• Utilisez un écran d'au moins 12 pouces.
• Il est recommandé d'utiliser Google Chrome (si vous rencontrez des problèmes, essayez de voir si les problèmes persistent sur Chrome).
• Pour faire du copier-coller dans un projet, autorisez le ClipBoard (une boîte de dialogue apparaîtra à app.buildwiththeta.com).

• Voir comment déplacer et redimensionner des éléments.
• Voir comment définir des contraintes réactives.

flutter pub add theta

Initialisez Theta en appelant Theta.initialize avec votre clé anonyme. Veillez à appeler cette méthode à la racine de votre application.

import 'package:theta/theta.dart';

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

Enveloppez votre application avec ThetaProvider pour permettre à n'importe quelle UIBox de recevoir le thème et les styles du projet.

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

Tout ce que vous avez à faire est d'ajouter un widget UIBox à votre application et de passer le nom du composant en paramètre.

/// Your app
return Scaffold(
    body: Center(
        child: UIBox('Nom du composant'),
    ),
);

Vous pouvez afficher un widget d'espace réservé pendant le chargement et un widget d'erreur.

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

Vous souhaitez une interface utilisateur dynamique avec prise en charge des gestes (onTap, doubleTap, etc.) ? Vous pouvez ajouter un code personnalisé, appelé "workflow", basé sur des déclencheurs gestuels.

1. Sélectionner un seul élément de l'interface utilisateur en fonction de son identifiant ou de son nom.
2. Choisissez le déclencheur pour lequel l'action commencera.
3. Ajoutez votre code.

UIBox(
    'CupertinoAppBar',
    workflows: [
        Workflow('Element id', Trigger.onTap, (context) {
            /// Votre méthode
        }),
    ]
)

Vous pouvez remplacer chaque bloc d'interface utilisateur par un widget Flutter en mélangeant du no-code avec Flutter.

UIBox(
    'Social card',
    overrides: [
        Override('Titre du post')
            ..setText('Mon magnifique chat')
            ..setColor(Colors.white, 0.5),
        Override('Cover')
            ..setImage('https://...'),
    ],
),

Si, dans le composant sans code, l'élément sur lequel vous souhaitez écraser l'enfant en possède déjà un, celui-ci sera supprimé et remplacé par celui saisi par l'utilisateur via le code.

Vous pouvez également utiliser le site UIBox à l'intérieur d'autres sites UIBox. Cela permet un très haut degré de personnalisation.

UIBox(
    'Nom du composant',
    overrides: [
        Override('Element id')
            ..setChild(UIBox('Autre composant')),
    ],
),

Vous pouvez également écraser les enfants d'un élément.

UIBox(
    'Nom du composant',
    overrides: [
        Override('Nom de l'élément')
            ..setChildren([
                Text('Enfant 1'), 
                Text('Enfant 2')
            ]),
    ],
),