1
resposta

[Projeto] Final do projeto Alubank

Acabei de finalizar a aula e realizei o desafio. Esse foi o código que usei pra chegar no resultado apresentado no figma.

class AccountPoints extends StatelessWidget {
  const AccountPoints({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const Padding(
      padding: EdgeInsets.all(16.0),
      child: _AccountPointsContent(),
    );
  }
}

class _AccountPointsContent extends StatelessWidget {
  const _AccountPointsContent({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return 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:',),
              ),
              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(
                children: [
                  Padding(
                    padding: const EdgeInsets.only(top: 8.0, right: 4.0, bottom: 8.0,),
                    child: ColorDot(
                      colorDot: ThemeColors.accountPoints['freeDelivery'],
                    ),
                  ),
                  const Text(
                    'Entrega grátis: 15000pts',
                  ),
                ],
              ),
              Row(
                children: [
                  Padding(
                    padding: const EdgeInsets.only(top: 8.0, right: 4.0, bottom: 8.0,),
                    child: ColorDot(
                      colorDot: ThemeColors.accountPoints['oneMStreaming'],
                    ),
                  ),
                  const Text(
                    '1 mês de streaming: 300000pts',
                  ),
                ],
              ),
            ],
          ),
        ),
      ],
    );
  }
}

E na classe Home, substituí o Column por um ListView para que não desse erro de overflow.

class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

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

O resultado foi esse. ![](Imagem do projeto do curso, última etapa da tela )

1 resposta

Fala Vitor, de boa ?

Cara primeiramente parabéns por conseguir chegar até esse ponto, seu app ficou extramemente bonito e o código está bem bacana!

O ideal é continuar praticando o máximo que puder, criando aplicativos que tu acredite que faça sentido e conte conosco pro que precisar nessa sua jornada :)