Flutter – 实现日历

如今在大多数应用程序中，我们在大多数应用程序中看到日历，用于显示出生日期或任何约会应用程序。借助日历视图在应用程序中显示日期可提供更好的用户体验。在本文中，我们将了解如何在Flutter应用程序中实现日历。

按照步骤在我们的Flutter App 中实现日历

第 1 步：在 pubspec.yaml 文件中添加以下依赖项

在 pubspec.yaml 文件中添加给定的依赖项。

Dart

dependencies:
  
  table_calendar: ^2.3.3

现在点击pub.get进行配置。

第 2 步：导航到 main。 dart() 文件并返回 Material App()

首先，我们在 main函数的runApp中声明了MyApp() 。然后我们为MyApp创建了StatelessWidget ，其中我们返回了MaterialApp()。在这个MaterialApp() 中，我们给出了我们的应用程序的标题，然后将我们的应用程序的主题声明为primarySwatch为绿色。然后我们在家里提供了我们的第一个屏幕或滑块应用程序： Calendar()

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(),
    );
  }
}

第 3 步：为 Calendar() 类声明 StatefulWidget()

在那个状态类中，我们给出了_calendarController 。之后，我们已经声明了Scaffold() ，我们在其中声明了appbar。其中包含应用程序的标题。在 body 部分，我们已经声明了TableCalendar()包裹在中心小部件中。 这个导入的库将在我们的应用程序中为我们提供特定年份的日历。该库还将在我们的应用程序中显示年份和月份。在那个TableCalendar() 中，我们已经声明了控制器，我们在其中返回了我们在 State 类中声明的_calendarController 。

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 {
   
  // 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,
        ),
      ),
    );
  }
}

完整的源代码：

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(),
    );
  }
}

第一屏代码：

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 {
 
  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,
        ),
      ),
    );
  }
}

输出：

想要一个更快节奏和更具竞争力的环境来学习 Android 的基础知识吗?

单击此处前往由我们的专家精心策划的指南，旨在让您立即做好行业准备！