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
close icon

Having trouble implementing Sf Calendar in FlutterFlow.

Flutterflow is a visual app builder on top of Flutter. 


There is a function to create a custom widget from 3rd party packages. I have been trying to implement the Syncfusion calendar to no avail. Despite what I believe is technically proper implementation, my widget will not compile, with undefined errors. 


Custom widgets in FlutterFlow require a height and width paramater (which can later be overridden) 


The boilerplate code in FF for a custom widget (named SfCal) is as follows: 

// Automatic FlutterFlow imports
import '/backend/backend.dart';
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 '/custom_code/actions/index.dart'; // Imports custom actions
import '/flutter_flow/custom_functions.dart'; // Imports custom functions
import 'package:flutter/material.dart';
// Begin custom widget code
// DO NOT REMOVE OR MODIFY THE CODE ABOVE!

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

final double? width;
final double? height;

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

class _SfCalState extends State<SfCal> {
@override
Widget build(BuildContext context) {
return Container();
}
}

///////////////////

Import statements are added at the top, then the code is modified. Dependencies can then be added separately.  

Is anyone able to walk me through how I can successfully implement Syncfusion's Calendar (and ideally Datepicker as well) into my FlutterFlow app? 

5 Replies

IR Indumathi Ravichandran Syncfusion Team April 26, 2023 02:42 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.

https://docs.flutterflow.io/customizing-your-app/custom-functions/custom-widgets#2.-create-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

// DO NOT REMOVE OR MODIFY THE CODE ABOVE!


import 'package:syncfusion_flutter_calendar/calendar.dart';


class SyncfusionCalendarWidget extends StatefulWidget {

  const SyncfusionCalendarWidget({

    Key? key,

    this.width,

    this.height,

  }) : super(key: key);


  final double? width;

  final double? height;


  @override

  _SyncfusionCalendarWidgetState createState() =>

      _SyncfusionCalendarWidgetState();

}


class _SyncfusionCalendarWidgetState extends State<SyncfusionCalendarWidget> {

  @override

  Widget build(BuildContext context) {

    return Container(

      width: widget.width,

      height: widget.height,

      child: SfCalendar(

        view: CalendarView.week,

      ),

    );

  }

}



Attachment: Video_e76b670a.zip


BP B P replied to Indumathi Ravichandran April 26, 2023 07:26 PM UTC

Hello Indumathi,


Thank you so much for your prompt and thorough response. I have attempted to input the code you gave, and I am still getting undefined errors. See attached image. I am relatively new to coding and development, but I am unable to find any inconsistencies in my code and yours. I noticed that you did not provide a version number in the dependencies, whereas I am accustomed to putting the latest version in the dependencies (syncfusion_flutter_calendar: ^21.1.41) however, when i tried it without the version, I still get the same "has errors." When I click on the error, it says "unknown error," with no specific error message. 


Are you able to advise me on this issue? Thank you so much. 


Attachment: sfcalerror.jpg_9665b5fa.zip


IR Indumathi Ravichandran Syncfusion Team April 27, 2023 11:36 AM UTC

Can you please create a new project in FlutterFlow.io and try again once for implementing the calendar in FlutterFlow? Also please ensure the following things before compiling the code.


  •   Add the Width and Height properties of the Custom Widget.
  •   Enable the Exclude from a compilation from Widget Settings. 


Kindly follow the below steps to achieve your requirement,

  •   Create a project in FlutterFlow.
  •   Using the Custom code option add a new widget and add the required code to run calendar.
  •   Add the WidgetName as the class name of the project 
  •   Then add the Pubspec dependencies.
  •   Then using the UI Builder option drag and drop implemented widget in the display area.


We have attached the tested video for the same. If possible please check with above cases and let us know still if you are facing the same issue. It would be helpful for us to analyze and provide you a solution at the earliest.



Attachment: NewVideo_4aa9ff31.zip


MA Marchel August 3, 2023 08:34 PM UTC

Just to express my appreciation for this excellent support.
Especially with the added videos.
Awesome and thank you!!



IR Indumathi Ravichandran Syncfusion Team August 4, 2023 05:26 AM UTC

Hi Marchel, 


Thank you for your appreciation. Please let us know if you need any further assistance with this. We are always happy to assist you.


Regards,

Indumathi R


Loader.
Live Chat Icon For mobile
Up arrow icon