FlutterFlow already has predefined chart components, but the problem is that you don’t get to customize them as much as the custom component that we’ll show you here. With Custom Bar Charts, you can customize all of the elements of the chart so that the chart is well embedded into your app’s existing user interface.
Watch our Youtube tutorial
Import the Library
Once you’ve created a new FlutterFlow project, open it and navigate to “Custom code” section in the left panel. Then click on Add new and select Widget.
You can create a new name for the Widget, but in our case we have to name the widget “CustomChart”, as the custom code that we’ll import in the next step references that specific name in classes. If you don’t name the widget correctly, the Chart won’t function properly.
Then the next step is to in the Pubspec dependency section to click the button “Add Dependency”.
As you can see a new input field pops up. In this field you have to insert the name and version of the dependency or library, which you find on pub.dev. Pub.dev is an official repository for Flutter framework and we can find any Flutter-supported library here.
Let’s search for “fl_chart” and click on the first hit of the search results. As you can see at the top, we can copy the name that includes the version and insert it in our input field in our FlutterFlow project. This will allow our custom chart to reference the chart library that we are using.
Then click on the green refresh button and continue with the next step.
Set up a Custom Widget
Every library usually has a code snippet in Readme or Example section. This part requires some basic knowledge of programming in Flutter - you can take the example code provided by your chosen library and adjust it to your needs.
Since we used the fl_chart library, we took a code snippet from their GitHub example, and then made some changes, so that the chart looks more custom.
Once you have the code, paste it into the code editor.
As you can see, as soon as we pasted the code into the editor, we can see underlined red text indicating errors in the code. Hover over the underlined text and select “quick fixes” and then “Import library ‘package:fl…”.
This should remove the underlined red text through the whole code snippet.
Then click on “Save Widget” to save it. This should trigger the message that the FlutterFlow parameters don’t match with parameters in the code and ask you if you are sure you want to proceed.
Parameters are parts of the code that reference the specific elements of the bar chart like background color, chartbar color, numbers and more. By importing the parameters to FlutterFlow, we can make adjustments to our custom bar chart directly in our FlutterFlow project, without having to change the code itself.
Select “Yes” and this concludes the second step.
Add the Widget to the Layout
The next step will allow us to add the newly created Widget to one of the pages within our FlutterFlow app.
First, select the page where you would like to insert the custom Bar chart, and in the Widget tree create a child element “Column” to your selected page. Repeat the process for the newly created Column element, only this time insert your Custom Bar chart.
Bind the Widget
The last part is to bind the newly inserted Widget with the appropriate data. On the right-hand menu, we can see that we can now set values for the previously mentioned parameters. In our case, there are 4 main parameters, but your custom code could specify more.
Set appropriate width and height. For numbers, we could connect the chart to the backend so that it displays real data from it, but in our case, for testing purposes, we are going to set the number to random doubles from 0 to 10.
Test it!
Now that we have finished all the necessary steps, we can preview the chart with random numbers!
Make sure there are no errors reported in the top right corner and if there are none, proceed to test the widget.
This is how you can elevate the feel of your FlutterFlow app to another level with custom Bar charts.
