We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How do I use any of the SyncFusion widgets in FlutterFlow.io

I'm building a quick prototype, don't wont to spend time writing my own customs widgets so I found Syncfusion.

I want to add the date range and need a way to https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/date_picker/date_picker_getting_started.dart. as custom widget in FlutterFlow.io

Unfortunately that file has a bunch of dependencies and I started to manually copy each class (SampleView,SampleViewState and so on) but that kind of defies the purpose of me using FlutterFlow and Syncfusion.

import '../../model/model.dart';
import '../../model/sample_view.dart';
import 'popup_picker.dart';

So I wonder is there an easy way to upload the file and all of it's dependencies or an example with no dependencies on other files.

PS. If it matters, I will need a commercial license once the app is published - but I need to get my up and running with low effort so it doesn't impact my dayjob. I'm new to Dart and Flutter, quite old to programming. 

6 Replies

PK Piotr Kundu May 14, 2022 10:53 PM UTC

///Date picker imports

import 'package:syncfusion_flutter_datepicker/datepicker.dart';

class Calender extends StatefulWidget {
  const Calender({Key{NULL_SAFE_QUESTION_SENTINEL} key , this.width,this.height,this.someParama, }) : super(key: key);

  final double{NULL_SAFE_QUESTION_SENTINEL} width;
final double{NULL_SAFE_QUESTION_SENTINEL} height;
final String{NULL_SAFE_QUESTION_SENTINEL} someParama;

  _CalenderState createState() => _CalenderState();

class _CalenderState extends State<Calender> {

  Widget build(BuildContext context) {
     return Scaffold(
         body: Container(
         child: SfDateRangePicker(
           monthCellStyle: DateRangePickerMonthCellStyle(
           weekendDatesDecoration: BoxDecoration(
               color: Colors.grey,
               border: Border.all(color: Colors.grey,
                    width: 1),
               shape: BoxShape.rectangle),
           specialDatesDecoration: BoxDecoration(
                color: Colors.green,
                border: Border.all(color: const Color(0xFF2B732F), width: 1),
                shape: BoxShape.circle),
           blackoutDatesDecoration: BoxDecoration(
                color: Colors.red,
                border: Border.all(color: const Color(0xFFF44436), width: 1),
                shape: BoxShape.circle),
          selectionMode: DateRangePickerSelectionMode.multiRange,
          monthViewSettings: DateRangePickerMonthViewSettings(
firstDayOfWeek: 1,
             weekendDays: [6,7],
             blackoutDates: <DateTime>[DateTime(2022, 05, 26)],
             specialDates: <DateTime>[DateTime(2022, 05, 20), DateTime(2022, 05, 16), DateTime(2022,05,17)],
           showWeekNumber: true,
           weekNumberStyle: DateRangePickerWeekNumberStyle(
               textStyle: TextStyle(fontStyle: FontStyle.italic),
               backgroundColor: Colors.purple),


PK Piotr Kundu May 14, 2022 11:11 PM UTC

Here is a short writeup and ping me if you need help:

YG Yuvaraj Gajaraj Syncfusion Team May 16, 2022 04:02 PM UTC

Hi Piotr,

Greetings from Syncfusion. We are happy to hear that you are implemented our widget in the flutter flow. If you have any further queries, please get back to us we are always happy in assisting you.


BP B P replied to Yuvaraj Gajaraj April 26, 2023 12:30 AM UTC

I have been trying to get the calendar to work on FlutterFlow and have not been successful. Do you have any tips? Even in its simplest form, it won't compile for me, yet has undefined errors. 

IR Indumathi Ravichandran Syncfusion Team April 26, 2023 02:39 PM UTC

As per the shared information, we have checked the Calendar widget not working in FlutterFlow.io and it was working fine as expected. We have attached the tested code snippet and video for the same. Please find from the following link.

Also please find the documentation link for creating a custom widget.


Code snippet:

// Automatic FlutterFlow imports

import '/flutter_flow/flutter_flow_theme.dart';

import '/flutter_flow/flutter_flow_util.dart';

import '/custom_code/widgets/index.dart'; // Imports other custom widgets

import '/flutter_flow/custom_functions.dart'; // Imports custom functions

import 'package:flutter/material.dart';

// Begin custom widget code


import 'package:syncfusion_flutter_calendar/calendar.dart';

class SyncfusionCalendarWidget extends StatefulWidget {

  const SyncfusionCalendarWidget({

    Key? key,



  }) : super(key: key);

  final double? width;

  final double? height;


  _SyncfusionCalendarWidgetState createState() =>



class _SyncfusionCalendarWidgetState extends State<SyncfusionCalendarWidget> {


  Widget build(BuildContext context) {

    return Container(

      width: widget.width,

      height: widget.height,

      child: SfCalendar(

        view: CalendarView.week,





Attachment: Video_e5f8cdae.zip

Live Chat Icon For mobile
Up arrow icon