Flutter 定製時間簡化元件 time_planner

會煮咖啡的貓發表於2021-08-06

Flutter元件

老鐵記得轉發，貓哥會呈現更多 Flutter 好文~~~~

b 站 space.bilibili.com/404904528

原文

medium.com/flutterdevs…

參考

pub.dev/packages/ti…

正文

從一開始，Flutter 就是一次偉大的邂逅。建造迷人的使用者介面從來沒有這麼快。不管你是一個業餘愛好者還是一個有教養的開發者，要無可救藥地迷戀上 Flutter 並不難。所有的軟體開發人員都明白，日期是最棘手的事情。同樣，時間表也不是特例。

在移動應用程式中，有很多情況下使用者需要輸入出生日期、預訂機票、安排會議等等。

在這個文章，我們將探索定製的時間規劃 Flutter。我們還將實現一個演示程式，並建立一個可定製的時間計劃使用時間規劃器包在您的 Flutter 應用程式。

pub.dev/packages/ti…

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),
      ),
    );
  }
}
複製程式碼