3
respostas

[Projeto] [Desafio] Ultimo box card

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/

3 respostas

Scrernshots:

Primeiro print, com o card ultrapassando a tela Segundo print, com o card completo

Fala Gabriel!

Ficou bem legal esse seu projeto cara! Parabens

Muito obrigado!