https://github.com/minikin/popover
Popover for Flutter. A popover is a transient view that appears above other content onscreen when you tap a control or in an area.
https://github.com/minikin/popover
android dart flutter ios ipados linux macos modal-dialog popover pub webapp widget windows
Last synced: 1 day ago
JSON representation
Popover for Flutter. A popover is a transient view that appears above other content onscreen when you tap a control or in an area.
- Host: GitHub
- URL: https://github.com/minikin/popover
- Owner: minikin
- License: mit
- Created: 2020-12-26T10:32:37.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2025-01-05T09:58:23.000Z (4 months ago)
- Last Synced: 2025-05-10T03:02:35.697Z (8 days ago)
- Topics: android, dart, flutter, ios, ipados, linux, macos, modal-dialog, popover, pub, webapp, widget, windows
- Language: Dart
- Homepage: https://pub.dev/packages/popover
- Size: 3.23 MB
- Stars: 174
- Watchers: 2
- Forks: 58
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
Popover
Popover for Flutter
# Content
- [Content](#content)
- [Features](#features)
- [Requirements](#requirements)
- [Install](#install)
- [Example](#example)
- [Support](#support)
- [License](#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.
](https://developer.apple.com/design/human-interface-guidelines/ios/views/popovers/)
## Requirements
- Dart: 3.5.0+
- Flutter: 3.24.0+
## Install
```yaml
dependencies:
popover: ^0.3.1
```
## Example
See `example/lib/main.dart`.
```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(
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:
```sh
cd example && flutter run
```
## Support
Post issues and feature requests on the GitHub [issue tracker](https://github.com/minikin/popover/issues).
## License
The source code of Popover project is available under the MIT license.
See the [LICENSE](https://github.com/minikin/popover/blob/main/LICENSE) file for more info.