Flutter customized time simplified component time_Planner

Remember to forward, cat brother will present more good Flutter articles ~~~~

B stationspace.bilibili.com/404904528

The original

Medium.com/flutterdevs…

reference

Pub. Dev/packages/ti…

The body of the

From the beginning, Flutter was a great encounter. Building engaging user interfaces has never been faster. Whether you’re an amateur or an educated developer, it’s not hard to get hopelessly hooked on Flutter. As any software developer knows, dates are the trickiest thing. Again, the timetable is not an exception.

In mobile applications, there are many cases where a user needs to enter a date of birth, book a flight, schedule a meeting, and so on.

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

Pub. Dev/packages/ti…

Introduction

A delightful, simple use of customized time planning for Flutter mobile, desktop and web. This is a widget that shows tasks to customers on a schedule. Each row is displayed for an hour and each column for a day, but you can change the section’s title and display anything else you want.

This demo video shows how to create a customizable time schedule in Flutter. It shows how a customized schedule will work using the Schedule package of your Flutter application. It shows that when the user clicks on any row or column, a random time planner is created. The animation. It will show up on your device.

attribute

The time planner has the following properties:

StartHour: This property is used to start the time from this, it will start at 1
EndHour: This attribute is used for the end of the time. The maximum value is 24
Headers: This property is used for the number of days that were created. Each day is a TimePlannerTitle. You should create at least one day
Tasks: This property is used to list the widgets on the time planner
Style: This property is used for the style of the scheduler
CurrentTimeAnimation: This property is used for the widget to load scroll to the current time of the animation. The default value is true

Implementation

Step 1: Add dependencies

Add the dependency to the pubSpec ー YAML file.

time_planner: ^ 0.0.3
Copy the code

Step 2: Import

import 'package:time_planner/time_planner.dart';
Copy the code

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

flutter packages get
Copy the code

code

You need to implement it separately in your code:

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

First, we create a list of TimePlannerTasks called variable tasks.

List<TimePlannerTask> tasks = [];
Copy the code

We’re going to create an _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! ')));
}
Copy the code

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

In the body, we’ll add the TimePlanner () widget. Internally, we’ll add startHour, endHour, and header. In the header file, we’ll 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),),Copy the code

Now we will create a floating ActionButton ().

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

When we run the application, we should get the output of the screen, as shown in 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), ), ); }}Copy the code

conclusion

In this article, I’ve briefly explained the basic structure of the Customizable Time Planner; You can modify this code as you choose. This is a small introduction to customizing time schedules for user interaction from my side, and it works using Flutter.

The elder brother of the © cat

ducafecat.tech/

github.com/ducafecat

The issue of

Open source

GetX Quick Start

Github.com/ducafecat/g…

News client

Github.com/ducafecat/f…

Translation of strAPI manual

getstrapi.cn

Wechat discussion group Ducafecat

A series of collections

The translation

Ducafecat. Tech/categories /…