How to have Text with Icon in center Flutter? - flutter

Question

I am using a package fab_circular_menu, That package is for an animated floating action button which opens up a circular menu. within it I want a widget as a menu item such that there is an icon and a text below. the icon is centered with text.
e.g.
How can I achieve this, as of now I am using the code below but it does not work well with different screen size.
FlatButton(
splashColor: Colors.transparent,
highlightColor: Colors.transparent,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(100),
),
padding: EdgeInsets.only(bottom: 15),
onPressed: () async {
await _auth.signOut().then((value) {
Navigator.of(context).popUntil((route) => route.isFirst);
});
},
child: Stack(
overflow: Overflow.visible,
children: <Widget>[
Icon(Icons.power_settings_new),
Positioned(
bottom: -12,
right: -10,
child: Text('Logout'),
),
],
),
),

Answer 1

Another Solution which could use in many ways
Wrap(
direction: Axis.vertical,
crossAxisAlignment: WrapCrossAlignment.center,
children: <Widget>[
Icon(Icons.power_settings_new),
Text('Logout'),
],
),

Answer 2

You can achieve this result with Column widget instead of Stack.
Here is the example:
.....
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Icon(Icons.power_settings_new),
Text('Logout'),
],
),

Answer 3

Short answer:
Column(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.call),
SizedBox(height: 4), // spacing between two
Text('Call Icon'),
],
)
Long answer:
Copy this class:
class TextWithIcon extends StatelessWidget {
final IconData icon;
final String text;
final double spacing;
const TextWithIcon({Key key, this.icon, this.text, this.spacing = 2}) : super(key: key);
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(8),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Icon(icon),
SizedBox(height: spacing),
Text(text),
],
),
);
}
}
Usage:
TextWithIcon(
icon: Icons.call,
spacing: 6, // Space between icon and text
text: 'Call Icon',
)

Answer 4

You can use columns for this like:
FlatButton(
splashColor: Colors.transparent,
highlightColor: Colors.transparent,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(100),
),
padding: EdgeInsets.only(bottom: 15),
onPressed: () async {
await _auth.signOut().then((value) {
Navigator.of(context).popUntil((route) => route.isFirst);
});
},
child: Column(
children: <Widget>[
Icon(Icons.power_settings_new),
SizedBox(height:10), // set height according to your needs
Text('Logout'),
],
),
),