How to customize the agenda item height in the Flutter Calendar

3 mins read

In the Flutter Event Calendar, you can customize the agenda item height using the `agendaItemHeight` property of the `MonthViewSettings` in the calendar widget.

Step 1: Inside the state, initialize the default values for calendar view and item height:

List<String> _size = <String>['60', '50', '40', '30'];
double _itemHeight = 0.0;

Step 2: Create a `PopupMenuItem` in the AppBar to allow users to select different agenda item heights:

appBar: AppBar(
  actions: <Widget>[
    PopupMenuButton<String>(
      icon: Icon(Icons.settings),
      itemBuilder: (BuildContext context) {
        return _size.map((String choice) {
          return PopupMenuItem<String>(
            value: choice,
            child: Text(
              '$choice',
            ),
          );
        }).toList();
      },
      onSelected: (String value) {
        setState(() {
          if (value == '60') {
            _itemHeight = 60;
          } else if (value == '50') {
            _itemHeight = 50;
          } else if (value == '40') {
            _itemHeight = 40;
          } else if (value == '30') {
            _itemHeight = 30;
          } else if (value == '20') {
            _itemHeight = 20;
          }
        });
      },
    ),
  ],
),

Step 3: Assign the item height value to the `agendaItemHeight` property of the `MonthViewSettings` in the calendar widget.

appBar: AppBar(
  actions: <Widget>[
    PopupMenuButton<String>(
      icon: Icon(Icons.settings),
      itemBuilder: (BuildContext context) {
        return _size.map((String choice) {
          return PopupMenuItem<String>(
            value: choice,
            child: Text(
              '$choice',
            ),
          );
        }).toList();
      },
      onSelected: (String value) {
        setState(() {
          if (value == '60') {
            _itemHeight = 60;
          } else if (value == '50') {
            _itemHeight = 50;
          } else if (value == '40') {
            _itemHeight = 40;
          } else if (value == '30') {
            _itemHeight = 30;
          } else if (value == '20') {
            _itemHeight = 20;
          }
        });
      },
    ),
  ],
),

View the GitHub sample here

UG link: https://help.syncfusion.com/flutter/calendar/month-view#agenda-item-height

agenda view item height