I have TextFormField and a container having Text...

if textformfield is empty, container's text should be like 'Enter something' and if textformfield is not empty, container's text should be like 'Done' on done..

actually I want to paste url of image and on done..image should be displayed in container..this is what I will do later

here is my code

 Row(
            crossAxisAlignment: CrossAxisAlignment.end,
            children: [
            Container(
              width: 100,
              height: 100,
              margin: EdgeInsets.all(10),
              decoration: BoxDecoration(
                border: Border.all(width: 2.0,color: Colors.blue),

              ),
              child: _txtimagecontrolller.text.isEmpty?Text('Text is Empty'):Text('not empty'),
            ),
            Expanded(
              child: TextFormField(
                decoration: InputDecoration(label: Text('Image here')),
                keyboardType: TextInputType.url,
                textInputAction: TextInputAction.done,
                controller: _txtimagecontrolller,
              ),
            ),
          ],),

class _EditProductScreenState extends State<EditProductScreen> {
  final _pricefocusnode=FocusNode();
  final _descriptionfocusnode=FocusNode();
  final _txtimagecontrolller=TextEditingController();

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    _pricefocusnode.dispose();
    _descriptionfocusnode.dispose();
    _txtimagecontrolller.dispose();
  }

is there need to initialise in init()?

here is the same code I am following to...its working in his video but not working with me...Is it bcz of version issue?

import 'package:flutter/material.dart';

class EditProductScreen extends StatefulWidget {
  static const routeName = '/edit-product';

  @override
  _EditProductScreenState createState() => _EditProductScreenState();
}

class _EditProductScreenState extends State<EditProductScreen> {
  final _priceFocusNode = FocusNode();
  final _descriptionFocusNode = FocusNode();
  final _imageUrlController = TextEditingController();

  @override
  void dispose() {
    _priceFocusNode.dispose();
    _descriptionFocusNode.dispose();
    _imageUrlController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Edit Product'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          child: ListView(
            children: <Widget>[
              TextFormField(
                decoration: InputDecoration(labelText: 'Title'),
                textInputAction: TextInputAction.next,
                onFieldSubmitted: (_) {
                  FocusScope.of(context).requestFocus(_priceFocusNode);
                },
              ),
              TextFormField(
                decoration: InputDecoration(labelText: 'Price'),
                textInputAction: TextInputAction.next,
                keyboardType: TextInputType.number,
                focusNode: _priceFocusNode,
                onFieldSubmitted: (_) {
                  FocusScope.of(context).requestFocus(_descriptionFocusNode);
                },
              ),
              TextFormField(
                decoration: InputDecoration(labelText: 'Description'),
                maxLines: 3,
                keyboardType: TextInputType.multiline,
                focusNode: _descriptionFocusNode,
              ),
              Row(
                crossAxisAlignment: CrossAxisAlignment.end,
                children: <Widget>[
                  Container(
                    width: 100,
                    height: 100,
                    margin: EdgeInsets.only(
                      top: 8,
                      right: 10,
                    ),
                    decoration: BoxDecoration(
                      border: Border.all(
                        width: 1,
                        color: Colors.grey,
                      ),
                    ),
                    child: _imageUrlController.text.isEmpty
                        ? Text('Enter a URL')
                        : FittedBox(
                            child: Image.network(
                              _imageUrlController.text,
                              fit: BoxFit.cover,
                            ),
                          ),
                  ),
                  Expanded(
                    child: TextFormField(
                      decoration: InputDecoration(labelText: 'Image URL'),
                      keyboardType: TextInputType.url,
                      textInputAction: TextInputAction.done,
                      controller: _imageUrlController,
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

CodePudding user response：

you can use onFieldSubmitted (after you submitted the value) and onChanged (while you are typing) properties of the TextFormField widget, with it you can set the state upon the value submitted.

I noticed that you disposed the State first! I think this is not a good idea, you should disposed the objects you have created first, the state should be disposed at the end.

CodePudding user response：

You can perform it by adding the onFieldSubmitted inside the TextFormField.

      TextFormField(
          decoration: const InputDecoration(label: Text('Image here')),
          keyboardType: TextInputType.url,
          textInputAction: TextInputAction.done,
          controller: _txtimagecontrolller,
         //Add this code            
         onFieldSubmitted: (value) {
            //refresh your widget here
            setState(() {});
          },
        ),