Custom Functions

As you build your app, you'll often find the need for specialized functionalities that go beyond our standard offerings. Whether it's a repetitive task that calls for a custom function, a unique UI element not found in our default widget library, or the integration of a specific package or plugin from pub.dev, we provide the following features to accommodate these needs.

pageCustom FunctionspageCustom WidgetspageCustom Action

Prerequisites for adding a dependency

If you plan to use a dependency from pub.dev into a custom widget or action, you must go through the following steps:

1. Choosing dependency

2. Copying dependency/package name

3. Copying import statement

1. Choosing dependency

You will find varieties of dependencies for a specific requirement, and choosing the best one can be challenging. This section helps you identify the right dependency by examining its score.

When you search for any dependency in pub.dev, you will get a list of dependencies. You can filter out the result based on which dependency is more inclined toward your needs. You can do so by opening and checking each dependency manually.

Once you have a handful of dependencies, consider the following factors while choosing the final one.

1. WEB: It must support Web to run your app in our Run/Test Mode.

2. Likes: This shows how many developers have liked a dependency.

3. Pub Points: Tells the quality of the dependency (out of 130) based on code style, platform support, and maintainability.

4. Popularity: This metric indicates how many apps use the package. A high popularity score (out of 100%) can suggest that the package is stable and trusted by many developers.

5. Documentation: A well-documented package will save you time and reduce ambiguity. Check if the package has clear usage examples, a comprehensive README, and ideally API documentation.

6. Maintenance & Updates: Check the last update date. A regularly updated package is more likely compatible with the latest Dart/Flutter versions and has fewer bugs.

Dependency score

2. Copying dependency name

To use the dependency code in our code editor, copy its name with the version. To do so, click the 'Copy to Clipboard' () icon.

Copying dependency/package

The current dependency might depend on other dependencies to work. So make sure you also copy the name and version of all the additional dependencies to specify in the code editor.

You can check if the current dependency has any additional dependencies inside the 'Dependencies' section at the bottom right side.

Additional dependencies

3. Copying import statement

An import statement points to where the dependency's code is located. When making a custom widget or action, place this statement at the beginning of the code editor.

Open the dependency page and select the installing tab; under the Import it section, you'll find the import statement. To copy, click the "Copy to Clipboard" () icon.

Copying Import statement

FAQs

I can't understand the error!

At any point, if you feel like you cannot understand and fix the issue, you can use ChatGPT to get help.

Simply open the ChatGPT and enter the prompt like: Identify and fix the issue in this code: [paste-your-custom-widget-code]

Once you've entered your prompt, ChatGPT will provide a helpful response to guide you toward a solution. If the response includes only an updated line of code with the fix, you can simply copy and paste it into your code editor.

If you need more help or want to see the complete updated code, you can ask ChatGPT to provide a full code with the fix. Here is the simple prompt: Write down the full code with the fix

Now paste the updated code in the code editor, save the progress, and compile the widget!

---

Last Updated Date: September 1, 2023