flutter calendar strip
easy to use and beautiful calendar strip component for flutter.
install
dependencies:
...
calendar_strip: ^1.0.4
usage example for calendar strip
container(
child: calendarstrip(
startdate: startdate,
enddate: enddate,
ondateselected: onselect,
datetilebuilder: datetilebuilder,
iconcolor: colors.black87,
monthnamewidget: _monthnamewidget,
markeddates: markeddates,
containerdecoration: boxdecoration(color: colors.black12),
))
datebuilder widget method usage
datetilebuilder(date, selecteddate, rowindex, dayname, isdatemarked, isdateoutofrange) {
bool isselecteddate = date.compareto(selecteddate) == 0;
color fontcolor = isdateoutofrange ? colors.black26 : colors.black87;
textstyle normalstyle = textstyle(fontsize: 17, fontweight: fontweight.w800, color: fontcolor);
textstyle selectedstyle = textstyle(fontsize: 17, fontweight: fontweight.w800, color: colors.black87);
textstyle daynamestyle = textstyle(fontsize: 14.5, color: fontcolor);
list<widget> _children = [
text(dayname, style: daynamestyle),
text(date.day.tostring(), style: !isselecteddate ? normalstyle : selectedstyle),
];
if (isdatemarked == true) {
_children.add(getmarkedindicatorwidget());
}
return animatedcontainer(
duration: duration(milliseconds: 150),
alignment: alignment.center,
padding: edgeinsets.only(top: 8, left: 5, right: 5, bottom: 5),
decoration: boxdecoration(
color: !isselecteddate ? colors.transparent : colors.white70,
borderradius: borderradius.all(radius.circular(60)),
),
child: column(
children: _children,
),
);
}
monthname widget method usage
monthnamewidget(monthname) {
return container(
child: text(
monthname,
style: textstyle(
fontsize: 17,
fontweight: fontweight.w600,
color: colors.black87,
fontstyle: fontstyle.italic,
),
),
padding: edgeinsets.only(top: 8, bottom: 4),
);
}
full example
import 'package:flutter/material.dart';
import 'package:calendar_strip/calendar_strip.dart';
void main() => runapp(myapp());
class myapp extends statelesswidget {
// this widget is the root of your application.
@override
widget build(buildcontext context) {
return materialapp(
title: 'flutter demo',
theme: themedata(primaryswatch: colors.blue),
home: myhomepage(title: 'flutter demo home page'),
);
}
}
class myhomepage extends statefulwidget {
myhomepage({key key, this.title}) : super(key: key);
final string title;
@override
_myhomepagestate createstate() => _myhomepagestate();
}
class _myhomepagestate extends state<myhomepage> {
datetime startdate = datetime.now().subtract(duration(days: 2));
datetime enddate = datetime.now().add(duration(days: 2));
datetime selecteddate = datetime.now().subtract(duration(days: 2));
list<datetime> markeddates = [
datetime.now().subtract(duration(days: 1)),
datetime.now().subtract(duration(days: 2)),
datetime.now().add(duration(days: 4))
];
onselect(data) {
print("selected date -> $data");
}
_monthnamewidget(monthname) {
return container(
child: text(monthname,
style:
textstyle(fontsize: 17, fontweight: fontweight.w600, color: colors.black87, fontstyle: fontstyle.italic)),
padding: edgeinsets.only(top: 8, bottom: 4),
);
}
getmarkedindicatorwidget() {
return row(mainaxisalignment: mainaxisalignment.center, children: [
container(
margin: edgeinsets.only(left: 1, right: 1),
width: 7,
height: 7,
decoration: boxdecoration(shape: boxshape.circle, color: colors.red),
),
container(
width: 7,
height: 7,
decoration: boxdecoration(shape: boxshape.circle, color: colors.blue),
)
]);
}
datetilebuilder(date, selecteddate, rowindex, dayname, isdatemarked, isdateoutofrange) {
bool isselecteddate = date.compareto(selecteddate) == 0;
color fontcolor = isdateoutofrange ? colors.black26 : colors.black87;
textstyle normalstyle = textstyle(fontsize: 17, fontweight: fontweight.w800, color: fontcolor);
textstyle selectedstyle = textstyle(fontsize: 17, fontweight: fontweight.w800, color: colors.black87);
textstyle daynamestyle = textstyle(fontsize: 14.5, color: fontcolor);
list<widget> _children = [
text(dayname, style: daynamestyle),
text(date.day.tostring(), style: !isselecteddate ? normalstyle : selectedstyle),
];
if (isdatemarked == true) {
_children.add(getmarkedindicatorwidget());
}
return animatedcontainer(
duration: duration(milliseconds: 150),
alignment: alignment.center,
padding: edgeinsets.only(top: 8, left: 5, right: 5, bottom: 5),
decoration: boxdecoration(
color: !isselecteddate ? colors.transparent : colors.white70,
borderradius: borderradius.all(radius.circular(60)),
),
child: column(
children: _children,
),
);
}
@override
widget build(buildcontext context) {
return scaffold(
appbar: appbar(
title: text(widget.title),
),
body: container(
child: calendarstrip(
startdate: startdate,
enddate: enddate,
ondateselected: onselect,
datetilebuilder: datetilebuilder,
iconcolor: colors.black87,
monthnamewidget: _monthnamewidget,
markeddates: markeddates,
containerdecoration: boxdecoration(color: colors.black12),
)),
);
}
}
widget properties
initial data and ondateselected handler
| prop | description | type | default |
|---|---|---|---|
startdate |
date to be used for setting starting date in a date range. | datetime |
– |
enddate |
date to be used for setting ending date in a date range. | datetime |
– |
selecteddate |
date to be used for setting a date as pre-selected instead of current date. | datetime |
– |
markeddates |
list of datetimes to be marked in ui. it is also passed as parementer in datetilebuilder method, |
list<datetime> |
– |
iconcolor |
icon colors of both left and right chevron icons. | color |
colors.black87 |
containerheight |
the height of the calendar strip. | int |
90 |
containerdecoration |
box decoration object styling the container for more custom styling. | boxdecoration |
– |
monthnamewidget |
function that returns a custom widget for rendering the name of the current month. | function |
– |
datetilebuilder |
function that returns a custom widget for rendering the name of the current month | function |
– |
ondateselected |
function that is called on selection of a date. (required) | function |
required |
Comments are closed.