Pra resolver o desafio começei incluíndo mais duas cores para os pontos:
enum DotColors {
spent(color: Color.fromRGBO(255, 175, 29, 1)),
income(color: Color.fromRGBO(191, 69, 198, 1)),
delivery(color: Color.fromRGBO(250, 0, 112, 1)),
streaming(color: Color.fromRGBO(75, 89, 191, 1));
final Color color;
const DotColors({required this.color});
}
Criando mais um arquivo em components/sections
o account_points.dart
com o seguinte código:
import 'package:alubank/components/box_card.dart';
import 'package:alubank/components/color_dot.dart';
import 'package:alubank/components/content_division.dart';
import 'package:alubank/themes/theme_colors.dart';
import 'package:flutter/material.dart';
class AccountPoints extends StatelessWidget {
const AccountPoints({super.key});
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(bottom: 16.0),
child: Text(
'Pontos da Conta',
style: Theme.of(context).textTheme.titleMedium,
),
),
BoxCard(
boxContent: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Padding(
padding: EdgeInsets.only(bottom: 8.0),
child: Text('Pontos totais:'),
),
Padding(
padding: const EdgeInsets.only(bottom: 8.0),
child: Text(
'3000',
style: Theme.of(context).textTheme.bodyLarge,
),
),
const ContentDivision(),
Padding(
padding: const EdgeInsets.only(bottom: 8.0),
child: Text(
'Objetivos:',
style: Theme.of(context).textTheme.titleMedium,
),
),
_ObjectivePoints(
color: DotColors.delivery.color,
text: 'Entrga gratis: 15000pts',
),
_ObjectivePoints(
color: DotColors.streaming.color,
text: '1 mês de streaming: 30000pts',
),
],
),
),
],
));
}
}
class _ObjectivePoints extends StatelessWidget {
final Color color;
final String text;
const _ObjectivePoints({required this.color, required this.text});
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(bottom: 8.0),
child: Row(
children: [
ColorDot(color: color),
Text(text),
],
),
);
}
}
Só que o card ultrapassa o tamanho de tela, gerando um erro de overflow. Para resolver isso adicionei um SingleChildScrollView
na coluna do HomeScreen
:
return Scaffold(
body: SingleChildScrollView(
child: Column(
children: const [
Header(),
RecentActivity(),
AccountActions(),
AccountPoints(),
],
),
),
);
Repo do GitHub: https://github.com/blandygbc/alubank/