从在 flutter 中的不同 class 上创建的自定义小部件访问数据

Question

I new to Flutter and i was trying to find a solution for the below issue for several hours. I have searched and every solution provided does not work form me.

I have page where one of the widgets is the autocomplete text input. I have created this autocomplete widget on different class. I have added this widget as StatefulBuilder within my main widget. it is working fine however, i am not able to access its value so I can store it with other fields.

My code look like

class ItemDetails extends StatefulWidget {


const ItemDetails({Key? key}) : super(key: key);

  static const routeName = '/item_details';

  @override
  State<ItemDetails> createState() => _ItemDetails();
}

class _ItemDetails extends State<ItemDetails> {
  late TextEditingController labelController;
  late TextEditingController valueController;
  late TextEditingController notesController;

  bool _submitted = false;
  late var args;
  var labelAutoComp = LabelSugg();

  @override
  void initState() {
    super.initState();
    labelController = TextEditingController();
    valueController = TextEditingController();
    notesController = TextEditingController();
  }

  @override
  void dispose() {
    labelController.dispose();
    valueController.dispose();
    notesController.dispose();
    super.dispose();
  }

  String? _labelErrorText(context) {
    final text = labelController.value.text;
    if (text.isEmpty) {
      // return 'Can\'t be empty';
      return AppLocalizations.of(context)!.noEmpty;
    }
  }

  String? _valueErrorText(context) {
    final text = valueController.value.text;
    if (text.isEmpty) {
      // return 'Can\'t be empty';
      return AppLocalizations.of(context)!.noEmpty;
    }
  }

  @override
  Widget build(BuildContext context) {
    try {
      args = ModalRoute.of(context)!.settings.arguments as Map;
    } on Exception catch (e) {

  // print(e);
}

// print(args);
return Scaffold(
    appBar: AppBar(
      title: Text(args['title']),
    ),
    body: Container(
        padding: const EdgeInsets.all(20),
        child: Column(
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.all(20),
              child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    StatefulBuilder(builder: (context, setState) {
                      return labelAutoComp;
                    }),
                    TextField(
                      autofocus: true,
                      decoration: InputDecoration(
                        labelText: AppLocalizations.of(context)!.label,
                        hintText: AppLocalizations.of(context)!.labelHint,
                        errorText:
                            _submitted ? _labelErrorText(context) : null,
                      ),
                      controller: labelController,
                      onChanged: (_) => setState(() {}),
                    ),
                    const SizedBox(height: 5),
                    TextField(
                      autofocus: false,
                      decoration: InputDecoration(
                        labelText: AppLocalizations.of(context)!.value,
                        hintText: AppLocalizations.of(context)!.valueHint,
                        errorText:
                            _submitted ? _valueErrorText(context) : null,
                      ),
                      controller: valueController,
                      keyboardType: const TextInputType.numberWithOptions(
                          decimal: true, signed: false),
                      inputFormatters: <TextInputFormatter>[
                        FilteringTextInputFormatter.allow(
                            RegExp(r"[0-9.]")),
                        TextInputFormatter.withFunction(
                            (oldValue, newValue) {
                          try {
                            final text = newValue.text;
                            if (text.isNotEmpty) double.parse(text);
                            return newValue;
                          } catch (e) {}
                          return oldValue;
                        }),
                      ], // Only numbers can be entered
                      onChanged: (_) => setState(() {}),
                    ),
                    const SizedBox(height: 5),
                    TextField(
                      autofocus: true,
                      decoration: InputDecoration(
                        labelText: AppLocalizations.of(context)!.notes,
                        hintText: AppLocalizations.of(context)!.noteHint,
                      ),
                      controller: notesController,
                      onChanged: (_) => setState(() {}),
                    ),
                  ]),

              // ],
            ),
            Expanded(
              child: Align(
                  alignment: FractionalOffset.bottomCenter,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      ElevatedButton.icon(
                        onPressed: () {
                          setState(() => _submitted = true);
                          if (_labelErrorText(context) == null &&
                              _valueErrorText(context) == null) {
                            //insert
                            var localLabel = labelController.value.text;

                            var _localValue = 0.0;
                            if (valueController.value.text != '') {
                              _localValue =
                                  double.parse(valueController.value.text);
                            } else {
                              _localValue = 0.0;
                            }

                            var localNotes = notesController.value.text;

                            addItemToList(
                                localLabel, _localValue, localNotes);
                            Navigator.of(context).pop();
                            labelController.clear();
                            valueController.clear();
                            notesController.clear();
                          }
                        },
                        label: Text(AppLocalizations.of(context)!.add),
                        icon: const Icon(Icons.save, size: 18),
                      ),
                      const SizedBox(width: 10),
                      ElevatedButton.icon(
                        onPressed: () => {Navigator.pop(context)},
                        label: Text(AppLocalizations.of(context)!.cancel),
                        icon: const Icon(Icons.cancel, size: 18),
                      ),
                    ],
                  )),
            ),
            // )
          ],
        )));

my labelAutoComp widget code look like

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

  @override
  State<LabelSugg> createState() => _LabelSugg();
}

class _LabelSugg extends State<LabelSugg> {
  late TextEditingController fieldTextEditingController;

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  getLabel() {
    return fieldTextEditingController.text;
  }

  @override
  Widget build(BuildContext context) {}
}

how to access the controller or the text entered in

StatefulBuilder(builder: (context, setState) {
 return labelAutoComp;
}),

Answer 1

• first is redundant when you wrap your class that extend StatefullWidget with StatefullBuilder . LabelSugg is a component Widget. you can use it like other widget.

• benefit to separate widget with StatefullWidget class is, we can update the value inside the class without re-build the current page. which is good for performance. that's why developer recomend to separete with class insted compared to make local method.

• as you see, when you create LabelSugg extend StatefullWidget class, we will have _LabelSugg . underscore means that: all variable only accessible on current file. thats why we can't call getLabel() or other variable from different file. its used for handle the State in 'LabelSugg` widget.

---

now how to pass the value from LabelSugg is by created variable outside the state. here you are:

class LabelSugg extends StatefulWidget {
  // use this to pass any changes when we use LabelSugg
  final ValueChanged<String> getLabelText; 
  const LabelSugg({Key? key, required this.getLabelText}) : super(key: key);

  @override
  State<LabelSugg> createState() => _LabelSugg();
}

then we can call the onChaged inside _LabelSugg state. because its Statefull widget, we can acces by: widget.getLabelText()

class _LabelSugg extends State<LabelSugg> {
  late TextEditingController fieldTextEditingController;
.....

getLabel() {
    return widget.getLabelText(fieldTextEditingController.text);
  }

then in other class we call LabelSugg like common widget

import 'package:../labelsug.dart';

class ItemDetails extends StatefulWidget {
.....

return Scaffold(
    appBar: AppBar(
      title: Text(args['title']),
    ),
    body: Container(
        padding: const EdgeInsets.all(20),
        child: Column(
          children: <Widget>[
             // now use it like a widget 
             LabelSug(
                 getLabelText: (String val){
                     print(val);
                  }

:)