flutter - Flutter：如何在 Flutter 中做这种 UI 来选择日期

Question

你好朋友，

有人可以指导我在 Flutter 中进行这种 UI 制作吗？

提前致谢...

标签： flutterflutter-layout

Answer 1

我希望这段代码对你有用。您只需要在此文本字段上添加您的日期选择器逻辑。

  body: Container(
      child: Row(
    children: [
      Container(
        width: 5,
      ),
      Expanded(
          child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text("Start Date"),
          GestureDetector(
            onTap: () {
              selectDate(context);
            },
            child: AbsorbPointer(
              absorbing: true,
              child: TextFormField(
                style: TextStyle(color: Colors.black),
                controller: startdata,
                decoration: InputDecoration(

                    suffixIcon:
                        Icon(Icons.calendar_today, color: Colors.blue)),
              ),
            ),
          )
        ],
      )),
      Container(
        width: 5,
      ),
      Expanded(
          child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text("End Date"),
          GestureDetector(
            onTap: () {
              // Your second date picker logic
            },
            child: AbsorbPointer(
              absorbing: true,
              child: TextFormField(
                controller: enddata,
                decoration: InputDecoration(
                    suffixIcon:
                        Icon(Icons.calendar_today, color: Colors.blue)),
              ),
            ),
          )
        ],
      )),
      Container(
        width: 5,
      ),
    ],
  )),

选择日期

        TextEditingController startdata = new TextEditingController();
    TextEditingController enddata = new TextEditingController();
    DateTime selectedDate = DateTime.now();
    var myFormat = DateFormat('yyyy-MM-dd');
    Future selectDate(BuildContext context) async {
      final DateTime picked = await showDatePicker(
        context: context,
        initialDate: selectedDate,
        firstDate: selectedDate,
        lastDate: DateTime(2101),
        builder: (BuildContext context, Widget child) {
          return Theme(
            data: ThemeData.light().copyWith(
              primaryColor: WidgetColors.buttonColor,
              accentColor: WidgetColors.buttonColor,
              colorScheme: ColorScheme.light(primary: WidgetColors.buttonColor),
              buttonTheme: ButtonThemeData(textTheme: ButtonTextTheme.primary),
            ),
            child: child,
          );
        },
      );
      if (picked != null) {
        setState(() {
          selectedDate = picked;
          startdata = TextEditingController(text: myFormat.format(picked),);
        });
      } else {}
    }