1
resposta

[Dúvida] URL da imagem inserida no TextFormField não está carregando no container da imagem

Pessoal, por algum motivo minha imagem não está sendo carregada ao inserir a url. O projeto está no GitHub aqui

Aparentemente está correto o código abaixo, alguma sugestão ou ideia que possa estar acontecendo?

import 'package:flutter/material.dart';

class FormScreen extends StatefulWidget {
  const FormScreen({Key? key}) : super(key: key);

  @override
  State<FormScreen> createState() => _FormScreenState();
}

class _FormScreenState extends State<FormScreen> {
  TextEditingController nameController = TextEditingController();
  TextEditingController difficultyController = TextEditingController();
  TextEditingController imageController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Nova Tarefa'),
      ),
      body: Center(
        child: Container(
          height: 650,
          width: 375,
          decoration: BoxDecoration(
            color: Colors.black12,
            borderRadius: BorderRadius.circular(10),
            border: Border.all(width: 3),
          ),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: TextFormField(
                  controller: nameController,
                  textAlign: TextAlign.center,
                  decoration: InputDecoration(
                    border: OutlineInputBorder(),
                    hintText: 'Nome',
                    fillColor: Colors.white70,
                    filled: true,
                  ),
                ),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: TextFormField(
                  controller: difficultyController,
                  textAlign: TextAlign.center,
                  decoration: InputDecoration(
                    border: OutlineInputBorder(),
                    hintText: 'Dificuldade',
                    fillColor: Colors.white70,
                    filled: true,
                  ),
                ),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: TextFormField(
                  onChanged: (text){
                    setState(() {

                    });
                  },
                  controller: imageController,
                  textAlign: TextAlign.center,
                  decoration: InputDecoration(
                    border: OutlineInputBorder(),
                    hintText: 'Imagem',
                    fillColor: Colors.white70,
                    filled: true,
                  ),
                ),
              ),
              Container(
                height: 100,
                width: 72,
                decoration: BoxDecoration(
                  color: Colors.blue,
                  borderRadius: BorderRadius.circular(10),
                  border: Border.all(width: 2, color: Colors.blue),
                ),
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(10),
                  child: Image.network(
                    imageController.text,
                    errorBuilder: (BuildContext context,Object exception,StackTrace? stackTrace){
                      return Image.asset('assets/images/nophoto.png');
                    },
                    fit: BoxFit.cover,
                  ),
                ),
              ),
              ElevatedButton(
                onPressed: () {
                  print(nameController.text);
                  print(int.parse(difficultyController.text));
                  print(imageController.text);
                },
                child: Text('Adicionar!'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
1 resposta

Olá, Bruno!

Pelo código que você compartilhou, parece que você está no caminho certo para carregar a imagem a partir da URL inserida no TextFormField. No entanto, pode haver alguns problemas que estão impedindo a imagem de ser exibida corretamente.

Uma possível solução é verificar se a URL da imagem está correta e se a imagem está disponível no servidor. Além disso, certifique-se de que você está atualizando o estado do widget quando o texto do TextFormField é alterado.

Uma sugestão é adicionar um setState no onChanged do TextFormField para atualizar o estado do widget sempre que o texto for alterado. Dessa forma, a imagem será atualizada em tempo real de acordo com a URL inserida.

onChanged: (text) {
  setState(() {
    // atualize o estado do widget aqui
  });
},

Outra sugestão é adicionar um if para verificar se a URL da imagem é válida antes de exibi-la. Se a URL for inválida ou a imagem não estiver disponível, você pode exibir uma imagem de fallback, como a imagem "nophoto.png" que você mencionou.

child: ClipRRect(
  borderRadius: BorderRadius.circular(10),
  child: Image.network(
    imageController.text,
    errorBuilder: (BuildContext context, Object exception, StackTrace? stackTrace) {
      return Image.asset('assets/images/nophoto.png');
    },
    fit: BoxFit.cover,
  ),
),

Certifique-se também de que a URL da imagem esteja sendo inserida corretamente no TextFormField. Verifique se não há espaços em branco ou caracteres inválidos na URL.

Espero que essas sugestões possam ajudar a resolver o problema da imagem não estar sendo carregada. Se tiver mais alguma dúvida, é só me dizer! Espero ter ajudado e bons estudos!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software