[Projeto] [Desafio] Criando o último BoxCard

Comecei adicionando mais duas cores de dots no arquivo theme_colors.dart ao criar o map "pontuation":

import 'package:flutter/material.dart';

class ThemeColors {
  static const MaterialColor primaryColor = Colors.purple;
  static const List<Color> headerGradient = [
    Color.fromRGBO(103, 99, 234, 1.0),
    Color.fromRGBO(155, 105, 254, 1.0),
    Color.fromRGBO(195, 105, 255, 1.0),

  ];
  //cor dos dots vai ser em map{}, pois cada dot vai ter uma chave com sua cor
  static const recentActivity = {
    'spent': Color.fromRGBO(255, 175, 29, 1.0),
    'income': Color.fromRGBO(191, 69, 29, 1.0),
  };

  static const division = Color.fromRGBO(166, 166, 166, 1.0);
 
  static const pontuation = {
    'free points': Color.fromRGBO(250, 0, 112, 1.0),
    'streaming': Color.fromRGBO(75, 89, 191, 1.0),
  };

}

Criei o arquivo "account_points.dart" em lib/components/sections/ para então começar a criar o último BoxCard.

Fiz uma Column() para "Pontos da Conta" no StatelessWidget "AccountPoints".

Em seguida, criei o StatelessWidget "_AccountPoints" (privado) para criar o BoxCard separado e acessá-lo de forma segura em "AccountPoints".

Adicionei um Padding() ao text "Entrega grátis: 15000pts" buscando uma apresentação mais fiel ao projeto no Figma.

import 'package:alubank/components/box_card.dart';
import 'package:alubank/components/color_dot.dart';
import 'package:alubank/components/content_division.dart';
import 'package:flutter/material.dart';
import '../../themes/theme_colors.dart';

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

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      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,
            ),
          ),
            const BoxCard(boxContent: _AccountPoints())
        ],
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Padding(
          padding: EdgeInsets.only(bottom: 8.0),
          child: Text('Pontos Totais:'),
        ),
        Text(
          '3000',
          style: Theme.of(context).textTheme.bodyLarge,
        ),
        const Padding(
          padding: EdgeInsets.only(top: 8.0, bottom: 8.0),
          child: ContentDivision(),
        ),
        Padding(
          padding: const EdgeInsets.only(bottom: 8.0),
          child: Text(
            'Objetivos:',
            style: Theme.of(context).textTheme.titleMedium,
          ),
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Padding(
              padding: const EdgeInsets.only(right: 4.0),
              child: ColorDot(
                color: ThemeColors.pontuation['free points'],
              ),
            ),
            const Padding(
              padding: EdgeInsets.only(bottom: 4.0),
              child: Text(
                'Entrega grátis: 15000pts',
              ),
            )
          ],
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Padding(
              padding: const EdgeInsets.only(right: 4.0),
              child: ColorDot(
                color: ThemeColors.pontuation['streaming'],
              ),
            ),
            const Text(
              '1 mês de streaming: 30000pts',
            )
          ],
        ),
      ],
    );
  }
}

Em lib/screens/home.dart adicionei o AccountsPoints() ao Scaffold() do Widget Home. Para evitar overflow da tela, adicionei um ListView() ao body do Scaffold().

import 'package:alubank/components/sections/account_actions.dart';
import 'package:alubank/components/sections/account_points.dart';
import 'package:alubank/components/sections/header.dart';
import 'package:alubank/components/sections/recent_activity.dart';
import 'package:flutter/material.dart';


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

  @override
  Widget build(BuildContext context) {
    return Scaffold(body: ListView(
      children: const [
        Header(),
        RecentActivity(),
        AccountActions(),
        AccountPoints(),
      ],
    ),);
  }
}