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;


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


}


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

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



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.


Regards,
Yuvaraj.



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.

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

Loader.
Live Chat Icon For mobile
Up arrow icon