linear_calender 0.0.8

A linear calender for flutter

Linear Calender

A simple, lightweight, and highly customizable linear calendar/date picker package for Flutter.

linear_calender helps you display dates in a clean horizontal calendar view. Users can select a date, customize colors, styles, sizes, date formats, and even build their own custom date tile using itemBuilder.

Features

• Linear horizontal date picker
• Simple default design
• Fully customizable UI
• Custom selected, unselected, today, and disabled styles
• Custom date format support using intl
• Initial selected date support
• Date duration support
• Disable specific dates
• Custom date tile support using itemBuilder
• Smooth date selection callback
• Easy to integrate with any Flutter project

Getting Started

Add the dependency in your pubspec.yaml file:

dependencies:
  linear_calender: ^0.0.8

Then run:

flutter pub get

Import

import 'package:linear_calender/linear_calender.dart';

Basic Usage

import 'package:flutter/material.dart';
import 'package:linear_calender/linear_calender.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Linear Calender Demo',
      debugShowCheckedModeBanner: false,
      home: const HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Linear Calender'),
      ),
      body: Column(
        children: [
          LinearCalendar(
            startDate: DateTime.now(),
            dateDuration: 30,
            onChanged: (DateTime value) {
              debugPrint('Selected date: $value');
            },
          ),
        ],
      ),
    );
  }
}

Customized Usage

LinearCalendar(
  startDate: DateTime.now(),
  dateDuration: 60,
  height: 120,
  showMonth: true,
  showYear: false,
  style: const LinearCalendarStyle(
    selectedColor: Colors.blue,
    unselectedColor: Colors.transparent,
    todayColor: Color(0x1A2196F3),
    selectedBorderColor: Colors.blue,
    unselectedBorderColor: Colors.grey,
    todayBorderColor: Colors.orange,
    selectedTextStyle: TextStyle(
      color: Colors.white,
      fontSize: 16,
      fontWeight: FontWeight.bold,
    ),
    unselectedTextStyle: TextStyle(
      color: Colors.black,
      fontSize: 16,
    ),
    todayTextStyle: TextStyle(
      color: Colors.orange,
      fontSize: 16,
      fontWeight: FontWeight.bold,
    ),
    itemWidth: 80,
    itemHeight: 90,
    itemRadius: 14,
    borderWidth: 2,
  ),
  onChanged: (DateTime value) {
    debugPrint('Selected date: $value');
  },
)

Disable Specific Dates

You can disable any date using enabledDatePredicate.

Example: Disable Friday.

LinearCalendar(
  startDate: DateTime.now(),
  dateDuration: 60,
  enabledDatePredicate: (DateTime date) {
    return date.weekday != DateTime.friday;
  },
  onChanged: (DateTime value) {
    debugPrint('Selected date: $value');
  },
)

Initial Selected Date

LinearCalendar(
  startDate: DateTime.now(),
  dateDuration: 30,
  initialSelectedDate: DateTime.now().add(const Duration(days: 3)),
  onChanged: (DateTime value) {
    debugPrint('Selected date: $value');
  },
)

Custom Date Format

This package uses the intl package for date formatting.

LinearCalendar(
  startDate: DateTime.now(),
  dateDuration: 30,
  dayFormat: 'EEE',
  dateFormat: 'dd',
  monthFormat: 'MMM',
  yearFormat: 'yyyy',
  showDayName: true,
  showDate: true,
  showMonth: true,
  showYear: false,
  onChanged: (DateTime value) {
    debugPrint('Selected date: $value');
  },
)

Fully Custom Date Tile

If you want complete control over the UI, use itemBuilder.

LinearCalendar(
  startDate: DateTime.now(),
  dateDuration: 30,
  height: 100,
  onChanged: (DateTime value) {
    debugPrint('Selected date: $value');
  },
  itemBuilder: (
    BuildContext context,
    DateTime date,
    bool isSelected,
    bool isToday,
    bool isDisabled,
  ) {
    return Container(
      width: 75,
      margin: const EdgeInsets.symmetric(horizontal: 5),
      decoration: BoxDecoration(
        color: isSelected ? Colors.deepPurple : Colors.white,
        borderRadius: BorderRadius.circular(16),
        border: Border.all(
          color: isToday ? Colors.orange : Colors.black12,
          width: 2,
        ),
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(
            date.day.toString(),
            style: TextStyle(
              fontSize: 24,
              fontWeight: FontWeight.bold,
              color: isSelected ? Colors.white : Colors.black,
            ),
          ),
          const SizedBox(height: 4),
          Text(
            isToday ? 'Today' : '',
            style: TextStyle(
              fontSize: 12,
              color: isSelected ? Colors.white : Colors.orange,
            ),
          ),
        ],
      ),
    );
  },
)

Example with GetX

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:linear_calender/linear_calender.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Linear Calender Demo',
      debugShowCheckedModeBanner: false,
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
  Home({super.key});

  final Rx<DateTime> selectedDate = DateTime.now().obs;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Linear Calender'),
      ),
      body: Column(
        children: [
          LinearCalendar(
            startDate: DateTime.now(),
            dateDuration: 60,
            height: 120,
            showMonth: true,
            style: const LinearCalendarStyle(
              selectedColor: Colors.blue,
              selectedBorderColor: Colors.blue,
              borderWidth: 5,
              itemWidth: 80,
              itemHeight: 95,
              itemRadius: 12,
            ),
            onChanged: (DateTime value) {
              selectedDate.value = value;
            },
          ),
          const SizedBox(height: 20),
          Obx(
            () => Text(
              selectedDate.value.toString(),
              style: const TextStyle(
                fontSize: 24,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Properties

Property	Type	Default	Description
startDate	DateTime	Required	Calendar start date
dateDuration	int	30	Number of dates to show
initialSelectedDate	DateTime?	DateTime.now()	Initially selected date
onChanged	ValueChanged<DateTime>	Required	Callback when date is selected
height	double	85	Calendar height
showDayName	bool	true	Show day name
showDate	bool	true	Show date number
showMonth	bool	true	Show month name
showYear	bool	false	Show year
dayFormat	String	E	Day format
dateFormat	String	d	Date format
monthFormat	String	MMM	Month format
yearFormat	String	yyyy	Year format
enabledDatePredicate	bool Function(DateTime)?	null	Enable or disable specific dates
style	LinearCalendarStyle	Default style	Customize colors, text styles, size, radius, and border
itemBuilder	Widget Function(...) ?	null	Build completely custom date tile

Style Properties

LinearCalendarStyle allows you to customize the default calendar design.

const LinearCalendarStyle(
  selectedColor: Colors.blue,
  unselectedColor: Colors.transparent,
  todayColor: Color(0x1A2196F3),
  disabledColor: Color(0x11000000),
  backgroundColor: Colors.transparent,
  selectedBorderColor: Colors.blueAccent,
  unselectedBorderColor: Colors.transparent,
  todayBorderColor: Colors.blueAccent,
  disabledBorderColor: Colors.transparent,
  selectedTextStyle: TextStyle(
    color: Colors.white,
    fontSize: 16,
    fontWeight: FontWeight.w600,
  ),
  unselectedTextStyle: TextStyle(
    color: Colors.black,
    fontSize: 16,
  ),
  todayTextStyle: TextStyle(
    color: Colors.blue,
    fontSize: 16,
    fontWeight: FontWeight.w600,
  ),
  disabledTextStyle: TextStyle(
    color: Colors.grey,
    fontSize: 16,
  ),
  itemWidth: 75,
  itemHeight: 75,
  itemRadius: 10,
  borderWidth: 1,
)

Additional Information

This package is designed to be simple by default and flexible when needed.

If the user does not provide custom values, the package will use standard default values. If the user wants a custom look, they can customize the design using LinearCalendarStyle. For complete UI control, they can use itemBuilder.

Platform Support

Platform	Support
Android	Yes
iOS	Yes
Web	Yes
Windows	Yes
macOS	Yes
Linux	Yes

License

This package is available under the MIT License.