In AppBar I have kept an icon. When I click on that icon it should open a popup with pointing arrow. That popup should display below the icon only. Should not overlap on that image. And that dropdown should able to customise according to any UI. Please find the attached image.
I don't want to use any plugin.
You can use the Stack Widget to overlap this bubble, and change dynamically the visibility.
//if the bubble is visible or not
bool isVisible = false;
@override
Widget build(BuildContext context) {
return Material(
child: Stack(
children: [
Scaffold(
appBar: AppBar(
backgroundColor: Colors.grey[50],
actions: [
Padding(
padding: const EdgeInsets.only(right: 15),
child: IconButton(
icon: Icon(
Icons.add_alert_rounded,
color: Colors.black,
),
onPressed: () {
setState(() {
isVisible = !isVisible;
});
},
),
),
],
),
body: Container(),
),
Positioned(
top: 72, //considering the app bar and system status bar height
right: 10,
child: Visibility(
visible: isVisible,
child: Stack(
children: [
Positioned( //the diamond behind the content
top: 0,
right: 20,
child: Transform.rotate(
angle: math.pi / 4, //rotating the container to turn it into a diamond
child: Container(
width: 20,
height: 20,
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.grey[400],
blurRadius: 5.0,
)
],
),
),
),
),
Container(
height: 40.0,
width: 200,
margin: const EdgeInsets.only(top: 5.0),
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.grey[400],
blurRadius: 3.0,
offset: Offset(0, 4.0),
),
],
borderRadius: BorderRadius.circular(5.0),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
//just to represent the content of the bubble
Container(
padding: const EdgeInsets.all(4.0),
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.circular(10.0),
),
child: Text(
'number',
style: TextStyle(color: Colors.white),
),
),
Container(
padding: const EdgeInsets.all(4.0),
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.circular(10.0),
),
child: Text(
'5000',
style: TextStyle(color: Colors.white),
),
),
],
),
),
],
),
),
),
],
),
);
}
