乐趣区

关于flutter:Flutter-定制时间简化组件-timeplanner

jiezi

老铁记得 转发，猫哥会出现更多 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<TimePlannerTask> tasks = [];

咱们将创立一个 \_addobject () 办法。

void _addObject(BuildContext context) {
  List<Color?> 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<MyHomePage> {List<TimePlannerTask> tasks = [];

  void _addObject(BuildContext context) {
    List<Color?> 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

往期

开源

GetX Quick Start

https://github.com/ducafecat/…

新闻客户端

https://github.com/ducafecat/…

strapi 手册译文

https://getstrapi.cn

微信探讨群 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…

退出移动版