Flutter: как сделать такой пользовательский интерфейс во Flutter для выбора дат

Я надеюсь, что этот код будет работать для вас. Вам просто нужно добавить логику выбора даты в это текстовое поле.

  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 {}
    }

Попробуй это

Row(
    children: [
      Expanded(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text("Start Date", style: TextStyle(
              color: Colors.blueGrey,
            ),),
            SizedBox(height: 15.0,),
            GestureDetector(
              onTap: () {
                // Show You Date Picker Here
              },
              child: Container(
                width: double.infinity,
                decoration: BoxDecoration(
                  border: Border(
                    bottom: BorderSide(),
                  ),
                ),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text("YourDate e.g May 7, 2018"),
                    Icon(Icons.calendar_today, color: Colors.blue,),
                  ],
                ),
              ),
            )
          ],
        ),
      ),
      SizedBox(width: 10.0,),
      Expanded(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text("End Date", style: TextStyle(
              color: Colors.blueGrey,
            ),),
            SizedBox(height: 15.0,),
            GestureDetector(
              onTap: () {
                // Show You Date Picker Here
              },
              child: Container(
                width: double.infinity,
                decoration: BoxDecoration(
                  border: Border(
                    bottom: BorderSide(),
                  ),
                ),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text("YourDate e.g May 8, 2018"),
                    Icon(Icons.calendar_today, color: Colors.blue,),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    ],
  )

У меня есть общий класс TextFieldWidget, который я использую для всех своих проектов Flutter, он действительно полезен и может ответить на ваш вопрос.

enum TextFieldType {
  Password,
  Email,
  Text,
  Picker,
}

class TextFieldWidget extends StatefulWidget {
  final TextEditingController controller;
  final FocusNode focusNode;
  final Key key;
  final String errorText;
  final String hintText;
  final Color errorBorderColor;
  final bool autofocus;
  final bool isEnabled;
  final Function onChanged;
  final Function onTap;
  final TextFieldType textFieldType;
  final TextCapitalization textCapitalization;
  final Widget suffixIcon;

  TextFieldWidget({
    this.controller,
    this.focusNode,
    this.key,
    this.errorText,
    this.hintText,
    this.errorBorderColor,
    this.autofocus = false,
    this.isEnabled = true,
    this.onChanged,
    this.onTap,
    this.textFieldType = TextFieldType.Text,
    this.textCapitalization = TextCapitalization.none,
    this.suffixIcon,
  });

  @override
  State createState() => _TextFieldWidgetState();
}

class _TextFieldWidgetState extends State<TextFieldWidget> {
  final double _borderSideWidth = 0.5;
  bool _shouldObscureText = true;

  @override
  Widget build(BuildContext context) {
    return TextField(
      style: TextStyle(
        color: !widget.isEnabled ? ThemeColors.text.tertiaryLight : null,
        fontSize: ThemeFonts.size.textFieldText,
      ),
      enabled: widget.isEnabled,
      controller: this.widget.controller,
      focusNode: this.widget.focusNode,
      decoration: _getTextFieldDecoration(),
      autofocus: this.widget.autofocus,
      obscureText: _shouldTextBeObscured(),
      onChanged: this.widget.onChanged,
      onTap: this.widget.onTap,
      keyboardType: _getKeyboardType(),
      textCapitalization: this.widget.textCapitalization,
      enableInteractiveSelection: this.widget.textFieldType != TextFieldType.Picker,
    );
  }

  InputDecoration _getTextFieldDecoration() {
    return InputDecoration(
      suffixIcon: _getSuffixIcon(),
      labelText: widget.hintText,
      labelStyle: TextStyle(color: ThemeColors.text.tertiary),
      errorText: widget.errorText,
      errorStyle: TextStyle(
        color: widget.isEnabled ? ThemeColors.text.tertiary : ThemeColors.text.tertiaryLight,
        fontSize: ThemeFonts.size.textFieldPlaceholder,
      ),
      enabledBorder: UnderlineInputBorder(
        borderSide: BorderSide(
          color: ThemeColors.text.tertiary,
          width: _borderSideWidth,
        ),
      ),
      focusedBorder: UnderlineInputBorder(
        borderSide: BorderSide(
          color: ThemeColors.border.secondary,
          width: _borderSideWidth,
        ),
      ),
      focusedErrorBorder: UnderlineInputBorder(
        borderSide: BorderSide(
          color: ThemeColors.text.tertiary,
          width: _borderSideWidth,
        ),
      ),
      errorBorder: UnderlineInputBorder(
        borderSide: BorderSide(
          color: this.widget.errorBorderColor ?? ThemeColors.text.tertiary,
          width: _borderSideWidth,
        ),
      ),
    );
  }

  TextInputType _getKeyboardType() {
    switch (this.widget.textFieldType) {
      case TextFieldType.Email:
        return TextInputType.emailAddress;
      default:
        return TextInputType.text;
    }
  }

  Widget _getSuffixIcon() {
    switch (this.widget.textFieldType) {
      case TextFieldType.Picker:
        return Icon(Icons.unfold_more);
      case TextFieldType.Password:
        return IconButton(
          icon: Icon(Icons.remove_red_eye),
          color: _shouldObscureText ? ThemeColors.icon.secondaryLight : ThemeColors.icon.secondary,
          onPressed: () {
            setState(() {
              _shouldObscureText = !_shouldObscureText;
            });
          },
        );
      case TextFieldType.Text:
        return this.widget.suffixIcon != null ? this.widget.suffixIcon : null;
      default:
        return null;
    }
  }

  bool _shouldTextBeObscured() {
    if (widget.textFieldType == TextFieldType.Password) {
      return _shouldObscureText;
    }
    return false;
  }
}

И когда вы хотите использовать его для выбора даты, просто назовите его так:

  TextFieldWidget(
    focusNode: _dateFocusNode,
    controller: _dateTextController,
    textFieldType: TextFieldType.Picker,
    hintText: 'Date of birth',
    onTap: () {
      if (FocusScope.of(context).hasFocus) {
        FocusScope.of(context).requestFocus(FocusNode());
      }
      // Call code that opens date picker here
    },
  ),

Имейте в виду, что TextField предоставляет больше возможностей, чем вам нужно прямо сейчас, но если вы планируете иметь обработку ошибок, разные цвета пользовательского интерфейса для этих случаев, другой пользовательский интерфейс для пароля, электронной почты и других данных, это будет очень полезно.