I am making a calendar widget like this
But I am stuck in few parts which I cannot figure out:
I have made thus far:
The code i've written is:
import 'package:epicare/NavigBar.dart';
import 'package:flutter/material.dart';
import 'package:table_calendar/table_calendar.dart';
class HistoryScreen extends StatefulWidget {
@override
_HistoryScreenState createState() => _HistoryScreenState();
}
class _HistoryScreenState extends State<HistoryScreen> {
bool isSwitched = true;
CalendarController _controller;
@override
void initState() {
setState(() {
_controller = CalendarController();
});
}
@override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
backgroundColor: const Color(0xffE5E0A1),
elevation: 0,
centerTitle: true,
title: Text(
"My Seizure History",
style: TextStyle(
fontSize: 15.0,
color: Colors.black,
fontFamily: 'Montserrat',
fontWeight: FontWeight.normal,
),
),
leading: IconButton(
icon: Icon(
Icons.arrow_back,
color: Colors.black,
),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) {
return Homepage();
},
),
);
},
),
),
body: SingleChildScrollView(
child: Column(
children: <Widget>[
Center(
child: Container(
margin: EdgeInsets.symmetric(vertical: 30),
//height: size.width * 0.80,
width: size.width * 0.80,
padding: EdgeInsets.all(11.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
color: const Color(0xffffffff),
boxShadow: [
BoxShadow(
color: const Color(0x12000000),
offset: Offset(0, 7),
blurRadius: 24,
),
],
),
child: TableCalendar(
initialCalendarFormat: CalendarFormat.month,
calendarStyle: CalendarStyle(
weekdayStyle: TextStyle(
fontFamily: 'Montserrat',
fontWeight: FontWeight.w600,
fontSize: 12,
color: const Color(0xff000000),
height: 1.3333333333333333,
),
weekendStyle: TextStyle(
fontFamily: 'Montserrat',
fontWeight: FontWeight.w600,
fontSize: 12,
color: const Color(0xffD4D411),
height: 1.3333333333333333,
),
renderDaysOfWeek: true,
markersMaxAmount: 20,
outsideStyle: TextStyle(
fontFamily: 'Montserrat',
fontWeight: FontWeight.w600,
fontSize: 12,
color: const Color(0xfff0efcd),
height: 1.3333333333333333,
),
todayStyle: TextStyle(
fontFamily: 'Montserrat',
fontWeight: FontWeight.w600,
fontSize: 12,
color: const Color(0xff000000),
),
outsideWeekendStyle: TextStyle(
fontFamily: 'Montserrat',
fontWeight: FontWeight.w600,
fontSize: 12,
color: const Color(0xfff0efcd),
height: 1.3333333333333333,
),
),
daysOfWeekStyle: DaysOfWeekStyle(
weekdayStyle: TextStyle(
fontFamily: 'Montserrat',
fontWeight: FontWeight.w600,
fontSize: 12,
color: const Color(0xffe6e4ae),
height: 1.3333333333333333,
),
weekendStyle: TextStyle(
fontFamily: 'Montserrat',
fontWeight: FontWeight.w600,
fontSize: 12,
color: const Color(0xffe6e4ae),
height: 1.3333333333333333,
),
),
headerStyle: HeaderStyle(
titleTextStyle: TextStyle(
fontFamily: 'Montserrat',
fontWeight: FontWeight.w500,
fontSize: 15,
color: const Color(0xff000000),
height: 1.3333333333333333,
),
leftChevronIcon: Icon(
Icons.keyboard_arrow_left,
size: 20,
color: Colors.black,
),
formatButtonTextStyle: TextStyle(
color: Colors.blue
),
rightChevronIcon: Icon(
Icons.keyboard_arrow_right,
size: 20,
color: Colors.black,
),
formatButtonVisible: false,
centerHeaderTitle: true,
),
builders: CalendarBuilders(
selectedDayBuilder: (context, date, events) => Container(
margin: const EdgeInsets.all(10.0),
alignment: Alignment.center,
decoration: BoxDecoration(
color: const Color(0xffE5E3AD),
borderRadius: BorderRadius.circular(30.0),
),
child: Text(
date.day.toString(),
style: TextStyle(
fontFamily: 'Montserrat',
fontWeight: FontWeight.w600,
fontSize: 12,
color: const Color(0xff000000),
),
),
),
todayDayBuilder: (context, date, events) => Container(
margin: const EdgeInsets.all(10.0),
alignment: Alignment.center,
decoration: BoxDecoration(
gradient: RadialGradient(
center: Alignment(-0.54, -1.0),
radius: 1.137,
colors: [
const Color(0xffebef76),
const Color(0xffd2d580),
const Color(0xffd6d098)
],
stops: [0.0, 0.485, 1.0],
),
borderRadius: BorderRadius.circular(30.0)),
child: Text(
date.day.toString(),
style: TextStyle(
fontFamily: 'Montserrat',
fontWeight: FontWeight.w600,
fontSize: 12,
color: const Color(0xff000000),
height: 1.3333333333333333,
),
),
),
),
calendarController: _controller,
),
),
)
],
),
),
);
}
}
Please help me out with the tasks, because I'm stuck in these parts. P.S I am a beginner in Flutter. A little help would be appreciated!
User contributions licensed under CC BY-SA 3.0