popover 0.0.5

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

Popover

Popover for Flutter

Content

• Features
• Requirements
• Install
• Example
• Support
• License

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: 2.9.0+
• Flutter : 1.17.5+

Install

dependencies:
  popover: ^0.0.5

Example

See example/lib/main.dart.

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

class PopoverItems extends StatelessWidget {
  const PopoverItems({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Popover(
      direction: PopoverDirection.top,
      width: 200,
      arrowHeight: 15,
      arrowWidth: 30,
      child: GestureDetector(
        onTap: () => print('GestureDetector onTap'),
        child: 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: const Center(child: Text('Click Me')),
        ),
      ),
      bodyBuilder: (context) {
        return Scrollbar(
          child: Padding(
            padding: const EdgeInsets.only(top: 8, bottom: 8),
            child: ListView(
              padding: const EdgeInsets.all(8),
              children: [
                InkWell(
                  onTap: () => Navigator.of(context).pop(),
                  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')),
                ),
              ],
            ),
          ),
        );
      },
    );
  }
}

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.