Popover
Popover for Flutter
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: 2.12.0+
- Flutter : 2.0.0+
Install
dependencies:
popover: ^0.2.6+3
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,
transitionDuration: const Duration(milliseconds: 150),
bodyBuilder: (context) => const ListItems(),
onPop: () => print('Popover was popped!'),
direction: PopoverDirection.top,
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 Scrollbar(
child: 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.
261 Nov 10, 2022
406 Dec 27, 2022
607 Jan 4, 2023
72 Dec 2, 2022
140 Dec 30, 2022
3 Jan 5, 2022
5.5k Jan 6, 2023
5 Jul 26, 2022
25 Oct 12, 2022
987 Jan 6, 2023
1.1k Jan 5, 2023
125 Dec 28, 2022
405 Dec 30, 2022
417 Dec 29, 2022
246 Jan 3, 2023
1.8k Dec 30, 2022
141 Dec 26, 2022
334 Jan 3, 2023