Recently, I wanted to build a bookkeeping APP with Flutter. However, when I started to build flutter, I found that there was a requirement to select the month. However, several packages did not support this APP, so I implemented one myself.

Flutter_my_picker:

  • CupertinoPicker iOS style picker
  • ShowModalBottomSheet The control that pops up from the bottom
  • DateTime Dart date type
  • Intl Dart extension library, used here as a formatting date

Here’s a final look:

1. CupertinoPicker.builder

An iOS style selector.

In Flutter, scrollable controls usually have a Builder method that renders elements in real time based on indexes and callbacks as they scroll, rather than directly rendering all elements, to avoid unnecessary rendering.

IndexedWidgetBuilder itemBuilder

Build callbacks for each item.

The callback argument is BuildContext context, int index, and the Widget needs to be returned. If null is returned, the Widget will not be rendered.

double itemExtent

Height of each line, this parameter must be passed.

FixedExtentScrollController scrollController

The scroll controller can use this property to restore the scroll to its normal position when it reaches an unexpected area, such as beyond the end time.

ValueChanged onSelectedItemChanged

A callback to a change in the selection, such as scrolling from 2020 to 2025, will be triggered every year that passes.

Color backgroundColor

Background color, I think we all know, I won’t introduce.

Bool useMagnifier and double Magnification

Magnification takes effect only when useMagnifier is true.

You are advised to set the zoom factor of the selected item to 1.2.

double offAxisFraction

The offset of the selected item is recommended to be 0.2.

double squeeze

Extrusion coefficient: 1.45 is recommended.

showModalBottomSheet

Display a bottom sheet with a Material design style.

Rounded corner effect requires two attributes to work together

shape: RoundedRectangleBorder(borderRadius: BorderRadius.only(topLeft: const Radius.circular(12), topRight: const Radius.circular(12),)),

clipBehavior: Clip.antiAlias,
Copy the code

Remove the maximum height limit

The default maximum height of sheet is 9.0/16.0. If you want the full screen effect, you need to set isScrollControlled to True

Several options of Clip

[Clip] options:
  // * [hardEdge], the fastest cutting, but low fidelity
  // * [antiAlias], slower than [hardEdge], but smoother edge
  // * [antiAlias withSavelayer], slower than [antiAlias], should be used rarely.
Copy the code

DateTime

Dart’s DateTime itself provides a number of powerful apis that can be combined to make it easier to use.

The current date

new DateTime.now()
Copy the code

Parses the date string passed in

static DateTime parse([date]) {
    return date == null
        ? MyDate.getNow()
        : date.runtimeType == DateTime ? date : DateTime.tryParse(date);
  }
Copy the code

Gets the number of days of a month

static int daysInMonth(DateTime date) {
    return DateTime(date.year, date.month + 1.0).day;
}
Copy the code

Is it the same day

static bool isAtSameDay(DateTime day1, DateTime day2) {
    returnday1 ! =null&& day2 ! =null &&
        day1.difference(day2).inDays == 0 &&
        day1.day == day2.day;
  }
Copy the code

Determine if the date is within the range

static bool isInRange(DateTime date, DateTime start, DateTime end) {
    if (start == null && end == null) return true;
    if (start == null&& end ! =null)
      return date.isBefore(end) || date.isAtSameMomentAs(end);
    if (end == null&& start ! =null)
      return date.isAfter(start) || date.isAtSameMomentAs(start);

    return (date.isAfter(start) && date.isBefore(end)) ||
        date.isAtSameMomentAs(start) ||
        date.isAtSameMomentAs(end);
  }
Copy the code

intl

Used to convert DateTime to a string.

/// newPattern date formatting string, such as' YYYY-MM-dd '
/// Date DateTime or string 2020-03-17 etc
static String format(String newPattern, [dynamic date]) {
    return new DateFormat(newPattern).format(MyDate.parse(date));
}
Copy the code

flutter_my_picker

Date and time selectors for FLUTTER, The value can be year (showYearPicker), month (showMonthPicker), date (showDatePicker), time (showTimePicker), and date/time (showDateTimePicker).

Supported Platforms

  • Android
  • IOS

Method of use

Depend on the installation

  • Has been published to pub and can be downloaded directly using the version number
dependencies: ... Flutter_my_picker: ^ 1.0.3Copy the code

If you want to publish your own package and get an error when publishing it, you can see the publishing tutorial here

Use case

Import flutter_my_picker. Dart;

import 'package:flutter_my_picker/flutter_my_picker.dart';

// Date manipulation, introduced as needed
import 'package:flutter_my_picker/common/date.dart';
Copy the code

Year selector

_change(formatString) {
  return (_date) {
    setState(() {
      date = _date;
      dateStr = MyDate.format(formatString, _date);
    });
  };
}

MyPicker.showPicker(
  context: context,
  current: date,
  mode: MyPickerMode.year,
  onChange: _change('yyyy'));// mypicker. showYearPicker has the same effect
Copy the code

Month selector

MyPicker.showPicker(
  context: context,
  current: date,
  mode: MyPickerMode.month,
  onChange: _change('yyyy-MM'));// mypicker. showMonthPicker The effect is the same. The mode parameter is not required
Copy the code

Date picker

MyPicker.showPicker(
  context: context,
  current: date,
  mode: MyPickerMode.date,
  onChange: _change('yyyy-MM-dd'));// mypicker. showDatePicker has the same effect. The mode parameter is not required
Copy the code

Time selector

MyPicker.showPicker(
  context: context,
  current: date,
  mode: MyPickerMode.time,
  onChange: _change('HH:mm'));// mypicker. showTimePicker has the same effect. No mode parameter is required
Copy the code

Date and time picker

MyPicker.showPicker(
  context: context,
  current: date,
  mode: MyPickerMode.dateTime,
  onChange: _change('yyyy-MM-dd HH:mm'));/ / MyPicker showDateTimePicker effect to the above parameters, don't need mode parameters
Copy the code

Call the mypicker. showPicker method to call the relevant selector

API

ShowPicker: mypicker. showPicker

// Required to call showModalBottomSheet
BuildContext context;

// The selected time can be either a string or a DateTime type. If mode is time, the string '20:12' can be passed directly
final dynamic current;
/// Start time. If mode is time, '20:12' can be directly passed
final dynamic start;
/// End time. If mode is time, the value of '20:12' can be directly passed
final dynamic end;

// Select the callback after the end of time. Closing the popover will not trigger when scrolling is not finished
//typedef DateChangedCallback(DateTime time)
final DateChangedCallback onChange;

// The callback after clicking ok
//typedef DateChangedCallback(DateTime time)
final DateChangedCallback onConfirm;

// Click the cancel button after the callback
//typedef CancelCallback()
final CancelCallback onCancel;

// Selector mode
/** enum MyPickerMode { year, month, date, time, dateTime, } */
final MyPickerMode mode;

// The height of a single line of the selector, default 36
final double itemHeight;

/// Squeeze coefficient, 1 by default, 1.45 recommended
final double squeeze;

/// The selected content magnification factor is 1 by default. 1.2 is recommended
final double magnification;

/// The selected content is offset, 0 by default, 0.2 is recommended
final double offAxisFraction; 
Copy the code

If you like, please give a star ^_^