flutter - 如何根据日历中的选择在 18 岁以下时隐藏小部件

Question

我有以下小部件:

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';

class BirthdayWidget extends StatefulWidget {
  final DateTime birthday;
  final ValueChanged<DateTime> onChangedBirthday;

  const BirthdayWidget({
    Key key,
    @required this.birthday,
    @required this.onChangedBirthday,
  }) : super(key: key);

  @override
  _BirthdayWidgetState createState() => _BirthdayWidgetState();
}

class _BirthdayWidgetState extends State<BirthdayWidget> {
  final controller = TextEditingController();
  final focusNode = FocusNode();

  @override
  void initState() {
    super.initState();

    setDate();
  }

  @override
  void didUpdateWidget(covariant BirthdayWidget oldWidget) {
    super.didUpdateWidget(oldWidget);

    setDate();
  }

  void setDate() => setState(() {
        controller.text = widget.birthday == null
            ? ''
            : DateFormat.yMd().format(widget.birthday);
      });

  @override
  Widget build(BuildContext context) => FocusBuilder(
        onChangeVisibility: (isVisible) {
          if (isVisible) {
            selectDate(context);
            //
          } else {
            FocusScope.of(context).requestFocus(FocusNode());
          }
        },
        focusNode: focusNode,
        builder: (hasFocus) => TextFormField(
          controller: controller,
          validator: (value) => value.isEmpty ? 'Is Required' : null,
          decoration: InputDecoration(
            prefixText: ' ',
            hintText: 'Your birthday',
            prefixIcon: Icon(Icons.calendar_today_rounded),
            border: OutlineInputBorder(),
          ),
        ),
      );

  Future selectDate(BuildContext context) async {
    final birthday = await showDatePicker(
      context: context,
      initialDate: widget.birthday ?? DateTime.now(),
      firstDate: DateTime(1950),
      lastDate: DateTime(2100),
    );

    if (birthday == null) return;

    widget.onChangedBirthday(birthday);
  }
}

class FocusBuilder extends StatefulWidget {
  final FocusNode focusNode;
  final Widget Function(bool hasFocus) builder;
  final ValueChanged<bool> onChangeVisibility;

  const FocusBuilder({
    @required this.focusNode,
    @required this.builder,
    @required this.onChangeVisibility,
    Key key,
  }) : super(key: key);

  @override
  _FocusBuilderState createState() => _FocusBuilderState();
}

class _FocusBuilderState extends State<FocusBuilder> {
  @override
  Widget build(BuildContext context) => GestureDetector(
        behavior: HitTestBehavior.opaque,
        onTap: () => widget.onChangeVisibility(true),
        child: Focus(
          focusNode: widget.focusNode,
          onFocusChange: widget.onChangeVisibility,
          child: widget.builder(widget.focusNode.hasFocus),
        ),
      );
}

我通过下面的代码调用这个小部件，因为我在特定屏幕中调用它

Widget buildBirthday() => BirthdayWidget(
        birthday: user.dateOfBirth,
        onChangedBirthday: (dateOfBirth) =>
            setState(() => user = user.copy(dateOfBirth: dateOfBirth)),
      );

例如，如果年龄低于 18 岁，我想隐藏下面的小部件:

CustomTextFormField(
            onChanged: (passNo) => setState(
              () => user = user.copy(passportNumber: passNo),
            ),
            userValue: user.passportNumber,
            userFLName: 'Passport Number',
            keyBoardType: TextInputType.number,
          ),

我希望这足够清楚:)。

Answer 1

将要隐藏的小部件包裹在 Visibility() 中小部件并设置 visible值到 age>=18

Visibility(
      visible: (DateTime.now().difference(birthday).inDays/365)>=18,
      child: CustomTextFormField(
            onChanged: (passNo) => setState(
              () => user = user.copy(passportNumber: passNo),
            ),
            userValue: user.passportNumber,
            userFLName: 'Passport Number',
            keyBoardType: TextInputType.number,
          ),
),

OP 的建议答案:
已编辑
所以我发现它可以与我完成的 Visibility Widget 一起使用，如下代码所示:

            if ((DateTime.now().difference(user.dateOfBirth).inDays / 365) >=
                18)
              CustomTextFormField(
                validation: (value) {
                  if (value.isEmpty) {
                    return 'Please enter Passport Number';
                  }
                  return null;
                },
                onChanged: (passNo) => setState(
                  () => user = user.copy(passportNumber: passNo),
                ),
                userValue: user.passportNumber,
                userFLName: 'Passport Number',
                keyBoardType: TextInputType.number,
              ),