Как получить текст со значком в центре Flutter? - PullRequest
Новая
       0

Как получить текст со значком в центре Flutter?

2 голосов
/ 30 мая 2020

Я использую пакет fab_circular_menu . Этот пакет предназначен для анимированной плавающей кнопки действия, которая открывает круговое меню. в нем я хочу видеть виджет в качестве пункта меню, чтобы внизу был значок и текст. значок центрируется по центру текста.

например

Icon with text centered

Как я могу этого добиться, на данный момент я использую приведенный ниже код но он плохо работает с другим размером экрана. 

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

Ответы [ 4 ]

2 голосов
/ 30 мая 2020

Вы можете достичь этого результата с помощью виджета Column вместо Stack.

Вот пример: 

.....

Column(
       mainAxisAlignment: MainAxisAlignment.center,
       crossAxisAlignment: CrossAxisAlignment.center,

       children: <Widget>[
                Icon(Icons.power_settings_new),
                 Text('Logout'),

                ],
      ),
2 голосов
/ 30 мая 2020

Другое решение, которое можно использовать разными способами 

   Wrap(
        direction: Axis.vertical,
          crossAxisAlignment: WrapCrossAlignment.center,
        children: <Widget>[
          Icon(Icons.power_settings_new),
          Text('Logout'),
        ],
      ),
1 голос
/ 30 мая 2020

enter image description here

Короткий ответ: 

Column(
  mainAxisSize: MainAxisSize.min,
  children: [
    Icon(Icons.call),
    SizedBox(height: 4), // spacing between two
    Text('Call Icon'),
  ],
)

Длинный ответ:

Скопируйте этот класс: 

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),
        ],
      ),
    );
  }
}

Использование: 

TextWithIcon(
  icon: Icons.call,
  spacing: 6, // Space between icon and text
  text: 'Call Icon',
)
1 голос
/ 30 мая 2020

Вы можете использовать для этого столбцы, например: 

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