3
respostas

[Bug] Problema com espaçamento do conteudo na tela

Gostaria de saber porque está dando esse espaçamento no final da tela. Sendo que ali deveria ser onde o card de previsões deveria estar. Ele está até com uma cor meio rosa. Não sei o motivo

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

class CardPrevisoes extends StatelessWidget {
  final List<PrevisaoTempo> previsoes;
  final bool ehNoite;

  const CardPrevisoes({
    Key? key,
    required this.previsoes,
    required this.ehNoite,
  }) : super(key: key);

  String escolherAnimacao(String? condicaoClimatica, bool ehNoite) {
    if (condicaoClimatica == null) {
      return ehNoite ? 'assets/noite.json' : 'assets/sol.json';
    }
    switch (condicaoClimatica.toLowerCase()) {
      case 'clouds':
        return ehNoite ? 'assets/nublado-noite.json' : 'assets/nuvem.json';
      case 'mist':
        return ehNoite ? 'assets/neblina-noite.json' : 'assets/neblina.json';
      case 'smoke':
        return ehNoite ? 'assets/neblina-noite.json' : 'assets/neblina.json';
      case 'haze':
        return ehNoite ? 'assets/neblina-noite.json' : 'assets/neblina.json';
      case 'fog':
        return ehNoite ? 'assets/neblina-noite.json' : 'assets/neblina.json';
      case 'rain':
        return ehNoite ? 'assets/chuva-noite.json' : 'assets/chuva.json';
      case 'drizzle':
        return ehNoite ? 'assets/chuva-noite.json' : 'assets/chuva.json';
      case 'shower rain':
        return ehNoite ? 'assets/chuva-noite.json' : 'assets/chuva.json';
      case 'thunderstorm':
        return ehNoite ? 'assets/trovao-noite.json' : 'assets/tempestade.json';
      case 'clear':
        return ehNoite ? 'assets/noite.json' : 'assets/sol.json';
      default:
        return ehNoite ? 'assets/noite.json' : 'assets/sol.json';
    }
  }

  @override
  Widget build(BuildContext context) {
    final Map<String, PrevisaoTempo> previsoesFiltradas = {};
    for (var previsao in previsoes) {
      if (!previsoesFiltradas.containsKey(previsao.diaSemana)) {
        previsoesFiltradas[previsao.diaSemana] = previsao;
      }
    }

    return Container(
      padding: EdgeInsets.symmetric(vertical: 30.0, horizontal: 20.0),
      margin: EdgeInsets.symmetric(vertical: 60.0, horizontal: 20.0),
      decoration: BoxDecoration(
        color: Colors.grey.shade200,
        borderRadius: BorderRadius.circular(20),
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: previsoesFiltradas.values.map((previsao) {
          return Column(
            children: [
              Lottie.asset(
                escolherAnimacao(previsao.condicaoClimatica, ehNoite),
                width: 40,
                height: 40,
              ),
              SizedBox(height: 2),
              Text(
                previsao.diaSemana,
                style: TextStyle(fontSize: 8, fontWeight: FontWeight.bold),
              ),
            ],
          );
        }).toList(),
      ),
    );
  }
}
3 respostas
class InputBusca extends StatefulWidget {
  final TextEditingController controlador;
  final Function(String) cidadeSelecionada;
  final String? nomeCidade;
  final bool ehNoite;

  InputBusca({required this.controlador, required this.cidadeSelecionada, required this.nomeCidade, required this.ehNoite});

  @override
  State<StatefulWidget> createState() => _InputBuscaState();
}

class _InputBuscaState extends State<InputBusca> {
  bool estaBuscando = false;
  final TextEditingController controladorBusca = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return estaBuscando ? _buildInputBusca() : _buildBotaoCidade();
  }

  Widget _buildBotaoCidade() {
    return GestureDetector(
      onTap: () {
        setState(() {
          estaBuscando = true;
        });
      },
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Icon(Icons.location_on, size: 30, color: widget.ehNoite ? Colors.white : Color(0xFF676767)),
          Text(
            widget.nomeCidade?.isNotEmpty == true
                ? widget.nomeCidade!
                : 'Cidade não encontrada',
            style: TextStyle(color: widget.ehNoite ? Colors.white : Color(0xFF676767), fontSize: 16),
          ),
        ],
      ),
    );
  }

  Widget _buildInputBusca() {
    controladorBusca.clear();
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        IconButton(
          icon: Icon(Icons.close, color: widget.ehNoite ? Colors.white : Color(0xFF676767)),
          onPressed: () {
            setState(() {
              estaBuscando = false;
            });
          },
        ),
        Container(
          padding: EdgeInsets.symmetric(horizontal: 16),
          child: TextField(
            controller: controladorBusca,
            style: TextStyle(
              color: widget.ehNoite ? Colors.white : Color(0xFF676767),
            ),
            decoration: InputDecoration(
              hintText: 'Digite o nome da cidade',
              hintStyle: TextStyle(
                color: widget.ehNoite ? Colors.white : Color(0xFF676767),
              ),
              border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(10),
              ),
              suffixIcon: Icon(Icons.search, color: widget.ehNoite ? Colors.white :  Color(0xFF676767),),
            ),
            onSubmitted: (nomeCidade) {
              widget.cidadeSelecionada(nomeCidade);
              setState(() {
                estaBuscando = false;
                widget.controlador.text = nomeCidade;
              });
            },
          ),
        ),
      ],
    );
  }
}
class CardPrevisoes extends StatelessWidget {
  final List<PrevisaoTempo> previsoes;
  final bool ehNoite;

  const CardPrevisoes({
    Key? key,
    required this.previsoes,
    required this.ehNoite,
  }) : super(key: key);

  String escolherAnimacao(String? condicaoClimatica, bool ehNoite) {
    if (condicaoClimatica == null) {
      return ehNoite ? 'assets/noite.json' : 'assets/sol.json';
    }
    switch (condicaoClimatica.toLowerCase()) {
      case 'clouds':
        return ehNoite ? 'assets/nublado-noite.json' : 'assets/nuvem.json';
      case 'mist':
        return ehNoite ? 'assets/neblina-noite.json' : 'assets/neblina.json';
      case 'smoke':
        return ehNoite ? 'assets/neblina-noite.json' : 'assets/neblina.json';
      case 'haze':
        return ehNoite ? 'assets/neblina-noite.json' : 'assets/neblina.json';
      case 'fog':
        return ehNoite ? 'assets/neblina-noite.json' : 'assets/neblina.json';
      case 'rain':
        return ehNoite ? 'assets/chuva-noite.json' : 'assets/chuva.json';
      case 'drizzle':
        return ehNoite ? 'assets/chuva-noite.json' : 'assets/chuva.json';
      case 'shower rain':
        return ehNoite ? 'assets/chuva-noite.json' : 'assets/chuva.json';
      case 'thunderstorm':
        return ehNoite ? 'assets/trovao-noite.json' : 'assets/tempestade.json';
      case 'clear':
        return ehNoite ? 'assets/noite.json' : 'assets/sol.json';
      default:
        return ehNoite ? 'assets/noite.json' : 'assets/sol.json';
    }
  }

  @override
  Widget build(BuildContext context) {
    final Map<String, PrevisaoTempo> previsoesFiltradas = {};
    for (var previsao in previsoes) {
      if (!previsoesFiltradas.containsKey(previsao.diaSemana)) {
        previsoesFiltradas[previsao.diaSemana] = previsao;
      }
    }

    return Container(
      padding: EdgeInsets.symmetric(vertical: 30.0, horizontal: 20.0),
      margin: EdgeInsets.symmetric(vertical: 60.0, horizontal: 20.0),
      decoration: BoxDecoration(
        color: Colors.grey.shade200,
        borderRadius: BorderRadius.circular(20),
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: previsoesFiltradas.values.map((previsao) {
          return Column(
            children: [
              Lottie.asset(
                escolherAnimacao(previsao.condicaoClimatica, ehNoite),
                width: 40,
                height: 40,
              ),
              SizedBox(height: 2),
              Text(
                previsao.diaSemana,
                style: TextStyle(fontSize: 8, fontWeight: FontWeight.bold),
              ),
            ],
          );
        }).toList(),
      ),
    );
  }
}

Olá, Breno, como vai?

O espaçamento extra no final da tela pode estar relacionado ao uso da propriedade margin na configuração do seu Container no widget CardPrevisoes. Você definiu um margin vertical de 60.0 (margin: EdgeInsets.symmetric(vertical: 60.0, horizontal: 20.0)) que pode estar causando esse espaço adicional. Tente reduzir ou remover o valor vertical para verificar se o problema é resolvido.

Além disso, a cor rosa pode indicar que o widget está exibindo a cor padrão para Lottie ou algo semelhante, caso haja falha ao carregar a animação. Verifique se os caminhos dos arquivos estão corretos, especialmente no método escolherAnimacao.

Espero ter ajudado!

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

Abraços :)

Caso este post tenha lhe ajudado, por favor, marcar como solucionado