Mastering Custom (Function/Widget/Action) Code in @FlutterFlow: The Essential Guide

My links

Support my work

Website

You can book me as FF mentor or support my work

GitHub repo

Discord channel

YouTube channel

In this video, I'll dive into the world of custom code in FlutterFlow and show you how to unlock its full potential. You'll learn how to write custom functions, actions, and widgets, as well as how to copy and paste code from ChatGPT. I'll also show you how to automatically add all your arguments inside custom actions and widgets for maximum efficiency. This video is an essential guide for anyone looking to take their FlutterFlow skills to the next level. By the end, you'll have a solid understanding of how to use custom code to enhance your projects and streamline your workflow. So, join me and discover the power of custom code in FlutterFlow!

Code used

In this video
00:00 Introduction
01:34 Custom Functions
17:25 Custom Widgets
23:57 Custom Actions

[wadanda]

This is awesome Dimitar, will be running to your calendy 🔥✊🏿

[flutterflowexpert]

🌟 Welcome to my video! 🌟 To ensure you have the best experience and access to all the resources mentioned, we've placed all active links in the video description below. This helps me keep everything up-to-date and easy for you to find!

👾 Join my Discord community! It's a great place to connect, share, and get the latest updates. The link is in the description as well.

💖 If you enjoy our content, consider supporting the channel. Every bit of support helps me create more of what you love. Details on how you can support are also in the description.

Thank you for watching and being a part of the community! 🚀

[rpeg]

Thanks so much for the information. Great to know!

[salemmohammad]

For those like me who don't know anything about coding, there are important details for us like which lines to copy and which ones not to, how to know which argument to add, how to format the prompt in AI correctly in order to avoid the output not working, why the results given by the AI are not working etc.
It would be great if you made a video to answer such questions

[shubhamsapra]

hi, what to do if the pub dev files have a class and the future function is inside the class?
kindly help thanks

[knowledge-]

I wanted to implement mixpanel analytics using mixpanel_flutter 2.1.1 while it need custom action then added inside main.dart file via inital actions . But while doing so it just led to infinite wait at test window what should I do it is not working

[thebicycleman]

here is a small tip for you: when you want to pronounce the word analyzer, think of it like this " Anna" like the name Anna Nicole then the word "Lie - ZER" like "dont LIE to me" so " Anna Lie ZERR" or "Anna - Lizer" like adVISOR but LIZOR - "Anna Lizor"

Thank u and ur video was very helpful :)

[AM-qkox]

Hey Dimitar, amazing videos 😄 thanks for diving deep, without skimming over important details. Just a question - do you do any 1-1 consulting? Thanks so much!

[davidmoosmann]

Let's say I want to be able to record an audio file and upload it to whisper API. Would I need a custom action for: recording, stopping the recording, saving the file, and uploading, or can it all be done in one?

[false-prophet-abc]

Thanks for the video. Could you please confirm my understanding on the differences between custom function, widget and action? I have a button (custom widget) in a screen. I click it, and it asks for the action (custom action). The app calculates the average (custom function). Am I correct?

[shrihari]

how to record audio and store it on firebase?

[mxmz-qh]

This is very helpful for some functionalities. I was looking for a near data broadcasting widget and I stumbled upon a feature that allows you to use your device as a BLE Peripheral. Do you have something like this in your Git?

[gustavoreyes]

Hey Dimitar, a lot of thanks, I am using this => import as actions;
and tha let me call acction inse other action . Is this use correct;

[garyjehan]

Thank you so much ! Some APIs have complex input, Could you make a video on how to write code for a custom action to write JSON and then put it as an input for an API ? :)

[delzabrown]

Hey great video but nobody on YouTube talks about troubleshooting errors when using LatLng() in custom widgets, Even though I can use LatLng in custom functions 😵‍💫

[pratimadudhewar]

Hey Dimiter, very helpful video.. I want to perform google auth using custom action (google_sign_in: ^6.1.0) So I have tried creating an action with pub dev dependencies. But I'm confused with adding code ? Why this GitHUb repo is required? Form where I can copy the code of a library?

[patjescloud]

Thank you sm for your efforts, where can i donate money?

[KravchenkoGaming]

this is not mastering bro you just copy and paste without explaination =(

[ermanozkaya]

Excellent subject that we needed for a long time but unfortunately your explaination is not good and you kept everything half. You didnt explain custom widget well. I lost 35 minutes and i forgot indeed what i knew. Messy, confusing tutorial :(

[ImedBedi]

amazing video i learn lotoff from you i hope that you help with printer pos ticket listining to new docs snapshot if u can make this works will be so great


// Automatic FlutterFlow imports
import '/backend/backend.dart';
import
import
import // Imports other custom actions
import // Imports custom functions
import
// Begin custom action code
// DO NOT REMOVE OR MODIFY THE CODE ABOVE!

// Set your action name, define your arguments and return parameter,
// and then add the boilerplate code using the button on the right!

import 'dart:async';
import

final db = FirebaseFirestore.instance;
final collection = db.collection('sendorder');
final printerAddress = '192.168.0.1'; // Replace with your printer's IP address
final printerPort = 9100; // Replace with your printer's port number

Future newCustomAction() async {
final snapshot = await collection.get();
final docs = snapshot.docs;
final lastDocId = docs.isNotEmpty ? docs.last.id : null;
final query =

final newSnapshot = await query.get();
final newData = newSnapshot.docs.map((doc) => doc.data()).toList();
for (final data in newData) {
final textToPrint = 'Field 1: ${data['field1']}, Field 2: ${data['field2']}';
final socket = await Socket.connect(printerAddress, printerPort);
socket.write(textToPrint);
await socket.destroy();
}
}