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为绿色。然后我们在家里给出了我们的第一个屏幕或滑块应用程序： Calender()

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

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

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

Dart

import 'package:flutter/material.dart';
import 'package:table_calendar/table_calendar.dart';
  
// StatefulWidget
class Calender extends StatefulWidget {
  @override
  _CalenderState createState() => _CalenderState();
}
  
class _CalenderState 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/CalenderApp.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: Calender(),
    );
  }
}

第一屏代码：

Dart

import 'package:flutter/material.dart';
import 'package:table_calendar/table_calendar.dart';
  
// stateful widget created for calender class
class Calender extends StatefulWidget {
  @override
  _CalenderState createState() => _CalenderState();
}
  
class _CalenderState 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 calender
        child: TableCalendar(
            calendarController: _calendarController,
        ),
      ),
    );
  }
}

输出：

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

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