Pixel overflow after the screenshot is sent - 2.3.0

[diegoveloper]

Version

2.3.0

Library

feedback

Flutter channel

stable

Flutter version

2.8.1

Platform

Android, iOS

Details

There is a bug on the latest version 2.3.0, when the content is not scrollable and we open the keyboard to enter the feedback description, after we press submit, the current screen appears with pixel overflow.

Steps to reproduce

(Using the example project inside this package) I updated the _SecondaryScaffold widget with this code:

class _SecondaryScaffold extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final height = MediaQuery.of(context).size.height;
    return Scaffold(
      appBar: AppBar(
        title: const Text('Scaffold 2'),
      ),
      body: Column(
        children: [
          Container(
            height: height / 3.5,
            width: 200,
            color: Colors.red,
          ),
          Container(
            height: height / 3.5,
            width: 200,
            color: Colors.green,
          ),
          Container(
            height: height / 3.5,
            width: 200,
            color: Colors.blue,
          ),
        ],
      ),
    );
  }
}

Video:

https://user-images.githubusercontent.com/4898256/149075567-23af6f7d-3a91-40b8-b2c2-72234073aa99.mov

Output of flutter doctor -v

[✓] Flutter (Channel stable, 2.8.1, on macOS 12.1 21C52 darwin-arm, locale en-PE)
[✓] Android toolchain - develop for Android devices (Android SDK version 32.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2020.3)
[✓] VS Code (version 1.63.2)

[ueman]

Hey thanks for raising this. Do you by chance have an idea where this might come from?

[diegoveloper]

Hey thanks for raising this. Do you by chance have an idea where this might come from?

hmm I didn't check the code at all, but I guess the keyboard is pushing the content of the feedback view. If I add SingleChildScrollView at the top of the Column, we won't see the pixel overflow but we'll see the screenshot cut (because the content was pushed)

[diegoveloper]

hey @ueman, did you have a chance to check this issue? we are stuck in 2.2.1 for now. If you have any update I would appreciate it 🙏

[ueman]

hey @ueman, did you have a chance to check this issue? we are stuck in 2.2.1 for now. If you have any update I would appreciate it 🙏

No, unfortunately not. But I'll gladly accept a PR which fix this bug.

[DragonSlayer88]

I found this issue, well a workaround for it anyway. You need to increase the wait duration of the sendfeedback function here:

 static Future<void> _sendFeedback(
    BuildContext context,
    OnFeedbackCallback onFeedbackSubmitted,
    ScreenshotController controller,
    String feedback,
    double pixelRatio, {
    Duration delay = const Duration(milliseconds: 2000), //iI increased this to 2 seconds. Not sure what the minumim value is to get it working.
    bool showKeyboard = false,
    Map<String, dynamic>? extras,
  }) async {
      // Your logic here
      if (!showKeyboard) {
        _hideKeyboard(context);
      }

    await sendFeedback(
      onFeedbackSubmitted,
      controller,
      feedback,
      pixelRatio,
      delay: delay,
      extras: extras,
    );

    // Close feedback mode
    // ignore: use_build_context_synchronously
    BetterFeedback.of(context).hide();
  }

  static void _hideKeyboard(BuildContext context) {
    FocusScope.of(context).requestFocus(FocusNode());
  }
}

[wjkoh]

I am also facing this issue. On my end, I have a gray area on the left side. Is this related to LayoutBuilder, NavigationRail, or SafeArea? Check out the following screenshot.

[wjkoh]

I have created a minimal reproducible code as follows:

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

class FeedbackApp extends StatelessWidget {
  const FeedbackApp({super.key});

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) {
        if (constraints.maxWidth > 600) {
          return Scaffold(
            body: SafeArea(
              child: Row(
                children: [
                  NavigationRail(
                    labelType: NavigationRailLabelType.all,
                    selectedIndex: 0,
                    destinations: const <NavigationRailDestination>[
                      NavigationRailDestination(
                        icon: Icon(Icons.favorite_border),
                        selectedIcon: Icon(Icons.favorite),
                        label: Text('First'),
                      ),
                      NavigationRailDestination(
                        icon: Icon(Icons.bookmark_border),
                        selectedIcon: Icon(Icons.book),
                        label: Text('Second'),
                      ),
                    ],
                  ),
                  const VerticalDivider(thickness: 1, width: 1),
                  Expanded(child: Placeholder()),
                ],
              ),
            ),
            floatingActionButton: FloatingActionButton(
              onPressed: () {
                BetterFeedback.of(context).show((UserFeedback feedback) {
                  print(feedback.text);
                });
              },
              child: const Icon(
                Icons.support_agent_outlined,
              ),
            ),
          );
        } else {
          return Scaffold(
            body: Placeholder(),
            bottomNavigationBar: NavigationBar(
              destinations: const <Widget>[
                NavigationDestination(
                  selectedIcon: Icon(Icons.home),
                  icon: Icon(Icons.home_outlined),
                  label: 'Home',
                ),
                NavigationDestination(
                  icon: Badge(child: Icon(Icons.notifications_sharp)),
                  label: 'Notifications',
                ),
              ],
            ),
            floatingActionButton: FloatingActionButton(
              onPressed: () {
                BetterFeedback.of(context).show((UserFeedback feedback) {
                  print(feedback.text);
                });
              },
              child: const Icon(
                Icons.support_agent_outlined,
              ),
            ),
          );
        }
      },
    );
  }
}

Future<void> main() async {
  runApp(
    BetterFeedback(
      child: const FeedbackApp(),
    ),
  );
}