Flutter 定制时间简化组件 time

老铁记得转发，猫哥会呈现更多 Flutter 好文~~~~

微信群 ducafecat

b 站 https://space.bilibili.com/40...

原文

https://medium.com/flutterdev...

参考

https://pub.dev/packages/time...

正文

从一开始，Flutter 就是一次伟大的邂逅。建造迷人的用户界面从来没有这么快。不管你是一个业余爱好者还是一个有教养的开发者，要无可救药地迷恋上 Flutter 并不难。所有的软件开发人员都明白，日期是最棘手的事情。同样，时间表也不是特例。

在移动应用程序中，有很多情况下用户需要输入出生日期、预订机票、安排会议等等。

在这个文章，我们将探索定制的时间规划 Flutter。我们还将实现一个演示程序，并创建一个可定制的时间计划使用时间规划器包在您的 Flutter 应用程序。

https://pub.dev/packages/time...

Introduction

一个愉快的，简单的利用，定制的时间规划为 Flutter 移动，桌面和网络。这是一个按时间表向客户显示任务的小部件。每行显示一个小时，每列显示一天，但是您可以更改该部分的标题并显示您需要的任何其他内容。

这个演示视频显示了如何创建一个可定制的时间计划在 Flutter。它展示了如何定制的时间计划将工作，使用您的 Flutter 应用程序的时间计划包。它显示当用户点击任何行和列时，将创建一个随机的时间计划器。动画的。它会显示在你的设备上。

属性

时间计划器有以下几个属性:

startHour: 这属性是用来时间从这个开始，它将从 1 开始
endHour: 这属性用于此时间结束，最大值为 24
headers: 这属性用于创建天数，每天是一个 TimePlannerTitle。你应该至少创造一天
tasks: 这属性用于在时间计划器上列出小部件
style: 这属性用于时间计划程序的样式
currentTimeAnimation: 这属性用于小部件加载滚动到动画的当前时间。默认值为 true

Implementation

第一步: 添加依赖项

将依赖项添加到 pubspec ー yaml 文件。

time_planner: ^0.0.3

第二步: 导入

import 'package:time_planner/time_planner.dart';

第三步: 在应用程序的根目录中运行 flutter 软件包。

flutter packages get

代码

你需要分别在你的代码中实现它:

在 lib 文件夹中创建一个名为 main.dart 的新 dart 文件。

首先，我们创建一个名为变量任务的 TimePlannerTask 列表。

List tasks = [];

我们将创建一个 \_addobject ()方法。

void _addObject(BuildContext context) {
  List colors = [
    Colors.purple,
    Colors.blue,
    Colors.green,
    Colors.orange,
    Colors.cyan
  ];

  setState(() {
    tasks.add(
      TimePlannerTask(
        color: colors[Random().nextInt(colors.length)],
        dateTime: TimePlannerDateTime(
            day: Random().nextInt(10),
            hour: Random().nextInt(14) + 6,
            minutes: Random().nextInt(60)),
        minutesDuration: Random().nextInt(90) + 30,
        daysDuration: Random().nextInt(4) + 1,
        onTap: () {
          ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(content: Text('You click on time planner object')));
        },
        child: Text(
          'this is a demo',
          style: TextStyle(color: Colors.grey[350], fontSize: 12),
        ),
      ),
    );
  });

  ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text('Random task added to time planner!')));
}

在函数中，我们将添加 tasks.add ()方法。在内部，我们将添加 TimePlannerTask ()小部件。在这个小部件中，我们将添加颜色、日期时间、 minutesDuration 和 daysDuration。我们还将在用户点击时间计划器时显示 snackBar 消息。

在正文中，我们将添加 TimePlanner ()小部件。在内部，我们将添加 startHour、 endHour 和 header。在头文件中，我们将添加一些 TimePlannerTitle ()。此外，我们还将添加任务和样式。

TimePlanner(
  startHour: 2,
  endHour: 24,
  headers: [
    TimePlannerTitle(
      date: "7/20/2021",
      title: "tuesday",
    ),
    TimePlannerTitle(
      date: "7/21/2021",
      title: "wednesday",
    ),
    TimePlannerTitle(
      date: "7/22/2021",
      title: "thursday",
    ),
    TimePlannerTitle(
      date: "7/23/2021",
      title: "friday",
    ),
    TimePlannerTitle(
      date: "7/24/2021",
      title: "saturday",
    ),
    TimePlannerTitle(
      date: "7/25/2021",
      title: "sunday",
    ),
    TimePlannerTitle(
      date: "7/26/2021",
      title: "monday",
    ),
    TimePlannerTitle(
      date: "7/27/2021",
      title: "tuesday",
    ),
    TimePlannerTitle(
      date: "7/28/2021",
      title: "wednesday",
    ),
    TimePlannerTitle(
      date: "7/29/2021",
      title: "thursday",
    ),
    TimePlannerTitle(
      date: "7/30/2021",
      title: "friday",
    ),
    TimePlannerTitle(
      date: "7/31/2021",
      title: "Saturday",
    ),
  ],
  tasks: tasks,
  style: TimePlannerStyle(
      showScrollBar: true
  ),
),

现在，我们将创建一个漂浮的 actionbutton ()。

floatingActionButton: FloatingActionButton(
  onPressed: () => _addObject(context),
  tooltip: 'Add random task',
  child: Icon(Icons.add),
),

当我们运行应用程序时，我们应该得到屏幕的输出，就像下面的屏幕截图一样。

Code File

import 'dart:math';

import 'package:flutter/material.dart';
import 'package:flutter_customizable_time_plan/splash_screen.dart';
import 'package:time_planner/time_planner.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData.dark(),
      home: Splash()
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
  List tasks = [];

  void _addObject(BuildContext context) {
    List colors = [
      Colors.purple,
      Colors.blue,
      Colors.green,
      Colors.orange,
      Colors.cyan
    ];

    setState(() {
      tasks.add(
        TimePlannerTask(
          color: colors[Random().nextInt(colors.length)],
          dateTime: TimePlannerDateTime(
              day: Random().nextInt(10),
              hour: Random().nextInt(14) + 6,
              minutes: Random().nextInt(60)),
          minutesDuration: Random().nextInt(90) + 30,
          daysDuration: Random().nextInt(4) + 1,
          onTap: () {
            ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(content: Text('You click on time planner object')));
          },
          child: Text(
            'this is a demo',
            style: TextStyle(color: Colors.grey[350], fontSize: 12),
          ),
        ),
      );
    });

    ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('Random task added to time planner!')));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        automaticallyImplyLeading: false,
        title: Text(widget.title),
        centerTitle: true,
      ),
      body: Center(
        child: TimePlanner(
          startHour: 2,
          endHour: 24,
          headers: [
            TimePlannerTitle(
              date: "7/20/2021",
              title: "tuesday",
            ),
            TimePlannerTitle(
              date: "7/21/2021",
              title: "wednesday",
            ),
            TimePlannerTitle(
              date: "7/22/2021",
              title: "thursday",
            ),
            TimePlannerTitle(
              date: "7/23/2021",
              title: "friday",
            ),
            TimePlannerTitle(
              date: "7/24/2021",
              title: "saturday",
            ),
            TimePlannerTitle(
              date: "7/25/2021",
              title: "sunday",
            ),
            TimePlannerTitle(
              date: "7/26/2021",
              title: "monday",
            ),
            TimePlannerTitle(
              date: "7/27/2021",
              title: "tuesday",
            ),
            TimePlannerTitle(
              date: "7/28/2021",
              title: "wednesday",
            ),
            TimePlannerTitle(
              date: "7/29/2021",
              title: "thursday",
            ),
            TimePlannerTitle(
              date: "7/30/2021",
              title: "friday",
            ),
            TimePlannerTitle(
              date: "7/31/2021",
              title: "Saturday",
            ),
          ],
          tasks: tasks,
          style: TimePlannerStyle(
              showScrollBar: true
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => _addObject(context),
        tooltip: 'Add random task',
        child: Icon(Icons.add),
      ),
    );
  }
}

结语

在这篇文章中，我已经简单地解释了 Customizable Time Planner 的基本结构; 您可以根据自己的选择修改这段代码。这是一个小规模的介绍定制时间计划对用户交互从我这边，它的工作使用 Flutter。

https://ducafecat.tech/

https://github.com/ducafecat

往期

开源

微信讨论群 ducafecat

系列集合

译文

https://ducafecat.tech/catego...

开源项目

https://ducafecat.tech/catego...

Dart 编程语言基础

https://space.bilibili.com/40...

Flutter 零基础入门

https://space.bilibili.com/40...

Flutter 实战从零开始新闻客户端

https://space.bilibili.com/40...

Flutter 组件开发

https://space.bilibili.com/40...

Flutter Bloc

https://space.bilibili.com/40...

Flutter Getx4

https://space.bilibili.com/40...

Docker Yapi

https://space.bilibili.com/40...

Flutter 定制时间简化组件 time_planner

老铁记得转发，猫哥会呈现更多 Flutter 好文~~~~

微信群 ducafecat

b 站 https://space.bilibili.com/40...

原文

参考

正文

Introduction

属性

Implementation

代码

Code File

结语

往期

开源

GetX Quick Start

新闻客户端

strapi 手册译文

微信讨论群 ducafecat

系列集合

译文

开源项目

Dart 编程语言基础

Flutter 零基础入门

Flutter 实战从零开始新闻客户端

Flutter 组件开发

Flutter Bloc

Flutter Getx4

Docker Yapi

你可能感兴趣的:(flutter)

Flutter 定制时间简化组件 time_planner

老铁记得 转发 ，猫哥会呈现更多 Flutter 好文~~~~

微信群 ducafecat

b 站 https://space.bilibili.com/40...

原文

参考

正文

Introduction

属性

Implementation

代码

Code File

结语

往期

开源

GetX Quick Start

新闻客户端

strapi 手册译文

微信讨论群 ducafecat

系列集合

译文

开源项目

Dart 编程语言基础

Flutter 零基础入门

Flutter 实战从零开始 新闻客户端

Flutter 组件开发

Flutter Bloc

Flutter Getx4

Docker Yapi

你可能感兴趣的:(flutter)

老铁记得转发，猫哥会呈现更多 Flutter 好文~~~~

Flutter 实战从零开始新闻客户端