Calendário personalizado no Flutter
Nos aplicativos móveis, há muitos casos em que o usuário precisa inserir a data, como a data de nascimento, reservar uma passagem, agendar uma reunião etc.
Neste artigo, criaremos um calendário personalizado usando o pacote flutter_calendar_carousel. Esse widget de calendário pode ser trocado horizontalmente. Esse widget pode ajudá-lo a criar seu próprio widget de calendário altamente personalizável. Agora você pode até mesmo adicionar seu ícone para cada evento
Dart packagesConteudo
Introdução
O Flutter é o kit de ferramentas de interface do usuário do Google para criar aplicativos bonitos e compilados nativamente para dispositivos móveis, Web e desktop a partir de uma única base de código. Ele atende a todas as necessidades e requisitos personalizados.
Um calendário é um sistema para organizar datas, reuniões etc. Ele mantém um registro de todos os eventos que ocorrerão em datas específicas.
Configuração
Esta seção explica as etapas necessárias para usar o calendário e seus recursos básicos.
Adicionar dependência
Comece adicionando a dependência ao arquivo pubspec.yml
dependencies: flutter_calendar_carousel: ^2.4.2
pacote de importação no código
import 'package:flutter_calendar_carousel/flutter_calendar_carousel.dart';
Implementação do código
Crie variáveis para armazenar a data-hora atual, a data-alvo e o mês atual e também faça uma referência ao CalendarCarousel.
final DateTime _currentDate = DateTime.now(); DateTime _currentDate2 = DateTime.now(); String _currentMonth = DateFormat.yMMM().format(DateTime.now()); DateTime _targetDateTime = DateTime.now(); late CalendarCarousel _calendarCarouselNoHeader;
Agora, inicializando o objeto de _calendarCarouselNoHeader
_calendarCarouselNoHeader = CalendarCarousel<Event>(
todayBorderColor: Colors.green,
onDayPressed: (DateTime date, List<Event> events) {
setState(() => _currentDate2 = date);
for (var event in events) {
if (kDebugMode) {
print(event.title);
}
}
},
daysHaveCircularBorder: true,
showOnlyCurrentMonthDate: false,
weekendTextStyle: const TextStyle(
color: Colors.red,
),
thisMonthDayBorderColor: Colors.grey,
weekFormat: false,
// firstDayOfWeek: 4,
markedDatesMap: _markedDateMap,
height: 420.0,
selectedDateTime: _currentDate2,
targetDateTime: _targetDateTime,
customGridViewPhysics: const NeverScrollableScrollPhysics(),
markedDateCustomShapeBorder:
const CircleBorder(side: BorderSide(color: Colors.yellow)),
markedDateCustomTextStyle: const TextStyle(
fontSize: 18,
color: Colors.blue,
),
showHeader: false,
todayTextStyle: const TextStyle(
color: Colors.blue,
),
todayButtonColor: Colors.yellow,
selectedDayTextStyle: const TextStyle(
color: Colors.yellow,
),
minSelectedDate: _currentDate.subtract(const Duration(days: 360)),
maxSelectedDate: _currentDate.add(const Duration(days: 360)),
prevDaysTextStyle: const TextStyle(
fontSize: 16,
color: Colors.pinkAccent,
),
inactiveDaysTextStyle: const TextStyle(
color: Colors.tealAccent,
fontSize: 16,
),
onCalendarChanged: (DateTime date) {
setState(() {
_targetDateTime = date;
_currentMonth = DateFormat.yMMM().format(_targetDateTime);
});
},
onDayLongPressed: (DateTime date) {
if (kDebugMode) {
print('long pressed date $date');
}
},
);Agora, adicione o botão seguinte e anterior e, ao clicar no botão, altere o mês da data do calendário.
TextButton(
child: const Text('PREV'),
onPressed: () {
setState(() {
_targetDateTime = DateTime(
_targetDateTime.year, _targetDateTime.month - 1);
_currentMonth = DateFormat.yMMM().format(_targetDateTime);
});
},
),
TextButton(
child: const Text('NEXT'),
onPressed: () {
setState(() {
_targetDateTime = DateTime(
_targetDateTime.year, _targetDateTime.month + 1);
_currentMonth = DateFormat.yMMM().format(_targetDateTime);
});
},
)Neste snippet, estamos usando um calendário de carrossel e também podemos personalizar nosso calendário.
Arquivo de código
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_calendar_carousel/classes/event.dart';
import 'package:flutter_calendar_carousel/flutter_calendar_carousel.dart';
import 'package:intl/intl.dart';
class Home extends StatefulWidget {
const Home({super.key});
@override
HomeState createState() => HomeState();
}
class HomeState extends State<Home> {
final DateTime _currentDate = DateTime.now();
DateTime _currentDate2 = DateTime.now();
String _currentMonth = DateFormat.yMMM().format(DateTime.now());
DateTime _targetDateTime = DateTime.now();
late CalendarCarousel _calendarCarouselNoHeader;
static final Widget _eventIcon = Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: const BorderRadius.all(Radius.circular(1000)),
border: Border.all(color: Colors.blue, width: 2.0)),
child: const Icon(
Icons.person,
color: Colors.amber,
),
);
final EventList<Event> _markedDateMap = EventList<Event>(
events: {
DateTime(2020, 2, 10): [
Event(
date: DateTime(2020, 2, 14),
title: 'Event 1',
icon: _eventIcon,
dot: Container(
margin: const EdgeInsets.symmetric(horizontal: 1.0),
color: Colors.red,
height: 5.0,
width: 5.0,
),
),
Event(
date: DateTime(2020, 2, 10),
title: 'Event 2',
icon: _eventIcon,
),
Event(
date: DateTime(2020, 2, 15),
title: 'Event 3',
icon: _eventIcon,
),
],
},
);
@override
void initState() {
_markedDateMap.add(
DateTime(2020, 2, 25),
Event(
date: DateTime(2020, 2, 25),
title: 'Event 5',
icon: _eventIcon,
));
_markedDateMap.add(
DateTime(2020, 2, 10),
Event(
date: DateTime(2020, 2, 10),
title: 'Event 4',
icon: _eventIcon,
));
_markedDateMap.addAll(DateTime(2019, 2, 11), [
Event(
date: DateTime(2019, 2, 11),
title: 'Event 1',
icon: _eventIcon,
),
Event(
date: DateTime(2019, 2, 11),
title: 'Event 2',
icon: _eventIcon,
),
Event(
date: DateTime(2019, 2, 11),
title: 'Event 3',
icon: _eventIcon,
),
]);
super.initState();
}
@override
Widget build(BuildContext context) {
_calendarCarouselNoHeader = CalendarCarousel<Event>(
todayBorderColor: Colors.green,
onDayPressed: (DateTime date, List<Event> events) {
setState(() => _currentDate2 = date);
for (var event in events) {
if (kDebugMode) {
print(event.title);
}
}
},
daysHaveCircularBorder: true,
showOnlyCurrentMonthDate: false,
weekendTextStyle: const TextStyle(
color: Colors.red,
),
thisMonthDayBorderColor: Colors.grey,
weekFormat: false,
// firstDayOfWeek: 4,
markedDatesMap: _markedDateMap,
height: 420.0,
selectedDateTime: _currentDate2,
targetDateTime: _targetDateTime,
customGridViewPhysics: const NeverScrollableScrollPhysics(),
markedDateCustomShapeBorder:
const CircleBorder(side: BorderSide(color: Colors.yellow)),
markedDateCustomTextStyle: const TextStyle(
fontSize: 18,
color: Colors.blue,
),
showHeader: false,
todayTextStyle: const TextStyle(
color: Colors.blue,
),
todayButtonColor: Colors.yellow,
selectedDayTextStyle: const TextStyle(
color: Colors.yellow,
),
minSelectedDate: _currentDate.subtract(const Duration(days: 360)),
maxSelectedDate: _currentDate.add(const Duration(days: 360)),
prevDaysTextStyle: const TextStyle(
fontSize: 16,
color: Colors.pinkAccent,
),
inactiveDaysTextStyle: const TextStyle(
color: Colors.tealAccent,
fontSize: 16,
),
onCalendarChanged: (DateTime date) {
setState(() {
_targetDateTime = date;
_currentMonth = DateFormat.yMMM().format(_targetDateTime);
});
},
onDayLongPressed: (DateTime date) {
if (kDebugMode) {
print('long pressed date $date');
}
},
);
return Scaffold(
appBar: AppBar(
title: const Text('Calendar'),
),
body: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
//custom icon
Container(
margin: const EdgeInsets.only(
top: 30.0,
bottom: 16.0,
left: 16.0,
right: 16.0,
),
child: Row(
children: <Widget>[
Expanded(
child: Text(
_currentMonth,
style: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 24.0,
),
)),
TextButton(
child: const Text('PREV'),
onPressed: () {
setState(() {
_targetDateTime = DateTime(
_targetDateTime.year, _targetDateTime.month - 1);
_currentMonth =
DateFormat.yMMM().format(_targetDateTime);
});
},
),
TextButton(
child: const Text('NEXT'),
onPressed: () {
setState(() {
_targetDateTime = DateTime(
_targetDateTime.year, _targetDateTime.month + 1);
_currentMonth =
DateFormat.yMMM().format(_targetDateTime);
});
},
)
],
),
),
Container(
margin: const EdgeInsets.symmetric(horizontal: 16.0),
child: _calendarCarouselNoHeader,
), //
],
),
),
);
}
}
Saída
Segue o link do GitHub com este exemplo e outros (Git)
Conclusão
Neste artigo, expliquei a demonstração do pacote de calendário personalizado que você pode modificar e experimentar de acordo com suas necessidades. Essa pequena introdução foi sobre como criar um calendário personalizado.
Espero que este blog lhe forneça informações suficientes para tentar usar o calendário personalizado em seus projetos do Flutter. Mostraremos esse programa de demonstração para trabalhar com calendários personalizados em seus aplicativos flutter. Então, por favor, experimente.
