Flutter – Calendario de implementación

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *