How to run Flutter's Build with Theta sample app

Navigate to Theta's example app.

import 'package:flutter/material.dart';
import 'package:theta/theta.dart';

Future<void> main() async {
  /// Initialize Theta instance.
  /// You can get an anonymous key at https://app.buildwiththeta.com
  await Theta.initialize(anonKey: 'Theta Key');

  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final _controller = UIBoxController();

  @override
  void initState() {
    super.initState();
    _controller.onLoaded(() {
      debugPrint('Loaded!');
    });
    _controller.onError((error) => debugPrint(error.toString()));
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    /// ThetaProvider is used to provide the project styles to the widgets.
    return ThetaProvider(
      theme: ThemeMode.light,
      child: MaterialApp(
        home: Scaffold(
          /// UIBox is used to build the UI. It requires the component name.
          body: UIBox(
            'Your component',
            controller: _controller,

            /// [placeholder] is the widget displayed while the page is loading.
            placeholder: const CircularProgressIndicator(),

            /// [errorWidget] is the widget displayed if an error occurs.
            errorWidget: (error) => Text(error.toString()),

            /// [overrides] are the properties that can be overriden by the user.
            overrides: [
              /// Override an [element] with a custom widget still having the original [element] child.
              Override(
                'node id',
                builder: (context, node, child, children) {
                  return GestureDetector(
                    onTap: () {
                      debugPrint('Tapped!');
                    },
                    child: Container(
                      color: Colors.black,
                      child: child,
                    ),
                  );
                },
              ),

              /// Or override a text element with a custom text value and color.
              Override(
                'node id',
                text: 'Click me!',
                color: Colors.blue,
              ),
            ],

            /// [workflows] are the workflows that can be triggered by the user, mixing no-code and code.
            workflows: [
              Workflow(
                'node id',
                Trigger.onTap,
                () => debugPrint('Tapped!'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Set up the project#

  1. Add your own Anon Key. You can find it inside your projects at app.buildwiththeta.com.
  2. Change the name parameters of the UIBox to the name of the component you want to display.

Run#

flutter run -d chrome

Running it, you will see a blank page with the component created inside Theta. With this demo you can see how it behaves inside a Flutter app, trying responsive modes and trying to mix your own design with custom code through workflows (you will find the examples already written inside main.dart)

Caution: in this test project, the cache has been disabled. It is advisable, however, to keep it always active in your projects to avoid rebuilding the application too many times.

Have fun!