Botoões redondos

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

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: Scaffold(
appBar: AppBar(
leading: Container(),
title: Text('Flutter: Tarefas'),
backgroundColor: Colors.blue,
),
body: ListView(
children: [
Task(
'Aprender flutter',
'https://pbs.twimg.com/media/Eu7m692XIAEvxxP?format=png&name=large',
),
Task('Meditar', ''),
Task('Comer chocolate', ''),
],
),
floatingActionButton: FloatingActionButton(
onPressed: () {},
backgroundColor: Colors.blue,
child: const Icon(Icons.add),
),
),
);
}
}

class Task extends StatefulWidget {
final String nome;
final String foto;

const Task(this.nome, this.foto, {super.key});

@override
State createState() => _TaskState();
}

class _TaskState extends State {
int nivel = 0;

@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Stack(
children: [
Container(color: Colors.blue, height: 140),
Column(
children: [
Container(
color: Colors.white60,
height: 100,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
color: Colors.black26,
width: 72,
height: 100,
child: Image.network(widget.foto, fit: BoxFit.cover),
),
Container(
width: 200,
child: Text(
widget.nome,
style: const TextStyle(
fontSize: 24,
overflow: TextOverflow.ellipsis,
),
),
),
SizedBox(
height: 50,
width: 50,
child: ElevatedButton(
onPressed: () {
setState(() {
nivel++;
});
print(nivel);
},
child: Column(
children: [
Icon(Icons.arrow_drop_up),
Text('Up', style: TextStyle(fontSize: 10)),
],
),
),
),
],
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: const EdgeInsets.all(8),
child: SizedBox(
width: 200,
child: LinearProgressIndicator(
color: Colors.white,
value: nivel / 10,
),
),
),
Padding(
padding: const EdgeInsets.all(8),
child: Text(
'Nível: $nivel',
style: const TextStyle(color: Colors.white, fontSize: 16),
),
),
],
),
],
),
],
),
);
}
}

Olá, Bruna!

Sua pergunta é excelente, e a forma mais simples e elegante de criar botões redondos no Flutter é usando o ElevatedButton.

Para fazer isso, você precisa usar o styleFrom para personalizar a aparência do botão. O segredo está na propriedade shape, que permite definir a forma do botão.

Aqui está um exemplo de código que você pode usar:

ElevatedButton(
  onPressed: () {
    // Ação do botão
  },
  style: ElevatedButton.styleFrom(
    shape: const CircleBorder(),
    padding: const EdgeInsets.all(20), // Ajuste o tamanho do padding para o tamanho do seu botão
  ),
  child: const Icon(Icons.add), // O ícone ou widget que você quiser dentro do botão
)

No código acima:

ElevatedButton.styleFrom: Permite personalizar a aparência do botão.

shape: const CircleBorder(): Esta é a propriedade que define a forma do botão para um círculo.

padding: const EdgeInsets.all(20): Você pode ajustar o preenchimento para controlar o tamanho do botão.

child: const Icon(Icons.add): Aqui você coloca o widget que será exibido dentro do botão.

Com essa abordagem, você terá um botão perfeitamente redondo.

Espero que essa dica ajude a continuar com os seus estudos de Flutter!