Part of the window dialog(showDatePicker) that falls on top of the pdf(EasyWebView) does not work, not react

Question

I use two plugins: EasyWebView and showDatePicker. In EasyWebView i show pdf via the link. Under certain conditions, I need to show a date picker dialog box, using showDatePicker, in which the user will select a date. The problem is that the part of the window dialog(showDatePicker) that falls on top of the pdf(EasyWebView) does not work. Not a single button on the side of the pdf does not react. The rest of the buttons that are not on the surface of the pdf - work

The example show part A of the window dialog is superimposed on the pdf and does not work, at the same time when part B works fine.

PDF (EasyWebView) widget code:

Expanded(
      flex: 2,
      child: new Container(
        padding: new EdgeInsets.only(left: 8.0, right: 8.0),
        child: Card(
          clipBehavior: Clip.antiAlias,
          child: SizedBox(
              height: 9000, // constrain height
              child: EasyWebView(
                src: widget.url, // API url
                isHtml: false,
                // Use Html syntax
                isMarkdown: false,
                // Use markdown syntax
                convertToWidgets: false,
                onLoaded: () {}, // Try to convert to flutter widgets
                // width: 100,
                // height: 100,
              )),
        ),
      ),
    );

dialog(showDatePicker) widget code:

    return Padding(
      padding: const EdgeInsets.only(top: 20.0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Expanded(
            flex: 1,
            child: GestureDetector(
              onTap: () async {
                DateTime endDatePicked =
                    await showDatePicker(context: context, initialDate: _endDate, firstDate: _earliestEndDate, lastDate: _latestEndDate);
                setState(() {
                  if (endDatePicked != null) {
                    _endDate = endDatePicked;
                    _selectedDateText = getFormattedDateValue(_endDate);
                    endDataLog.comment = _endDate.toString();
                  }
                });
              },
              child: Container(
                decoration: BoxDecoration(
                  border: Border(
                    bottom: BorderSide(width: 1.0, color: RendinColor.darkGrey),
                  ),
                ),
                child: TextFormField(
                  //enabled: false,
                  keyboardType: TextInputType.datetime,
                  readOnly: true,
                  onTap: () async {
                    DateTime endDatePicked = await showDatePicker(
                        context: context, initialDate: _endDate, firstDate: _earliestEndDate, lastDate: _latestEndDate);
                    setState(() {
                      if (endDatePicked != null) {
                        _endDate = endDatePicked;
                        _selectedDateText = getFormattedDateValue(_endDate);
                        endDataLog.comment = _endDate.toString();
                      }
                    });
                  },
                  validator: (val) => _selectedDateText == getFormattedDateValue(_endDate)
                      ? null
                      : translate("agreement.termination.choose_date", context: context),
                  decoration: InputDecoration(hintText: _selectedDateText),
                  style: TextStyle(color: RendinColor.darkGrey),
                ),
              ),
            ),
          )
        ],
      ),
    );

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, 1.24.0-10.2.pre, on Mac OS X 10.15.7 19H2 darwin-x64, locale en-EE)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.1)
[✓] Xcode - develop for iOS and macOS (Xcode 11.7)
[✓] Chrome - develop for the web
[✓] Android Studio (version 4.0)
[✓] IntelliJ IDEA Ultimate Edition (version 2020.2)
[✓] Connected device (2 available)

• No issues found!

How this can be solved?

Solution

The solution is to use a PointerInterceptor via the TransitionBuilder builder argument of showDataPicker()

Example:

final date = await showDatePicker(
    ...,
    builder: (ctx, child) => PointerInterceptor(child: child)
);

Comments

[Abhilash Chandran]

This could not be solved until you share a MRE. Please consider showing us some code. Then the community can help. Apart from that, it would be helpful to know which platform you are testing this, which flutter version. This will help isolate the issue.

[Sergei Eensalu]

@AbhilashChandran thank you for comment. I added a code and flutter doctor