popover 0.0.3

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
• FAQ
• 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.2

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

FAQ

If you have any questions ping me on twitter: @minikin

License

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