Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Reusable TextField doesn't send data Flutter

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 :

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

  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 ?

>Solution :

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',
),
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading