Context lost for FocusNode

[eossa]

I am using:

• dart: 2.12.3
• flutter: 2.0.5
• datetime_picker_formfield: ^2.0.0
• OS X Big Sur 11.2.3

I have the following code

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

class AppInputDate extends StatelessWidget {
  final String format;
  final DateTime? initialValue;
  final String? Function(DateTime?)? validator;
  final void Function(DateTime?)? onChanged;

  AppInputDate({
    Key? key,
    this.format: 'yyyy-MM-dd',
    this.validator,
    this.onChanged,
    this.initialValue,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return DateTimeField(
      format: DateFormat(format),
      validator: validator,
      onChanged: onChanged,
      initialValue: initialValue,
      onShowPicker: (context, currentValue) async {
        final DateTime? date = await showDatePicker(
          context: context,
          firstDate: DateTime(1900),
          initialDate: currentValue ?? DateTime.now(),
          lastDate: DateTime(2100),
          cancelText: 'CANCELAR',
          errorInvalidText: 'Fecha no válida',
          errorFormatText: 'Formato de fecha no válido',
        );
        if (date == null || !format.contains('HH:mm')) {
          return date;
        }
        final time = await showTimePicker(
          context: context,
          initialTime: TimeOfDay.fromDateTime(currentValue ?? DateTime.now()),
          cancelText: 'CANCELAR',
        );
        return DateTimeField.combine(date, time);
      },
      decoration: InputDecoration(
        suffixIcon: Icon(Icons.calendar_today),
        isDense: true,
        hintText: format,
        focusedBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(6),
          borderSide: BorderSide(color: Colors.indigo.shade500, width: 2.0),
        ),
        enabledBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(6),
          borderSide: BorderSide(color: Colors.grey.shade300, width: 1.0),
        ),
        errorBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(6),
          borderSide:
              BorderSide(color: Theme.of(context).errorColor, width: 1.0),
        ),
      ),
    );
  }
}

Steps to replicate the error:

• Open date dialog
• Close the dialog
• Reopen the same or other date dialog
• Close the dialog
• Then click on a TextFormField and hit tab to change the field focus, the console throws the following error

The following assertion was thrown during a platform message callback:
Tried to get the bounds of a focus node that didn't have its context set yet.
The context needs to be set before trying to evaluate traversal policies. Setting the context is typically done with the attach method.
'package:flutter/src/widgets/focus_manager.dart':
Failed assertion: line 748 pos 9: 'context != null'

Either the assertion indicates an error in the framework itself, or we should provide substantially more information in this error message to help you determine and fix the underlying cause.
In either case, please report this assertion by filing a bug on GitHub:
  https://github.com/flutter/flutter/issues/new?template=2_bug.md

When the exception was thrown, this was the stack
#2      FocusNode.rect
package:flutter/…/widgets/focus_manager.dart:748
#3      new _ReadingOrderSortData
package:flutter/…/widgets/focus_traversal.dart:837
#4      ReadingOrderTraversalPolicy.sortDescendants
package:flutter/…/widgets/focus_traversal.dart:1080
#5      FocusTraversalPolicy._sortAllDescendants
package:flutter/…/widgets/focus_traversal.dart:318
#6      FocusTraversalPolicy._moveFocus
package:flutter/…/widgets/focus_traversal.dart:376
...

What could I do about this?

[goevexx]

I get the same error. It happens after the second time DateTimeField is tapped and you want to call onEditingComplete on another field in the same form.

Reproducable

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'DateTimeField Error Demo'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Form(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              TextFormField(
                textInputAction: TextInputAction.next,
                onEditingComplete: () =>
                    FocusScope.of(context).nextFocus(), // Throws error
              ),
              TextFormField(
                textInputAction: TextInputAction
                    .next, // Doesn't throw error, but doesnt work
              ),
              DateTimeField(
                format: DateFormat.yMd(),
                onShowPicker: // Tap 2 times and calling .nextFocus() doesn't work anymore
                    (BuildContext context, DateTime currentValue) async {
                  return DateTime.now();
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

[mikeesouth]

Have the same issue, any fix? It's the same for the new fork of this library: https://github.com/rekariproject/datetime_picker_formfield

[casumatt]

I also have the same issue. Any update?

[aungmyopaing890]

I also have the same issue. Any update?