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

[Piotr Kundu]

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. 

[Piotr Kundu]

Crossposted: https://community.flutterflow.io/c/discuss-and-get-help/using-syncfusion-widgets-in-flutterflow

[Piotr Kundu]

///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;


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


class _CalenderState extends State<Calender>  {


  @override
  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),
           ),
  )));
  }


}

[Piotr Kundu]

Here is a short writeup and ping me if you need help:
https://gist.github.com/piotrkundu/e3ddc2205e1af419e30152aa31c74138

[Yuvaraj Gajaraj]

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.

Regards,
Yuvaraj.

[B P]

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. 

[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_e5f8cdae.zip