popover

v0.3.1

A popover is a transient view that appears above other content onscreen when you tap a control or in an area.

Package archive: https://pubdev.letsnova.ru/api/archives/popover/0.3.1.tar.gz

Installdart pub add popover

Readme

Popover

Popover screenshots

Popover for Flutter

Supported platforms Popover is released under the MIT license. Effective Dart PRs welcome!
Current Build Status.

Content

Features

A popover is a transient view that appears above other content onscreen when you tap a control or in an area. Typically, a popover includes an arrow pointing to the location from which it emerged. Popovers can be nonmodal or modal. A nonmodal popover is dismissed by tapping another part of the screen or a button on the popover. A modal popover is dismissed by tapping a Cancel or other button on the popover.

Source: Human Interface Guidelines.

Requirements

  • Dart: 3.5.0+
  • Flutter: 3.24.0+

Install

dependencies:
                  popover: ^0.3.1
                

Example

See example/lib/main.dart.

import 'package:flutter/material.dart';
                import 'package:popover/popover.dart';
                
                class PopoverExample extends StatelessWidget {
                  @override
                  Widget build(BuildContext context) {
                    return MaterialApp(
                      home: Scaffold(
                        appBar: AppBar(title: const Text('Popover Example')),
                        body: const SafeArea(
                          child: Padding(
                            padding: EdgeInsets.all(16),
                            child: Button(),
                          ),
                        ),
                      ),
                    );
                  }
                }
                
                class Button extends StatelessWidget {
                  const Button({Key? key}) : super(key: key);
                
                  @override
                  Widget build(BuildContext context) {
                    return Container(
                      width: 80,
                      height: 40,
                      decoration: const BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.all(Radius.circular(5)),
                        boxShadow: [BoxShadow(color: Colors.black26, blurRadius: 5)],
                      ),
                      child: GestureDetector(
                        child: const Center(child: Text('Click Me')),
                        onTap: () {
                          showPopover(
                            context: context,
                            bodyBuilder: (context) => const ListItems(),
                            onPop: () => print('Popover was popped!'),
                            direction: PopoverDirection.bottom,
                            width: 200,
                            height: 400,
                            arrowHeight: 15,
                            arrowWidth: 30,
                          );
                        },
                      ),
                    );
                  }
                }
                
                class ListItems extends StatelessWidget {
                  const ListItems({Key? key}) : super(key: key);
                
                  @override
                  Widget build(BuildContext context) {
                    return Padding(
                        padding: const EdgeInsets.symmetric(vertical: 8),
                        child: ListView(
                          padding: const EdgeInsets.all(8),
                          children: [
                            InkWell(
                              onTap: () {
                                Navigator.of(context)
                                  ..pop()
                                  ..push(
                                    MaterialPageRoute<SecondRoute>(
                                      builder: (context) => SecondRoute(),
                                    ),
                                  );
                              },
                              child: Container(
                                height: 50,
                                color: Colors.amber[100],
                                child: const Center(child: Text('Entry A')),
                              ),
                            ),
                            const Divider(),
                            Container(
                              height: 50,
                              color: Colors.amber[200],
                              child: const Center(child: Text('Entry B')),
                            ),
                            const Divider(),
                            Container(
                              height: 50,
                              color: Colors.amber[300],
                              child: const Center(child: Text('Entry C')),
                            ),
                          ],
                        ),
                    );
                  }
                }
                
                class SecondRoute extends StatelessWidget {
                  @override
                  Widget build(BuildContext context) {
                    return Scaffold(
                      appBar: AppBar(
                        title: const Text('Second Route'),
                        automaticallyImplyLeading: false,
                      ),
                      body: Center(
                        child: ElevatedButton(
                          onPressed: () => Navigator.pop(context),
                          child: const Text('Go back!'),
                        ),
                      ),
                    );
                  }
                }
                

To see examples of the following package on a device or simulator:

cd example && flutter run
                

Support

Post issues and feature requests on the GitHub issue tracker.

License

The source code of Popover project is available under the MIT license. See the LICENSE file for more info.

Changelog

[0.3.1] - 10.00.2024

  • Update minimum Flutter and Dart versions to 3.24.0+ and 3.5.0+ respectively.

[0.3.0+1] - 19.05.2024

  • Update README.
  • Update web example to use flutter.js service worker bootstrapping.

[0.3.0] - 08.02.2024

[0.2.9] - 08.12.2023

[0.2.8+2] - 01.03.2023

[0.2.8+1] - 05.02.2023

[0.2.8] - 02.01.2023

  • BREAKING: Improve popover rendering. isParentAlive parameter was deprecated. (thanks @VictorOhashi).

[0.2.7] - 23.10.2022

  • Add popoverTransitionBuilder. Users can provide custom animation transition now. (thanks @sanjidbillah).

[0.2.6+3] - 12.10.2021

  • Fixed the bug that appears when the parent widget from which Popover was presented has been removed from a widget tree (thanks @ajaxspace).

[0.2.6+2] - 17.06.2021

  • Fixed the bug that appears when you change window size while popover is opened (thanks @whitebug).

[0.2.6+1] - 21.05.2021

  • Set minimum dart version to 2.12.0.

[0.2.6] - 21.05.2021

  • Fix constraints size for PopoverDirection.top & PopoverDirection.bottom.

[0.2.5] - 18.05.2021

  • Recalculate popover shape on context changes.

[0.2.4] - 17.05.2021

[0.2.3] - 03.05.2021.

  • Add RouteSettings? routeSettings parameter.

[0.2.2] - 22.04.2021.

[0.2.1] - 04.04.2021.

  • Lower minimum version requirements for Dart and Flutter to pass pub.dev validation.

[0.2.0] - 04.04.2021.

  • Migrate to NNBD.

[0.1.0] - 09.02.2021.

  • BREAKING: Refactor popover implementation to have identical API to included in Flutter modal dialogs e.g. showCupertinoDialog
  • docs: README updates
  • docs: example application updates

[0.0.5] - 08.02.2021.

  • Add Key key, barrierDismissible and showPopover.

[0.0.4] - 27.01.2021.

  • Add arrowDyOffset, arrowDxOffset and contentDyOffset public parameters.

[0.0.3] - 21.01.2021.

  • A child widget can be wrapped in InkWell or GestureDetector.

[0.0.2] - 18.01.2021.

  • Update PopoverItem.
  • Add PopoverDirection to exports.
  • Add documentation.

[0.0.1] - 10.01.2021.

  • Initial release.