Introduction:
Implementing a Popover in Flutter allows you to display contextual information or actions in a small window that appears above other content. While Flutter does not have a built-in Popover widget, you can create a similar effect using the flutter_popover package. This tutorial will guide you through implementing a Popover in Flutter using the flutter_popover package.
Content:
Step 1: Add the dependency:
Add the flutter_popover package to your pubspec.yaml file:
dependencies:
flutter_popover: ^0.1.4
Save the file and run flutter pub get to install the package.
Step 2: Import the package:
Import the flutter_popover package in your Dart file:
import 'package:flutter/material.dart';
import 'package:flutter_popover/flutter_popover.dart';
Step 3: Create a widget with Popover:
Create a widget that triggers the Popover when tapped. Use the Popover widget to display content inside the Popover:
class PopoverExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Popover Example'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
showPopover(
context: context,
bodyBuilder: (context) {
return Container(
padding: EdgeInsets.all(16.0),
child: Text(
'Popover Content',
style: TextStyle(fontSize: 20),
),
);
},
onPop: () {
print('Popover dismissed');
},
);
},
child: Text('Show Popover'),
),
),
);
}
}
In this example, an ElevatedButton is used to trigger the Popover. The showPopover function is called when the button is pressed, displaying the content inside the Popover. The bodyBuilder parameter is used to build the content of the Popover, and the onPop callback is called when the Popover is dismissed.
Step 4: Run the app:
Run your Flutter app to see the Popover in action. When you tap the button, the Popover should appear above the content.
Sample Code:
import 'package:flutter/material.dart';
import 'package:popover/popover.dart';
class PopoverExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
centerTitle: true,
elevation: 2,
title: Text(
"Popover Example",
style: TextStyle(fontSize: 22, color: Colors.black, fontWeight: FontWeight.w500),
),
backgroundColor: Colors.blue[200],
),
// appBar: AppBar(title: const Text('Popover Example')),
body: const SafeArea(
child: Padding(
padding: EdgeInsets.all(16),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: [
SizedBox(
height: 150,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.max,
children: [
Button(),
Button(),
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,
backgroundColor: Colors.white,
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')),
),
const Divider(),
Container(
height: 50,
color: Colors.amber[400],
child: const Center(child: Text('Entry D')),
),
const Divider(),
Container(
height: 50,
color: Colors.amber[500],
child: const Center(child: Text('Entry E')),
),
const Divider(),
Container(
height: 50,
color: Colors.amber[600],
child: const Center(child: Text('Entry F')),
),
],
),
);
}
}
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('Back'),
),
),
);
}
}
Output:
Conclusion:
By following these steps, you can implement a Popover in Flutter using the flutter_popover package. This allows you to create a small, contextual window for displaying additional information or actions in your Flutter app.
