Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Dúvida] Não consigo centralizar o Icon dentro do meu Elevated Button

https://ibb.co/fdVTDHV

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Academia'),
          centerTitle: true,
        ),
        body: ListView(
          children: [Treinos(50)],
        ),
      ),
    );
  }
}

class Treinos extends StatefulWidget {
  int peso;

  Treinos(this.peso, {super.key});

  @override
  State<Treinos> createState() => _TreinosState();
}

class _TreinosState extends State<Treinos> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Stack(
        children: [
          Container(
            height: 300,
            color: Colors.green,
          ),
          Column(
            children: [
              Container(
                color: Colors.white54,
                height: 150,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [Text('Teste')],
                ),
              ),
              Container(
                color: Colors.black,
                height: 50,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    Container(
                        height: 30,
                        width: 30,
                        alignment: Alignment.center,
                        child: ElevatedButton(
                          style: ButtonStyle(
                              backgroundColor:
                                  MaterialStateProperty.all(Colors.red)),
                          onPressed: () {
                            setState(() {
                              (widget.peso > 0)
                                  ? widget.peso--
                                  : widget.peso = 0;
                            });
                          },
                          child: Column(
                            children: [Icon(Icons.arrow_drop_down)],
                          ),
                        )),
                    Text(
                      'Peso: ${widget.peso}',
                      style: TextStyle(fontSize: 20, color: Colors.white),
                    ),
                  ],
                ),
              ),
              Container(
                color: Colors.blue,
                height: 100,
              )
            ],
          )
        ],
      ),
    );
  }
}
2 respostas

Olá, Lucas!

Pelo que entendi, você está com dificuldades para centralizar o ícone dentro do seu ElevatedButton, certo? Vou te ajudar com isso!

Para tentar centralizar o ícone dentro do ElevatedButton, você pode adicionar o parâmetro "alignment" no seu ElevatedButton e definir a propriedade "Alignment.center". Assim, o ícone ficará centralizado verticalmente e horizontalmente dentro do botão.

Você pode fazer essa modificação no seu código da seguinte forma:

ElevatedButton(
  style: ButtonStyle(
    backgroundColor: MaterialStateProperty.all(Colors.red),
  ),
  onPressed: () {
    setState(() {
      (widget.peso > 0) ? widget.peso-- : widget.peso = 0;
    });
  },
  child: Column(
    children: [
      Icon(Icons.arrow_drop_down),
    ],
  ),
  alignment: Alignment.center,
)

Com essa alteração, o ícone ficará centralizado dentro do ElevatedButton.

Espero ter ajudado e bons estudos!

solução!

Olá, infelizmente o 'alignment' não é uma propriedade disponível dentro do ElevatedButton, mas descobri a solução:

Dentro do ButtonStyle ele aceita um padding de simetria:

                          style: ButtonStyle(
                              backgroundColor: MaterialStateProperty.all(Colors.red),
                              padding: MaterialStateProperty.all<EdgeInsets>(EdgeInsets.symmetric())