Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] Problema com o tamanho do projeto

Fiz o código com base nos arquivos já feitos pelo professor, no entanto estou enfrentando um problema no qual o projeto não está tendo espaço suficiente para a finalização do desafio. Criei um novo arquivo chamado "account_points.dart", nele consiste todo o desafio (não sei se está correto).

// components/sections/account_points.dart
import 'package:estilizando_aula_1/components/box_card.dart';
import 'package:estilizando_aula_1/components/color_dot.dart';
import 'package:estilizando_aula_1/components/content_division.dart';
import 'package:estilizando_aula_1/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: [
          Text('Pontos da conta',
              style: Theme.of(context).textTheme.titleMedium),
          const BoxCard(
            boxContent: _AccountPointsContent(),
          ),
        ],
      ),
    );
  }
}

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

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

E na home, foi declarado a função:

// screens/home.dart
import 'package:estilizando_aula_1/components/sections/account_actions.dart';
import 'package:estilizando_aula_1/components/sections/account_points.dart';
import 'package:estilizando_aula_1/components/sections/header.dart';
import 'package:estilizando_aula_1/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: Column(
        children: <Widget>[
          Header(),
          RecentActivity(),
          AccountActions(),
          AccountPoints(),
        ],
      ),
    );
  }
}

![](Insira aqui a descrição dessa imagem para ajudar na acessibilidade )

Como posso resolver esse problema?

1 resposta
solução!

É um erro bastante comum, a tela "estourou" a quantidade de pixels

Para resolver esse problema, você pode usar alguns ajustes e ferramentas, como o SingleChildScrollView, Expanded, Flexible, ou ajustar os tamanhos e espaçamentos dos widgets para garantir que todos os elementos caibam corretamente na tela.

na Column da home screen vc pode envolver a column inteira com um dos widgets que listei acima, so com isso deve resolver

SingleChildScrollView

  • Função: Permite que um único filho seja rolável.
  • Uso: Quando o conteúdo pode exceder o tamanho da tela e precisa ser rolado vertical ou horizontalmente.

Expanded

  • Função: Expande um widget filho para preencher o espaço disponível no eixo principal de um Flex (como Row, Column).
  • Uso: Quando você quer que um widget ocupe o máximo de espaço possível no eixo principal.

Flexible

  • Função: Similar ao Expanded, mas permite flexibilidade adicional sobre como o filho deve ocupar o espaço disponível.
  • Uso: Quando você quer que um widget ocupe o espaço disponível, mas com a capacidade de ser menor que o espaço disponível se necessário.