How can I use the value inside my Text() widget in flutter?

Question

I'm working on a type of counter in flutter which increases with a button and decreases with another button, but the deal is that I don't know how to use the final value from the counter, and save/grab it with a floating action button.

This is my Text() widget

Container(
              margin: EdgeInsets.zero,
              padding: EdgeInsets.symmetric(horizontal: 15, vertical: 10),
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(3),
                  color: _counter != 0
                      ? widget.counterTextBackgroundColor
                      : Colors.grey[350]),
              child: Text(
                '$_counter',
                style: TextStyle(
                  fontSize: widget.counterTextSize,
                  color: widget.counterTextColor,
                ),
              ),
            ),

I tried with the TextField() widget but it looks bad, it looks too big and one of the problems with it is that if the counter is 0 my decrease IconButton doesn't show, so it extends more, and I did try with FormTextField too, the same thing.

Counter Extends with TextField()

Answer 1

It is possible to use TextEditingController in your case, or create custom controller.

Hope the full code bellow help you and others (without exception management):

import 'package:flutter/material.dart';

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

  @override
  State<FormControllerScreen> createState() => _FormControllerScreenState();
}

class _FormControllerScreenState extends State<FormControllerScreen> {
  TextEditingController ctrlOne = TextEditingController();
  TextEditingController ctrlTwo = TextEditingController();
  TextEditingController ctrlThree = TextEditingController();

  @override
  void initState() {
    ctrlOne.text = '0';
    ctrlTwo.text = '0';
    ctrlThree.text = '50';
    super.initState();
  }

  getStyleButtonStyle() {
    return ElevatedButton.styleFrom(
      padding: EdgeInsets.zero,
      minimumSize: const Size(20, 20),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          buildFormElement("controller one", 0, 5, 1, ctrlOne),
          buildFormElement("controller two", -5, 5, 1, ctrlTwo),
          buildFormElement("controller three", 50, 100, 10, ctrlThree),
          TextButton(onPressed: onSave, child: const Text("SAVE")),
        ],
      ),
    );
  }

  void onSave() {
    print("controller one:   " + ctrlOne.text);
    print("controller two:   " + ctrlTwo.text);
    print("controller three: " + ctrlThree.text);
  }

  Widget buildFormElement(String label, int min, int max, int step, TextEditingController controller) {
    return Row(
      children: [
        Text(label),
        ElevatedButton(
          style: getStyleButtonStyle(),
          onPressed: () {
            onRemove(min, step, controller);
          },
          child: const Icon(Icons.remove),
        ),
        Text(controller.text),
        ElevatedButton(
          style: getStyleButtonStyle(),
          onPressed: () {
            onAdd(max, step, controller);
          },
          child: const Icon(Icons.remove),
        ),
      ],
    );
  }

  onRemove(int min, int step, TextEditingController controller) {
    int x = int.parse(controller.text);
    if (x > min) {
      setState(() {
        controller.text = (x - step).toString();
      });
    }
  }

  onAdd(int max, int step, TextEditingController controller) {
    int x = int.parse(controller.text);
    if (x < max) {
      setState(() {
        controller.text = (x + step).toString();
      });
    }
  }
}