Flutter custom time simplified component time_planner

Old iron remember to forward, Brother Mao will present more Flutter good articles~~~~

WeChat group ducafecat

b Station https://space.bilibili.com/404904528

original

https://medium.com/flutterdevs/explore-customizable-time-planner-in-flutter-c8108218b52c

refer to

https://pub.dev/packages/time_planner

text

From the beginning, Flutter was a great encounter. Building attractive user interfaces has never been so fast. Whether you are a hobbyist or an educated developer, it is not difficult to be hopelessly obsessed with Flutter. All software developers understand that dates are the trickiest thing. Similarly, timetables are not exceptional.

In mobile applications, there are many situations where users need to enter their date of birth, book air tickets, schedule meetings, and so on.

In this article, we will explore customized time planning for Flutter. We will also implement a demo program and create a customizable time plan using the time planner package in your Flutter application.

https://pub.dev/packages/time_planner

Introduction

A pleasant, simple to use, customized time plan for Flutter mobile, desktop and web. This is a widget that displays tasks to customers on a schedule. Each row displays an hour and each column displays a day, but you can change the title of the section and display anything else you need.

This demo video shows how to create a customizable time plan in Flutter. It shows how a customized time plan will work, using the time plan package of your Flutter app. It shows that when the user clicks on any row and column, a random time planner will be created. Animated. It will be displayed on your device.

Attributes

The time planner has the following properties:

startHour: This attribute is used to start the time from this, it will start from 1
endHour: This attribute is used to end this time, the maximum value is 24
headers: This attribute is used to create the number of days, each day is a TimePlannerTitle. You should create at least one day
tasks: This attribute is used to list widgets on the time planner
style: This attribute is used for the style of the time planner
currentTimeAnimation: This attribute is used to load the widget to the current time of the animation. The default value is true

Implementation

Step 1: add dependencies

Add dependencies to the pubspec ーyaml file.

time_planner: ^0.0.3

Step 2: Import

import 'package:time_planner/time_planner.dart';

Step 3: Run the flutter package in the root directory of the application.

flutter packages get

Code

You need to implement it in your code separately:

Create a new dart file named main.dart in the lib folder.

First, we create a TimePlannerTask list called Variable Tasks.

List<TimePlannerTask> tasks = [];

We will create a \_addobject () method.

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!')));
}

In the function, we will add the tasks.add () method. Internally, we will add the TimePlannerTask () widget. In this widget, we will add colors, datetime, minutesDuration and daysDuration. We will also display a snackBar message when the user clicks on the time planner.

In the main text, we will add the TimePlanner () widget. Internally, we will add startHour, endHour and header. In the header file, we will add some TimePlannerTitle (). In addition, we will add tasks and styles.

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
  ),
),

Now, we will create a floating actionbutton ().

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

When we run the application, we should get the output of the screen, just like the screenshot below.

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

Concluding remarks

In this article, I have briefly explained the basic structure of Customizable Time Planner; you can modify this code according to your choice. This is a small-scale introduction to custom time planning for user interaction. From my side, it works using Flutter.

https://ducafecat.tech/

https://github.com/ducafecat