Custom Code Tutorial - FlutterFlow

Here's a quick guide on adding and using custom Widgets and Actions in your FlutterFlow project!

//

FlutterFlow is a low-code builder for developing native mobile applications. You can use our simple drag and drop interface to build your app 10x faster than traditional development. In order to build your custom app fast, build visually, connect a scalable backend, & export Flutter and DART code. When you’re ready to launch, deploy directly to the App Store for both iOS & Android devices.

[flutterflowexpert]

3:00 LOL, the singing is killing me :)

[phanmemdoanhnghiep]

I tried to watch many videos of this channel, but they always try to make it fast and cut the important parts, is this intentional?

[sancho]

We have access to BuildContext!!! Great! I was looking for it :D

[lovol]

For anyone else stuck at step one... Find the 'custom code' icon, it's changed to soemthing that looks like an indented list on the left hand side, nothing like code, but there you have it.

[maalinlaha]

Cool, btw, are you guys working on local notifications?

[toddherron]

import

class FFPieChart extends StatefulWidget {
const FFPieChart({
Key? key,
this.width,
this.height,
this.color,
this.name,
}) : super(key: key);

final double? width;
final double? height;
final Color? color;
final String? name;

@override
_FFPieChartState createState() => _FFPieChartState();
}

class _FFPieChartState extends State<FFPieChart> {
@override
Widget build(BuildContext context) {
return Container(
width: widget.width,
height: widget.height,
padding: const 8.0),
decoration: BoxDecoration(color: Colors.transparent),
child: PieChart(
dataMap: {
"The Flutter Team": 1,
"Our Investors": 1,
"Coffee": 1,
if (widget.name!.isNotEmpty) "${widget.name} ❤": 7,
},
animationDuration: Duration(milliseconds: 1000),
chartLegendSpacing: 32,
chartRadius: / 1.4,
colorList: <Color>[
Colors.blue,
Colors.green,
Colors.brown,
widget.color ?? const Color(0xFFB63E91),
],
initialAngleInDegree: 0,
chartType: ChartType.disc,
ringStrokeWidth: 32,
legendOptions: LegendOptions(
showLegendsInRow: false,
legendPosition: LegendPosition.bottom,
showLegends:true,
legendShape: BoxShape.circle,
legendTextStyle: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
chartValuesOptions: ChartValuesOptions(
showChartValueBackground: true,
showChartValues: false,
showChartValuesInPercentage: false,
showChartValuesOutside: false,
decimalPlaces: 1,
),
),
);
}
}

[kbdub]

great video, been looking for how better to edit the code directly, this video shows that.

[alexejgerstmaier]

Does not compile for me, "Target of URI doesn't exist: Try creating the file references by the URI, or Try using a URI for a file that does exist."

[Avelino]

Great video, could you please share the code used to create the widget with the chart details?

[pratimadudhewar]

Thanks for sharing the video. Can you tell me from where you copy that code? I want to add two packages Google sign-in and HTTP interceptor. From where I can copy the code?

[ventas]

Thank you very much,
It is the video tutorial that I needed

[neztechnology]

Hello there, I would like to ask, does this make it possible for me to create a widget to implement another ad mediation like appodeal for instance, instead of google admob banner?

[dedeus_ferdinand]

Is this Matthew McConaughey explaining me how to code?

[Ivinjo]

Thank you very much for the video.
I am not sure is it a bug or I am doing something wrong, but when using custom icons in a custom widget. Code in editor won't compile.
Can you please make a video with custom icons included?

[seetheworld]

Is there any option where I can write a code for a full custom page like If i don't want to write separate code for function and for widgets and for actions can i write full code at one place in flutterflow?? Please reply

[kragwad]

Do you have the example code that you copy and pasted for us to try it? Thanks!

[shidalgo]

Hello... Blessings, does anyone know how to make an option to download any file from flutter flow, that is, if I have a .pdf or .doc file uploaded, how can I download them?

[sbasalan]

I prefer to listen your melody like at the first compiling scene instead a fe moments later short waiting add

[pushingpandas]

Great! Is there a complete course for Flutterflow from start to end?

[Tommy-Handsome-and-Smart]

Why not put the code in the description, now your tutorial is useless for newbies like me.