Having trouble implementing Sf Calendar in FlutterFlow.

[B P]

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? 

[Indumathi Ravichandran]

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

[B P]

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

[Indumathi Ravichandran]

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

[Marchel]

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

[Indumathi Ravichandran]

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