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

老铁记得转发，猫哥会出现更多 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...