using TextEditingController() to preview an Image URL in Flutter-CodePudding

I am trying to preview a random image from internet through its URL by using an Object of TextEditingController() & using that Object inside a TextFormField()'s controller argument but unfortunately it does not show it. i ran it inside a real device, emulator through web but it all gives me the same issue.

class _EditProductScreenState extends State<EditProductScreen> {
  final _imageUrlController = TextEditingController();
      body: Padding(
        padding: const EdgeInsets.all(12.0),
        child: Form(
          child: ListView(
            children: [
              Row(
                crossAxisAlignment: CrossAxisAlignment.end,
                children: [
                  Container(
                    margin: EdgeInsets.only(
                      top: 10,
                      right: 15,
                    ),
                    height: 100,
                    width: 100,
                    decoration: BoxDecoration(
                      border: Border.all(
                        width: 1,
                        color: Colors.grey,
                      ),
                    ),
                    //Condition here & the image box
                    child: _imageUrlController.text.isEmpty
                        ? Center(
                            child: Text(
                              "Enter an Image URL",
                              textAlign: TextAlign.center,
                            ),
                          )
                        : FittedBox(
                            child: Image.network(
                              _imageUrlController.text,
                              fit: BoxFit.cover,
                            ),
                          ),
                  ),
                  //The TextFormField() here
                  Expanded(
                    child: TextFormField(
                      decoration: InputDecoration(
                        label: Text("Image URL"),
                      ),
                      keyboardType: TextInputType.url,
                      textInputAction: TextInputAction.done,
                      controller: _imageUrlController,

CodePudding user response：

Please update your code with below code

@override
  void initState() {
    super.initState();
    // Start listening to changes.
    _imageUrlController.addListener((){
      setState((){
        text = _imageUrlController.text;
      });
    });
  }

Below is the layout changes:

 Row(crossAxisAlignment: CrossAxisAlignment.end, children: [
                Container(
                  margin: EdgeInsets.only(
                    top: 10,
                    right: 15,
                  ),
                  height: 100,
                  width: 100,
                  decoration: BoxDecoration(
                    border: Border.all(
                      width: 1,
                      color: Colors.grey,
                    ),
                  ),
                  //Condition here & the image box
                  child: (text?.isEmpty ?? false)
                      ? Center(
                          child: Text(
                            "Enter an Image URL",
                            textAlign: TextAlign.center,
                          ),
                        )
                      : FittedBox(
                          child: Image.network(
                            text ?? "",
                            fit: BoxFit.cover,
                          ),
                        ),
                ),
                //The TextFormField() here
                Expanded(
                    child: TextFormField(
                  decoration: InputDecoration(
                    label: Text("Image URL"),
                  ),
                  keyboardType: TextInputType.url,
                  textInputAction: TextInputAction.done,
                  controller: _imageUrlController,
                ))
              ])