Fetch Text from TextWidget flutter

Question

I am creating an weather app in which I am providing a location string to a TextField and fetch the text inside in it. I know I can do it if I use TextField widget every time, but I want to use code reusability and that's why I have created a different Widget called TextFieldWidget in which I am providing a hint variable, which returns the Text inside it. I don't know how to do return the text. This is my code.

import 'package:flutter/material.dart';

class TextFieldWidget extends StatefulWidget {

  final String _hint;

  TextFieldWidget(this._hint);

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

class _TextFieldWidgetState extends State<TextFieldWidget> {

  TextEditingController _textEditingController;
  InputDecoration _inputdecoration;

  @override
  void initState() {
    super.initState();
    _textEditingController = TextEditingController();
    _inputdecoration = InputDecoration(hintText: widget._hint,floatingLabelBehavior: FloatingLabelBehavior.always);
  }

  @override
  Widget build(BuildContext context) {
    return TextField(
      autocorrect: true,
      controller: _textEditingController,
      keyboardType: TextInputType.text,
      enableSuggestions: true,
      decoration: _inputdecoration,
      onSubmitted: (value){
          // somehow return data
          // I want to access this part..
      },
    );
  }
}

Solution

1. You have to create one method inside calling class

void _setTextValue(String value) {
  // Submitted text should appear here from value
}


TextFieldWidget(_setTextValue)

2. Use this inside TextFormField then

  final Function _setValue;

  TextFieldWidget(this._setValue);

3. Inside onSubmitted Call

widget._setValue(value);

Finally, you will get value inside calling class

Edited:

We can add callbacks in calling widgets itself with named parameters which is correct way of doing this

Example:

class _TextFieldWidgetState extends State<TextFieldWidget> {

  TextEditingController _textEditingController;
  InputDecoration _inputdecoration;

  @override
  void initState() {
    super.initState();
    _textEditingController = TextEditingController();
    _inputdecoration = InputDecoration(hintText: 'UserName',floatingLabelBehavior: FloatingLabelBehavior.always);
  }

  @override
  Widget build(BuildContext context) {
    return TextField(
      autocorrect: true,
      controller: _textEditingController,
      keyboardType: TextInputType.text,
      enableSuggestions: true,
      decoration: _inputdecoration,
      onSubmitted: (value){
        widget.getUserName(value);
        // somehow return data
        // I want to access this part..
      },
    );
  }
}

Call above code like

TextFieldWidget(getUserName: (value) {
         // Get the username here
         print(value);
       }),

Note: We can add as many as named parameter like this

Comments

[Jitesh Mohite]

Is the below solution working for you?

[Jay Dangar]

Yes it does work, thanks. I want to ask one another question that Is it advisable to use all the widgets separately like this, as an individual entity? I am creating these classes to reuse it.

[Quyen Anh Nguyen]

You can use all the widgets separately like this. As for me, I used to write a common class to manage some small common widgets like this. Don't need a class or a statefull widget. I write functions return widgets. For a large customize widget I put it in a separately class.

[Jay Dangar]

@QuyenAnhNguyen, I am basically doing the same thing, the major problem is to return values, because I have to manage UI part accordingly. How can I create a widget and return value? is sending a function and updating variable in parent class is correct approach?

[Quyen Anh Nguyen]

Have you try add a call back function?

[Jay Dangar]

@QuyenAnhNguyen, Yes this code works, I am asking if this is the correct approach? For this approach I have to make my page as a statefulwidget in which TextField is defined as UI component. This way most of my UI will be Stateful widget.

[Quyen Anh Nguyen]

Yes, I think. If you want to rerender UI I think you should use InheritedWidgets through a management state package pub.dev/packages/provider and put it inside a consumer.

[Jay Dangar]

@QuyenAnhNguyen, It's not must for us to use only 1 state management technique. We can use hybrid approach, right?

[Quyen Anh Nguyen]

Yes, definitely.

[Jitesh Mohite]

@Jay Dangar: Edited the answer. Have a look

[Jay Dangar]

Can you elaborate I didn't get it.

[Jitesh Mohite]

This is the same as my previous example, but the only difference is that I adding function directly in the constructor, you can add anotherTextFeild and pass another, and follow same approach. I am sure you will get this.