I have a custom textField like this :

import 'package:flutter/material.dart';
import 'package:sizer/sizer.dart';

class CustomTextField extends StatefulWidget {
  TextEditingController controller;
  String label;
  String textValue;
  int maxLines;
  TextInputType keybordType;
  CustomTextField(
      {Key? key,
      required this.controller,
      required this.textValue,
      required this.label,
      this.maxLines = 1,
      this.keybordType = TextInputType.text})
      : super(key: key);

  @override
  State<CustomTextField> createState() => _CustomTextFieldState();
}

class _CustomTextFieldState extends State<CustomTextField> {
  @override
  Widget build(BuildContext context) {
    return TextField(
      maxLines: widget.maxLines,
      textCapitalization: TextCapitalization.words,
      onChanged: (value) {
        widget.textValue = value;
        setState(() {});
      },
      controller: widget.controller,
      cursorColor: Colors.white,
      style: TextStyle(fontSize: 15),
      textInputAction: TextInputAction.next,
      keyboardType: widget.keybordType,
      decoration: InputDecoration(
        hintText: widget.label,
      ),
    );
  }
}

And I use it like this :

CustomTextField(
                maxLines: 4,
                controller: chapterOpinionController,
                textValue: chapterOpinion,
                label: 'Critique du chapitre'),
            SizedBox(
              height: 2.h,
            ),
            ElevatedButton.icon(
              onPressed: () {
                addChapterReview();
                clearAllField();
                ScaffoldMessenger.of(context).showSnackBar(snackBar);
                setState(() {});
              },
              icon: const Icon(Icons.check),
              label: const Text('Poster la review'),
            ),

How I send datas :

  Future<void> addChapterReview() {
    return chapter_reviews
        .add({
          'anime_adaptation': animeAdaptation,
          'edited_in_france': editedInFrance,
          'link': chapterLink,
          'manga': chapterOriginalManga,
          'note': chapterNote,
          'number': chapterNumber,
          'opinion': chapterOpinion,
          'pic': chapterPic,
          'title': chapterTitle
        })
        .then((value) => print('Review ajoutée avec succès.'))
        .catchError((error) => print('Echec de l\'ajout de la review.'));
  }

My problem is the input is not send to my database. But when I don't use my custom textField and write a full textField in my 'main' page, it's working.

I could copy/past in hard 10 textField and have 200 more lines of code, but I'm trying to optimize my code.

Any idea ?

CodePudding user response：

Change this:

Future<void> addChapterReview() {
    return chapter_reviews
        .add({
          'anime_adaptation': animeAdaptation,
          'edited_in_france': editedInFrance,
          'link': chapterLink,
          'manga': chapterOriginalManga,
          'note': chapterNote,
          'number': chapterNumber,
          'opinion': chapterOpinion,
          'pic': chapterPic,
          'title': chapterTitle.toString()
        })
        .then((value) => print('Review ajoutée avec succès.'))
        .catchError((error) => print('Echec de l\'ajout de la review.'));
  }

to this:

Future<void> addChapterReview() {
    return chapter_reviews
        .add({
          'anime_adaptation': animeAdaptation,
          'edited_in_france': editedInFrance,
          'link': chapterLink,
          'manga': chapterOriginalManga,
          'note': chapterNote,
          'number': chapterNumber,
          'opinion': chapterOpinionController.text,//<---change this
          'pic': chapterPic,
          'title': chapterTitle.toString()
        })
        .then((value) => print('Review ajoutée avec succès.'))
        .catchError((error) => print('Echec de l\'ajout de la review.'));
  }

You don't textValue to access input's result, just use chapterOpinionController.text .

If you want to notify when ever the text change you need to pass a call back like this:

class CustomTextField extends StatefulWidget {
  TextEditingController controller;
  String label;
  Function(String) onChange;
  int maxLines;
  TextInputType keybordType;
  CustomTextField(
      {Key? key,
      required this.controller,
      required this.textValue,
      required this.label,
      this.maxLines = 1,
      this.keybordType = TextInputType.text})
      : super(key: key);

  @override
  State<CustomTextField> createState() => _CustomTextFieldState();
}

class _CustomTextFieldState extends State<CustomTextField> {
  @override
  Widget build(BuildContext context) {
    return TextField(
      maxLines: widget.maxLines,
      textCapitalization: TextCapitalization.words,
      onChanged: widget.onChange,
      controller: widget.controller,
      cursorColor: Colors.white,
      style: TextStyle(fontSize: 15),
      textInputAction: TextInputAction.next,
      keyboardType: widget.keybordType,
      decoration: InputDecoration(
        hintText: widget.label,
      ),
    );
  }
}

then use it like this:

CustomTextField(
   maxLines: 4,
   controller: chapterOpinionController,
   onChanged: (value) {
      print("value = $value");
   },
   label: 'Critique du chapitre',
),