3
respostas

Fazer apaecer a descrição de um Icon

Olá. Estou desenvolvendo um menu utilizando o flutter. Eu gostaria de saber como fazer( se for possível) para aparecer uma mensagem específica , ao passar o mouse por cima do ícone. Segue abaixo o código que fiz. Os ícons aparecerão dentro dessa row. O segundo método gera os icons da forma que preciso

PortalAppBar

return Row(
      children: <Widget>[
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Image.asset('images/salCisne.jpeg', width: 40, height: 40),
        ),
        new Expanded(
          child: RichText(
            text: new TextSpan(
              children: <TextSpan>[
                new TextSpan(
                  text: title.toUpperCase(),
                  style: textStyle(Color.fromRGBO(0xFF, 0xFF, 0xFF, 1)),
                )
              ],
            ),
          ),
        ),
        IconItem(Icons.home,principalMenu),
        IconItem(Icons.book,manuaisMenu),
        IconItem(Icons.phone,faleMenu),

IconItem

class IconItem extends StatelessWidget {
  final IconData iconItem;
  final String descricao;

  IconItem(this.iconItem, this.descricao);

  @override
  Widget build(BuildContext context) {
    return Padding(
        padding: const EdgeInsets.all(17.0),
        child: Expanded(
          child: Icon(
            iconItem,
            color: Colors.white,
            semanticLabel: descricao,
          ),
        ));
  }
}

3 respostas

Olá Raphael, tudo bem com você?

Então, temos um widget específico para esse tipo de acessibilidade que é o Tolltipque tem o parâmetro necessário message que é responsável pela descrição que você pretende colocar, para isso precisamos apenas colocar o nosso icone dentro dele:

Tooltip(
            message: "Ir para a Home",
            child: Icon(
              iconItem,
              color: Colors.black,
            ),
          ),

Dessa forma quando o usuário pressionar levemente o icone terá um label contendo a mensagem, e dentro do flutter web apenas ao passar o mouse teremos a mensagem :)

Aqui um pequeno exemplo do efeito criado por esse Widget :)

E também veja que o Expandedque você colocou sendo filho do Padding é inválido, por padrão ele só pode ser filho de Column, Row ou Flex :)

Abraços e Bons Estudos!

Ola Geovani. Muito obrigado pela resposta. Eu acabei resolvendo, utilizando o widget IconButton. Nele existe essa propriedade tooltip.

Valeu!

Opa :)

Isso ai, quando queremos transformar os ícones em botões temos o IconButton, e podemos deixar o Tooltip principalmente para imagens e coisas afins :)

Abraços!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software