1
resposta

[Projeto] Desafio: Pontos da Conta

Criei esse map de cores no 'theme_colors'

  static const accountPoints = {
    'freeDelivery': Color.fromRGBO(250, 0, 112, 1),
    'streaming': Color.fromRGBO(75, 89, 191, 1),
  };

O código da nova sessão ficou assim:

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.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.only(bottom: 16.0),
            child: Text(
              'Pontos da Conta',
              style: Theme.of(context).textTheme.titleMedium,
            ),
          ),
          const BoxCard(boxContent: _AccountPointsContent())
        ],
      ),
    );
  }
}

class _AccountPointsContent extends StatelessWidget {
  const _AccountPointsContent();

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Text(
          'Pontos totais:',
        ),
        Text(
          '3000',
          style: Theme.of(context).textTheme.bodyLarge,
        ),
        const Padding(
          padding: EdgeInsets.symmetric(vertical: 8.0),
          child: ContentDivision(),
        ),
        const Text('Objetivos:'),
        Row(
          children: [
            Padding(
              padding: const EdgeInsets.only(right: 8.0, bottom: 8.0, top: 8.0),
              child: ColorDot(color: ThemeColors.accountPoints['freeDelivery']),
            ),
            const Text('Entrega Grátis: 15000pts'),
          ],
        ),
        Row(
          children: [
            Padding(
              padding: const EdgeInsets.only(right: 8.0),
              child: ColorDot(color: ThemeColors.accountPoints['streaming']),
            ),
            const Text('1 mês de streaming: 30000pts'),
          ],
        )
      ],
    );
  }
}

Dai é só chamar na home

Resultado:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

1 resposta

Olá, Murilo, tudo bem?

Mandou muito bem no desafio! É ótimo ver você colocando em prática os conceitos aprendidos. Continue compartilhando suas conquistas por aqui, isso enriquece o aprendizado de todos.

Siga firme nos seus estudos e conte com o fórum sempre que precisar!

Abraços :)