I’m attempting to place this round expandable button to the bottom-right of the display screen. I do know I can add MainAxisAlignment: Alignment.finish or no matter, however that makes it in order that solely half the button is clickable. Is there another approach to do it?
Right here is a picture: Picture
Right here is my code:
Positioned(
prime: 10,
baby: Container(
top: measurement.top - measurement.top * .11,
width: measurement.width,
ornament: BoxDecoration(shade: Colours.white),
baby: Padding(
padding: EdgeInsets.all(10),
baby: Align(
alignment: Alignment.bottomRight,
baby: Column(
youngsters: [
if (_isExpanded)
_buildOptionButton(Icons.dangerous, 'Dangerous'),
if (_isExpanded)
_buildOptionButton(Icons.delete, 'Delete'),
if (_isExpanded)
_buildOptionButton(Icons.edit, 'Edit'),
SizedBox(
height: size.height * .11,
child: ElevatedButton(
onPressed: () => {
setState(() => {
_isExpanded = !_isExpanded,
_isOptionButtonVisible =
!_isExpanded,
if (_isExpanded)
{_animationController.forward()}
else
{_animationController.reverse()}
})
}, // Corrected onPressed callback
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(100.0)),
primary: Color.fromARGB(255, 100, 100, 100),
),
child: AnimatedBuilder(
animation: _animationController,
builder: (context, child) {
return Transform.rotate(
angle: _animationController.value *
0.5 *
3.1415,
child: Icon(
_isExpanded ? Icons.close : Icons.add,
),
);
},
)),
),
],
),
),
),
),
),
EDIT: Right here is the _buildOptionButton technique
Widget _buildOptionButton(IconData iconData, String tooltip) {
return Padding(
padding: const EdgeInsets.solely(backside: 8.0),
baby: FloatingActionButton(
backgroundColor: Shade.fromARGB(255, 100, 100, 100),
heroTag: tooltip,
onPressed: () {
print('Motion carried out for $tooltip');
},
tooltip: tooltip,
baby: Icon(iconData),
),
);
}
Thanks!!!