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
Conteudo
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.