Component

Components can be created from scratch through the use of code or directly with widgets within Teta.

Visual Component

Create your Visual Component with the Tree editor.

Create a Visual Component

  • After creating the Visual Component (you can find instructions here), select your Component from the Pages Panel (left side of your screen).
  • Click on + Add New in the Tree Area.
  • Select the widgets you need in the Widget Panel to create your component.

Custom Components

While developing your app, you may want to use a widget that is not a standard Teta widget. This could be a widget from pub.dev or a special widget that you built yourself.

Using our Custom Component editor, you can write/modify the widget code. You can compile and preview the custom widget right in the UI builder.

Create a Custom Component

To create a new component:

  • After creating the Custom Component (you can find instructions here), select your Component from the Pages Panel (left side of your screen).
  • Add the code.

Adding the Code

There are two ways to add the code:

1. Write the Code

You can define/write the dart code directly in the UI editor. Teta allows you to define incoming/outgoing parameters and check the code.

2. Add Widgets

You can add the dart code directly by copying and pasting the widgets found on Native and Complex sections (on the right side of your screen).

Testing Code

Testing the Custom Component code allows you to see if your code works as expected.

To test the code:

  • After you have added to the code, select Save button (on the right side of your screen).
  • Click on the Run button.

Adding a Component to your project

To display the created components, add the Component widget. You can find instructions for adding the Component here.