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!