flutter 中 12 小时格式的自定义时间选择器

Question

我正在尝试将自定义时间选择器创建为 12 小时格式，

首先我来自 datepicker 的 select 日期然后在下面有自定义时间选择器布局，它代表从早上 6 点到晚上 11 点的时间，但无法处理这个

你可以找到问题，下午 12 点没有显示。

代码：

class DateExampleDemo extends StatefulWidget {
  @override
  _DateExampleDemoState createState() => _DateExampleDemoState();
}

class _DateExampleDemoState extends State<DateExampleDemo> {
  int _timeSelect = 0;
   DateTime selectedDate = DateTime.now();
 String selectedDateAsString;

  Future<void> _selectDate(BuildContext context) async {
    final DateTime picked = await showDatePicker(
        context: context,
        initialDate: selectedDate,
        firstDate: DateTime(2015, 8),
        lastDate: DateTime(2101));
    if (picked != null && picked != selectedDate)
      setState(() {
        // selectedDate = picked;
        selectedDateAsString =  DateFormat("yyyy-MM-dd").format(picked);
      });
  }

  @override
  void initState() {
    super.initState();
   selectedDateAsString =  DateFormat("yyyy-MM-dd").format(selectedDate);
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
     body: Center(
        child: Container(
          padding: const EdgeInsets.all(20),
          height: 500,
          child: Column(
            children: [
              selectDateRow(),
              SizedBox(height:30),
              _renderListTitle(),
              Expanded(
                child: SingleChildScrollView(
                  scrollDirection: Axis.vertical,
                  child:
                   Row(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: _renderTime(),
                  ),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }

  Widget selectDateRow(){
    return Container(
      padding: const EdgeInsets.all(8),
      decoration: BoxDecoration(
        border: Border.all(color:Colors.black)
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text(selectedDateAsString!=null? selectedDateAsString:"select Date"),
          IconButton(
            icon: Icon(Icons.calendar_today,color: Colors.blue,), 
            onPressed: ()=> _selectDate(context)),

        ],
      ),
    );
  }

  List<Widget> _renderTime() {
    // DateTime nowDate = DateTime.now();
  
    final listWidget = <Widget>[];
    var currentHour = 0;
    var endHour =0;
    for (final item in ChooseTimeConstants.defineLimitTime) {
     
      if(item['timeStart'] =="6am" && item['timeEnd'] =="11am"){
        currentHour =6;
        endHour =11;
      }
      if(item['timeStart'] =="12pm" && item['timeEnd'] =="4pm"){
        currentHour =1;
        endHour =4;
      }
      if(item['timeStart'] =="5pm" && item['timeEnd'] =="11pm"){
        currentHour =5;
        endHour =11;
      }
      listWidget.add(Expanded(
        child: _renderChooseTimeWidget(
          timeStart: currentHour,
          timeEnd: endHour,
        ),
      ));

    }
    return listWidget;
  }

   Widget _renderChooseTimeWidget({int timeStart, int timeEnd}) {
    final _listTimeWidget = <Widget>[];
    
    for (var _indS = timeStart; _indS <= timeEnd; _indS++) {
     
      _listTimeWidget.add(_buildButtonTime(_indS));
    }
    return Column(children: _listTimeWidget);
  }

  Widget _buildButtonTime(int hour) {
    return FlatButton(
      color: _timeSelect == hour
          ? Theme.of(context).primaryColor
          : Colors.transparent,
      textColor: Colors.black,
      onPressed: () {
        setState(() {
          _timeSelect = hour;
        });
      },
      child: Text('$hour:00'),
    );
  }

  _renderListTitle() {
    final List lstTitle = <Widget>[];
    ChooseTimeConstants.defineLimitTime.forEach((item) {
      lstTitle.add(Expanded(
          child: Text(
        item['title'],
        textAlign: TextAlign.center,
        style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
      )));
    });
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: lstTitle,
    );
  }

}

选择时间常数.dart：

class ChooseTimeConstants {
  static List defineLimitTime = [
    {
      'title': 'Morning',
      'timeStart':"6am",
      'timeEnd': "11am",
    },
    {
      'title': 'Afternoon',
      'timeStart': "12pm",
      'timeEnd': "4pm",
    },
    {
      'title': 'Evening',
      'timeStart': "5pm",
      'timeEnd': "11pm",
    }
  ];
}

output：

试图显示：