salihcanbinboga / info_popup

The allows you to easily show a simple, customizable popup on your wrapped widget.

Introduction

The info_popup package allows you to easily show a simple, customizable popup on your wrapped widget. The highlight feature, which can be activated at will, helps draw the user's attention to the desired location.

You can test it now on the Info Popup preview page. Note that the website experience may be different.

Features

• Display a customizable popup on your wrapped widget
• Activate the highlight feature to draw the user's attention to the desired location
• Fully customize the content of the popup
• Add margins to the popup from any side

Getting Started

To use this package, add info_popup as a dependency in your pubspec.yaml file.

dependencies:
  info_popup: ^3.0.0

Alternatively, you can add it to your project by running the following commands in your terminal:

with Dart:

$ dart pub add info_popup

with Flutter:

$ flutter pub add info_popup

Usage

To show a popup, wrap the widget that you want to display the popup on with the InfoPopupWidget widget. All you have to do is wrap it in the widget you want to show information with the InfoPopupWidget widget. With the InfoPopupController, you can customize it as you wish, and turn it on and off.

import 'package:info_popup/info_popup.dart';

	InfoPopupWidget(
		contentTitle: 'Info Popup Details',
		child: Icon(
			Icons.info,
			color: Colors.pink,
		),
	),

Example

This is a normal info text displayed using the InfoPopupWidget widget with several optional parameters.

              InfoPopupWidget(
                contentTitle: 'Info Popup Details',
                arrowTheme: InfoPopupArrowTheme(
                  color: Colors.pink,
                  arrowDirection: ArrowDirection.up,
                ),
                contentTheme: InfoPopupContentTheme(
                  infoContainerBackgroundColor: Colors.black,
                  infoTextStyle: TextStyle(color: Colors.white),
                  contentPadding: const EdgeInsets.all(8),
                  contentBorderRadius: BorderRadius.all(Radius.circular(10)),
                  infoTextAlign: TextAlign.center,
                ),
                dismissTriggerBehavior: PopupDismissTriggerBehavior.onTapArea,
                areaBackgroundColor: Colors.transparent,
                indicatorOffset: Offset.zero,
                contentOffset: Offset.zero,
                onControllerCreated: (controller) {
                  print('Info Popup Controller Created');
                },
                onAreaPressed: (InfoPopupController controller) {
                  print('Area Pressed');
                },
                infoPopupDismissed: () {
                  print('Info Popup Dismissed');
                },
                onLayoutMounted: (Size size) {
                  print('Info Popup Layout Mounted');
                },
                child: Icon(
                  Icons.info,
                  color: Colors.pink,
                ),
              ),

"This is a custom popup example created using the InfoPopupWidget widget.

Custom Popup Widget

              InfoPopupWidget(
                customContent: Container(
                  decoration: BoxDecoration(
                    color: Colors.blueGrey,
                    borderRadius: BorderRadius.circular(10),
                  ),
                  padding: const EdgeInsets.all(10),
                  child: Column(
                    children: const <Widget>[
                      TextField(
                        decoration: InputDecoration(
                          hintText: 'Enter your name',
                          hintStyle: TextStyle(color: Colors.white),
                          enabledBorder: OutlineInputBorder(
                            borderSide: BorderSide(color: Colors.white),
                          ),
                        ),
                      ),
                      SizedBox(height: 10),
                      Center(
                        child: Text(
                          'Example of Info Popup inside a Bottom Sheet',
                          style: TextStyle(
                            color: Colors.white,
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
                arrowTheme: const InfoPopupArrowTheme(
                  color: Colors.pink,
                  arrowDirection: ArrowDirection.up,
                ),
                dismissTriggerBehavior: PopupDismissTriggerBehavior.onTapArea,
                areaBackgroundColor: Colors.transparent,
                indicatorOffset: Offset.zero,
                contentOffset: Offset.zero,
                onControllerCreated: (controller) {
                  print('Info Popup Controller Created');
                },
                onAreaPressed: (InfoPopupController controller) {
                  print('Area Pressed');
                },
                infoPopupDismissed: () {
                  print('Info Popup Dismissed');
                },
                onLayoutMounted: (Size size) {
                  print('Info Popup Layout Mounted');
                },
                child: Icon(
                  Icons.info,
                  color: Colors.pink,
                ),
              ),

Conclusion

The info_popup package provides a simple and effective way to show a customizable popup on your wrapped widget. With the highlight feature, you can draw the user's attention to the desired location.

License

This project is licensed under the MIT License - see the LICENSE file for details.

info_popup's Issues

VScode no hot reload

System info

macOS 12.6 (with M1 chip)
vscode: 1.75.1
dart vscode extension: 3.58
info_popup: ^2.4.6

---

Love the package. Only thing I've noticed is that when making changes to a pop up, there doesn't seem to be any hot reloading happening. After my changes I can do a normal reload and will then see the changes I made. Just wondered if this was a known thing?

Problem with widget display on IOS

Hello!
I use your package and I like everything. Thank you

I have a problem with displaying the widget on the iOS 16.2 platform
Widget content is cropped in height if the widget is at the bottom of the screen
Everything is fine on the Android platform.

I am attaching 2 screenshots, 1st screenshot from IOS, 2nd from Android.

How can I fix this?

Option to close popup when click on specific element (such as a close 'X' button)

Please add described feature above. I need to create custom popups white custom body content and close with 'X' button.

I achieved this by defining a type from the _InfoPopupWidgetState class and creating a new method within this class called 'close()'. To access the method I used a global key.

Content refresh problem

After changing the app language for nationalization, the content language in info_popup has not changed.

Only left edge shows popup

Using either a Text widget or icon widget in infoPopup, only the very left edge will trigger the popup. Is their a way to make this wrap the entire widget so my mouse over will show the popup anywhere on that widget.

[Mobile - Android & iOS] Info popup hidden by keyboard

Hi!

First of all, I wanna say I really appreciate the work that went into this package. I am in the process of integrating it into a project of mine and just noticed an issue with the positioning of the popup.

Issue

Whenever the keyboard is open and I try to open the popup, it gets hidden by it. There doesn't seem to have a way for me to force the widget to show above the button instead of below.

Platforms

I can confirm this is happening both in Android and iOS as well as emulators and physical devices.

Steps to reproduce

1 - Run code on Android/iOS emulator/simulator/physical device
2 - Tap the TextField to make the keyboard open up
3 - Tap the Info icon to open the popup

Code

import 'package:info_popup/info_popup.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: InfoPopupPage(),
    );
  }
}

class InfoPopupPage extends StatefulWidget {
  const InfoPopupPage({super.key});

  @override
  State<InfoPopupPage> createState() => _InfoPopupPageState();
}

class _InfoPopupPageState extends State<InfoPopupPage> {
  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: SafeArea(
        child: Column(
          children: <Widget>[
            Expanded(
              child: TextField(),
            ),
            InfoPopupWidget(
              contentTitle: 'Info Popup Icon Example',
              dismissTriggerBehavior: PopupDismissTriggerBehavior.anyWhere,
              arrowTheme: InfoPopupArrowTheme(
                color: Colors.pink,
              ),
              child: Icon(
                Icons.info,
                color: Colors.pink,
              ),
            ),
            SizedBox(height: 16),
          ],
        ),
      ),
    );
  }
}

Arrow can't be white.

For some reason,

  arrowTheme: const InfoPopupArrowTheme(
                  color: Colors.white,
                ),

will remove the arrow, another color works

The popup cannot be closed by clicking the icon multiple times

Phenomenon：

The first time you click on the icon, the popup will appear. If you click on the icon again, it will first close and then be displayed again. As a result, the popup cannot be hidden.

Error: Info Popup: You have changed the custom content. Please restart the app to see the changes.

Hi dev,

Best popup hands down for flutter to customize, works as intended, easy to use.

From the last update though i am always recieving this error

'Info Popup: You have changed the custom content. Please restart the app to see the changes.' While i changed absolutely nothing

How can I touch outside to close the popup?

Currently, when i tap out side of popup, then cannot close the pop up?
Can you help me for this?
My code:

InfoPopupWidget(
            arrowTheme: const InfoPopupArrowTheme(
              arrowDirection: ArrowDirection.down,
              color: Colors.transparent,
            ),
            contentOffset: const Offset(-75, 0),
            customContent: () => Container(
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadiusConstants.c15wr,
              ),
              padding: PaddingConstants.a10R,
              width: 200.ww,
              child: ListView.separated(
                itemCount: readAtList.values.toList().length,
                physics: const NeverScrollableScrollPhysics(),
                shrinkWrap: true,
                separatorBuilder: (context, index) => 15.wVerticalSpace,
                itemBuilder: (_, index) {
                  return Row(
                    children: <Widget>[
                      _buildReaderAvatar(
                          readAtList.values.toList()[index].avatar),
                      10.wHorizontalSpace,
                      Expanded(
                        child: Text(
                          readAtList.values.toList()[index].name ??
                              AppConstant.empty,
                          textAlign: TextAlign.left,
                          overflow: TextOverflow.ellipsis,
                          maxLines: 1,
                          style: TextStyle(
                            fontSize: 14.zsp(context),
                            fontWeight: FontWeight.normal,
                            color: Colors.black,
                          ),
                        ),
                      ),
                    ],
                  );
                },
              ),
            ),
            child: Container(
              height: 20,
              color: Colors.transparent,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: showReadAtList.keys.map((String key) {
                  final int index = readAtList.keys.toList().indexOf(key);
                  return Padding(
                    padding: const EdgeInsets.only(left: 2),
                    child: index >= _indexReadMore
                        ? _buildMoreReader('$moreReader')
                        : _buildReader(
                            key,
                            userInfo: showReadAtList[key]!,
                          ),
                  );
                }).toList(),
              ),
            ),
          )

Exception with errorBuilder of Image.asset

Hi dev,
happy new year and thanks for this awesome packge, as I had wrote also previously :D !

I wanted to bring to your attention this exception i am currently facing with the package:

For example, a simple widget snippet to showcase:

InfoPopupWidget(
                                      customContent: () => Container(
                                          child: Text(mapName)),
                                      child: Image.asset(
                                        "assets/$mapName.webp",
                                        scale: 1,
                                        errorBuilder:
                                            ((context, error, stackTrace) {
                                          debugPrint(mapName);
                                          return Image.asset(
                                            "assets/in_case_error.webp",
                                            scale: 1,
                                          );
                                        }),
                                      ),
                                    );

Will throw a 'attached': is not true. error when you try to show the popup and when "in_case_error.webp" picture is displayed, instead of the regular picture.

highLightTheme not working ?

import 'package:info_popup/src/themes/high_light_theme.dart';

 child: InfoPopupWidget(
          customContent: Container(
            width: 135,
            padding: const EdgeInsets.all(6.0),
            decoration: const BoxDecoration(
              color: Color(0xB3000000), // 70% 4D 30% B3
              borderRadius: BorderRadius.all(Radius.circular(6)),
              border: Border(),
            ),
            child: Text(
              popupContent,
              style: const TextStyle(
                color: Colors.white,
                fontSize: 11,
                fontWeight: FontWeight.w400,
              ),
              textAlign: TextAlign.start,
            ),
          ),
          arrowTheme: const InfoPopupArrowTheme(
            arrowSize: Size(17, 5),
            arrowDirection: ArrowDirection.down,
            color: Color(0xB3000000),
          ),
          //indicatorOffset: const Offset(0, 0.5),
          dismissTriggerBehavior: PopupDismissTriggerBehavior.anyWhere,
          contentMaxWidth: 135,
          onAreaPressed: (controller) {
            Logger.log("in onAreaPressed");
            //controller.dismissInfoPopup();
          },
          areaBackgroundColor: Colors.transparent,
          enableHighlight: true,
          highLightTheme: HighLightTheme(
            radius: const BorderRadius.only(
              topLeft: Radius.zero,
              topRight: Radius.circular(10),
              bottomRight: Radius.zero,
              bottomLeft: Radius.circular(6),
            ),
            padding: EdgeInsets.zero,
            backgroundColor: Colors.transparent,
          ),
          //MediaQuery.of(context).size.width * 0.36,
          child: _statusTopRightTag(tagBgColor, tagText),
        ),

highLightTheme: HighLightTheme(
radius: const BorderRadius.only(
topLeft: Radius.zero,
topRight: Radius.circular(10),
bottomRight: Radius.zero,
bottomLeft: Radius.circular(6),
),
padding: EdgeInsets.zero,
backgroundColor: Colors.transparent,
),

HighLightTheme not working

Exception: BoxConstraints has non-normalized height constraints.

Stacktrace

error_stacktrace.txt

Widget structure

SearchBar(
                                        shape: MaterialStateProperty.all(
                                          RoundedRectangleBorder(borderRadius: BorderRadius.zero),
                                        ),
                                        hintText: 'Search',
                                        backgroundColor: MaterialStateProperty.all(Colors.grey),
                                        trailing: [
                                          FutureBuilder(
                                            future: Future.wait<bool>([
                                              widget._nfcService.isNfcUnsupported(),
                                              widget._nfcService.isNfcOn(),
                                            ]),
                                            builder: (context, snapshot) {
                                              switch (snapshot.connectionState) {
                                                case ConnectionState.done:
                                                  final isNfcUnsupported = snapshot.data![0];
                                                  final isNfcOn = snapshot.data![1];
                                                  final nfcIconWidget = IconButton(
                                                    icon: Icon(
                                                      Icons.nfc,
                                                      color: isNfcUnsupported || !isNfcOn
                                                          ? Colors.black12
                                                          : Colors.black,
                                                    ),
                                                    onPressed:
                                                        isNfcUnsupported || !isNfcOn ? null : () {},
                                                  );

                                                  if (isNfcUnsupported) {
                                                    return InfoPopupWidget(
                                                      contentTitle: 'NFC Unsupported on device',
                                                      child: nfcIconWidget,
                                                    );
                                                  } else if (!isNfcOn) {
                                                    return InfoPopupWidget(
                                                      contentTitle:
                                                          'NFC Unsupported is off. Turn it on in Device Settings',
                                                      child: nfcIconWidget,
                                                    );
                                                  }
                                                  return nfcIconWidget;
                                                default:
                                                  return const CircularProgressIndicator();
                                              }
                                            },
                                          ),
                                          Gap(24),
                                          Icon(Icons.search),
                                        ],
                                      ),