[Dúvida] Como adicionar cor aos meus botões sem usar primary property? | Flutter

tenho o código abaixo que estou criando dois botões que vão pra uma página x, gostaria de colocar cor neles, mas sem usar primary. como posso fazer?

E também gostaria de que quando clicar ir pra uma página de teste de fato, pode ser vazia, so queri saber como

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Botões'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => Page()),
                );
              },
              child: Text('Botão 1'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => Page()),
                );
              },
              child: Text('Botão 2'),
            ),
          ],
        ),
      ),
    );
  }
}

Oii, tudo bem?

Você pode usar a propriedade backgroundColor. Assim:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Botões Com Cor de Fundo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => Page()),
                );
              },
              style: ElevatedButton.styleFrom(
                backgroundColor: Color(0xFFF3D0D7),
              ),
              child: Text('Botão 1'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => Page()),
                );
              },
              style: ElevatedButton.styleFrom(
                backgroundColor: Color(0xFFFFEFEF),
              ),
              child: Text('Botão 2'),
            ),
          ],
        ),
      ),
    );
  }
}

class Page extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Nova Página'),
      ),
      body: Center(
        child: Text('Página Nova'),
      ),
    );
  }
}

A cor você pode mudar para qual desejar, basta mudar aqui:

 backgroundColor: Color(0xFFF3D0D7)

Basta pegar o código da cor e mudar a partir do segundo F. Por exemplo temos esse código:

(0xFFF3D0D7) se quiser mudar para um amarelo, basta buscar o código do amarelo que deseja e trocar:

(0xFFFFC470)

Agora sobre clicar e ir para uma página nova. Fiz da seguinte maneira:

Definição uma nova página (Page):
- Primeiro, defini uma classe Page que estende StatelessWidget. Essa classe representa a nova página que será exibida quando um dos botões for clicado;
- No método build da classe Page, configurei a aparência da nova página. Assim, estamos exibindo um Scaffold com um AppBar contendo o título "Nova Página" e um corpo centralizado contendo um widget de texto simples "Página Nova" (que você pode mudar depois para o que você desejar).
Navegação para a nova página:
- Ao clicar em um dos botões na tela inicial (HomePage), chamei Navigator.push pra abrir a nova página.
- Dentro do método onPressed do botão, usei Navigator.push pra adicionar a rota da nova página à pilha de rotas. O método push requer um contexto e uma rota.
- Usei MaterialPageRoute pra criar uma rota que irá animar a transição entre a página atual e a nova página.
- O construtor MaterialPageRoute requer um construtor de página que é uma função que retorna a nova página que será exibida.
Exibição da nova página:
- Após a navegação ser realizada, o Flutter gerencia automaticamente a transição entre a página atual (HomePage) e a nova página (Page).
- A nova página é renderizada na tela e a pessoa usuária pode interagir com o conteúdo.

O Flutter facilita a navegação entre páginas usando o conceito de roteamento e pilha de rotas, simplificando o processo de criação de aplicativos com várias telas.

Resultado:

gif mostrando o resultado da criação da ação de click para uma página nova

Espero ter te ajudado.

Um abraço e bons estudos.

Mergulhe em programação