Hoy en día, en la mayoría de las aplicaciones, vemos Calendario en la mayoría de las aplicaciones para mostrar las fechas de nacimiento o para cualquier aplicación de citas. Mostrar la fecha en la aplicación con la ayuda de la vista Calendario brinda una mejor experiencia de usuario. En este artículo, vamos a ver cómo implementar Calendar en nuestra aplicación Flutter.
Sigue los pasos para implementar Calendario en nuestra App Flutter
Paso 1: agregue la siguiente dependencia en su archivo pubspec.yaml
Agregue la dependencia dada en el archivo pubspec.yaml.
Dart
dependencies: table_calendar: ^2.3.3
Ahora haga clic en pub.get para configurar.
Paso 2: navegue hasta el archivo main.dart() y devuelva Material App()
Primero, hemos declarado MyApp() en runApp en la función principal. Luego hemos creado StatelessWidget para MyApp en el que hemos devuelto MaterialApp(). En este MaterialApp() le hemos dado el título de nuestra aplicación y luego declaramos el tema de nuestra aplicación como primarioSwatch como verde. Luego le hemos dado nuestra primera pantalla o aplicación deslizante en el hogar: Calendario()
Dart
void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { // Material App return MaterialApp( title: 'To Do List', debugShowCheckedModeBanner: false, theme: ThemeData( // Theme color primarySwatch: Colors.green, ), /* home: ChangeNotifierProvider( create: (context)=> TodoModel(), child: HomeScreen(), ), ); */ // Our First Screen home: Calendar(), ); } }
Paso 3: declarar StatefulWidget() para la clase Calendar()
En esa clase de estado, hemos dado _calendarController . Después de eso, hemos declarado Scaffold() en el que hemos declarado appbar. Que consiste en el título de la aplicación. En la sección del cuerpo, hemos declarado TableCalendar() envuelto con el widget central. Esta biblioteca importada nos dará el calendario del año específico en nuestra aplicación. Esta biblioteca también mostrará el año y el mes en nuestra aplicación. En ese TableCalendar() hemos declarado el controlador en el que hemos devuelto _calendarController que hemos declarado en la clase State.
Dart
import 'package:flutter/material.dart'; import 'package:table_calendar/table_calendar.dart'; // StatefulWidget class Calendar extends StatefulWidget { @override _CalendarState createState() => _CalendarState(); } class _CalendarState extends State<Calendar> { // created controller CalendarController _calendarController = new CalendarController(); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( // Title of app title: Text("Geeks for Geeks"), ), body: Center( // Declared TableController child: TableCalendar( calendarController: _calendarController, ), ), ); } }
Código fuente completo:
Dart
import 'package:flutter/material.dart'; import 'package:todolistapp/CalendarApp.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: 'To Do List', debugShowCheckedModeBanner: false, theme: ThemeData( primarySwatch: Colors.green, visualDensity: VisualDensity.adaptivePlatformDensity, ), // First screen of app home: Calendar(), ); } }
Código de Primera Pantalla:
Dart
import 'package:flutter/material.dart'; import 'package:table_calendar/table_calendar.dart'; // stateful widget created for calendar class class Calendar extends StatefulWidget { @override _CalendarState createState() => _CalendarState(); } class _CalendarState extends State<Calendar> { CalendarController _calendarController = new CalendarController(); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( // title of app title: Text("Geeks for Geeks"), ), body: Center( // create calendar child: TableCalendar( calendarController: _calendarController, ), ), ); } }
Producción:
Publicación traducida automáticamente
Artículo escrito por chinmaymunje96 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA