CODEWITHSUNDEEP
flutter
Sarvesh Bhatnagar
Sarvesh Bhatnagar

Reputation: 1122

How to have Text with Icon in center Flutter?

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.

Icon with text centered

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'),
                  ),
                ],
      ),
 ),

Upvotes: 3

Views: 3271

Answers (4)

CopsOnRoad
CopsOnRoad

Reputation: 267384

enter image description here

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',
)

Upvotes: 2

Jitesh Mohite
Jitesh Mohite

Reputation: 34170

Another Solution which could use in many ways

   Wrap(
        direction: Axis.vertical,
          crossAxisAlignment: WrapCrossAlignment.center,
        children: <Widget>[
          Icon(Icons.power_settings_new),
          Text('Logout'),
        ],
      ),

Upvotes: 4

Ketan Ramteke
Ketan Ramteke

Reputation: 10651

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'),

                ],
      ),

Upvotes: 2

Sirus
Sirus

Reputation: 143

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'),  
                ],
      ),
 ),

Upvotes: 1

Related Questions