Making a speedial without FloatingActionButton - flutter

Question

im trying to make my button open up something similar to this: FAB version of what i want
This is what my code looks like:
return Card(
color: Colors.yellow[100],
child: ListTile(
trailing: IconButton(icon: Icon(Icons.more_vert),
onPressed: () {},
),
leading: Text(document['date'] + '\n' + document['time'], textAlign: TextAlign.center,),
subtitle: Text(
'Loctaion: ' + document['location'],
),
title: Text(document['name'],
textAlign: TextAlign.left, style: TextStyle(fontSize: 20.0)),
),
);
}
I want the IconButton to open up something similar to the SpeedDial, to make the user choose between accept, deny, or choose later for the event.
My ListTile with the Icon.more_vert that i want to be able to open a speeddial

Answer 1

You can copy paste run full code below
You can use https://pub.dev/packages/flutter_portal
Basically use Overlay and show circle button
You can change childAnchor and menuAnchor, and circle button size per your request
It's too long to describe all the detail, please see working demo and full code below
code snippet
ListTile(
trailing: IconButton(
icon: Icon(Icons.more_vert),
onPressed: () => setState(() => showMenu = true),
),
...
return ModalEntry(
visible: showMenu,
onClose: () => setState(() => showMenu = false),
childAnchor: Alignment.topRight,
menuAnchor: Alignment.bottomRight,
menu: Menu(
children: [
ClipOval(
child: Material(
color: Colors.blue, // button color
child: InkWell(
splashColor: Colors.red, // inkwell color
onTap: () {
setState(() => showMenu = false);
},
child: SizedBox(width: 40, height: 40, child: Icon(Icons.menu)),
),
),
),
working demo
full code
import 'package:flutter/material.dart';
import 'package:flutter_portal/flutter_portal.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
builder: (_, child) => Portal(child: child),
home: Scaffold(
appBar: AppBar(
title: const Text('Example'),
),
body: Container(
padding: const EdgeInsets.all(10),
alignment: Alignment.centerLeft,
child: ContextualMenuExample(),
),
),
);
}
}
class ContextualMenuExample extends StatefulWidget {
ContextualMenuExample({Key key}) : super(key: key);
#override
_ContextualMenuExampleState createState() => _ContextualMenuExampleState();
}
class _ContextualMenuExampleState extends State<ContextualMenuExample> {
bool showMenu = false;
#override
Widget build(BuildContext context) {
return ModalEntry(
visible: showMenu,
onClose: () => setState(() => showMenu = false),
childAnchor: Alignment.topRight,
menuAnchor: Alignment.bottomRight,
menu: Menu(
children: [
ClipOval(
child: Material(
color: Colors.blue, // button color
child: InkWell(
splashColor: Colors.red, // inkwell color
onTap: () {
setState(() => showMenu = false);
},
child: SizedBox(width: 40, height: 40, child: Icon(Icons.menu)),
),
),
),
ClipOval(
child: Material(
color: Colors.blue, // button color
child: InkWell(
splashColor: Colors.red, // inkwell color
onTap: () {
setState(() => showMenu = false);
},
child: SizedBox(
width: 40, height: 40, child: Icon(Icons.description)),
),
),
),
ClipOval(
child: Material(
color: Colors.blue, // button color
child: InkWell(
splashColor: Colors.red, // inkwell color
onTap: () {
setState(() => showMenu = false);
},
child: SizedBox(
width: 40, height: 40, child: Icon(Icons.settings)),
),
),
)
],
),
child: Container(
child: Card(
color: Colors.yellow[100],
child: ListTile(
trailing: IconButton(
icon: Icon(Icons.more_vert),
onPressed: () => setState(() => showMenu = true),
),
leading: Text(
"date time",
textAlign: TextAlign.center,
),
subtitle: Text(
'Loctaion',
),
title: Text('name',
textAlign: TextAlign.left, style: TextStyle(fontSize: 20.0)),
),
),
),
);
}
}
class Menu extends StatelessWidget {
const Menu({
Key key,
#required this.children,
}) : super(key: key);
final List<Widget> children;
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(left: 10),
child: Card(
elevation: 8,
child: IntrinsicWidth(
child: Column(
mainAxisSize: MainAxisSize.min,
children: children,
),
),
),
);
}
}
class ModalEntry extends StatelessWidget {
const ModalEntry({
Key key,
this.onClose,
this.menu,
this.visible,
this.menuAnchor,
this.childAnchor,
this.child,
}) : super(key: key);
final VoidCallback onClose;
final Widget menu;
final bool visible;
final Widget child;
final Alignment menuAnchor;
final Alignment childAnchor;
#override
Widget build(BuildContext context) {
return GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: visible ? onClose : null,
child: PortalEntry(
visible: visible,
portal: menu,
portalAnchor: menuAnchor,
childAnchor: childAnchor,
child: IgnorePointer(
ignoring: visible,
child: child,
),
),
);
}
}