title: Flutter Flutter Datetime Picker package to generate AM/PM?
body: <p>has anyone used Flutter Datetime Picker (<a href="https://pub.dev/packages/flutter_datetime_picker#-readme-tab-" rel="nofollow noreferrer">enter link description here</a>) to successfully make a TimePicker with Hours : Minutes AM/PM, in 12 hour format? For the life of me I can't get it to work using the CustomPickerModel. I just get a bunch of PM's in the seconds view, and when you move them the printed results is seconds.</p>
  
  <blockquote>
    <p>dependencies:   flutter_datetime_picker: ^1.2.5</p>
  </blockquote>
  
  <pre><code>class CustomPicker extends CommonPickerModel {
    String digits(int value, int length) {
      return '$value'.padLeft(length, "0");
    }
  
    CustomPicker({DateTime currentTime, LocaleType locale})
        : super(locale: locale) {
      _fillRightLists();
      this.currentTime = currentTime ?? DateTime.now();
      this.setLeftIndex(this.currentTime.hour);
      this.setMiddleIndex(this.currentTime.minute);
      this.setRightIndex(0);
    }
  
    void _fillRightLists() {
      this.rightList = List.generate(2, (int index) {
        if (index == 0) {
          return 'AM';
        } else {
          return 'PM';
        }
      });
    }
  
    @override
    String leftStringAtIndex(int index) {
      if (index &gt;= 0 &amp;&amp; index &lt; 24) {
        return this.digits(index, 2);
      } else {
        return null;
      }
    }
  
    @override
    String middleStringAtIndex(int index) {
      if (index &gt;= 0 &amp;&amp; index &lt; 60) {
        return this.digits(index, 2);
      } else {
        return null;
      }
    }
  
    @override
    String rightStringAtIndex(int index) {
      if (index == 0) {
        return "AM";
      } else {
        return "PM";
      }
  
      // Orignal code
      // if (index &gt;= 0 &amp;&amp; index &lt; 60) {
      //   return this.digits(index, 2);
      // } else {
      //   return null;
      // }
    }
  
    @override
    String leftDivider() {
      return ":";
    }
  
    @override
    String rightDivider() {
      return " ";
    }
  
    @override
    List&lt;int&gt; layoutProportions() {
      return [1, 1, 1];
    }
  
    @override
    DateTime finalTime() {
      return currentTime.isUtc
          ? DateTime.utc(
              currentTime.year,
              currentTime.month,
              currentTime.day,
              this.currentLeftIndex(),
              this.currentMiddleIndex(),
              this.currentRightIndex())
          : DateTime(
              currentTime.year,
              currentTime.month,
              currentTime.day,
              this.currentLeftIndex(),
              this.currentMiddleIndex(),
              this.currentRightIndex());
    }
  }
  </code></pre>
  
  <p>To display it, call:</p>
  
  <pre><code>FlatButton(
                                  onPressed: () {
                                    DatePicker.showPicker(context,
                                        showTitleActions: true,
                                        onChanged: (date) {
                                      print('change $date');
                                    }, onConfirm: (date) {
                                      print('confirm $date');
                                    },
                                        pickerModel: CustomPicker(
                                            currentTime: DateTime.now(),
                                            locale: LocaleType.en));
                                  },
                                  child: Text(
                                    'show date time picker',
                                    style: TextStyle(color: Colors.blue),
                                  ))
  </code></pre>