so i have this kind of widget it can increase the number or decrease but that 0 text isn't just a text it's textfield, i want to change the value by input not just by pressing the button. the problem is if i delete the value it will be empty i dont want it, and if i add number after the 0 i want the 0 dissappear. Sorry for my bad explanation.

int stock = 0;

@override
  Widget build(BuildContext context) {
    TextEditingController controller = TextEditingController(text: '$stock');    
   
return Container(
      margin: const EdgeInsets.fromLTRB(16, 12, 16, 0),
      child: Row(children:[
          Container(
            padding: EdgeInsets.symmetric(horizontal: 12),
            width: 40,
            child: TextField(
              controller: controller,
              maxLength: 3,
              textAlign: TextAlign.center,
              decoration: InputDecoration(
                border: InputBorder.none,
                counterText: "",
              ),
              keyboardType: TextInputType.number,
              onChanged: (value) {
                if (this.stock == null) {
                  this.stock = 0;
                }
                this.stock = int.parse(value);
              },
            ),
          ),

CodePudding user response：

Maybe you should use TextEditingController as listenable value, so that you could change values by listening inputs in realtime.

late TextEditingController _editingController;

  @override
  void initState() {
    _editingController = TextEditingController(text: "0");
    _editingController.addListener(() {
      if (_editingController.text.isEmpty) {
        _editingController.text = "0";
      } else {
        _editingController.text = _editingController.text[0] == "0"
            ? _editingController.text.substring(1)
            : _editingController.text;
      }
    });
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        child: TextField(controller: _editingController),
      ),
    );
  }

So, _editingController check actual entered text and if that text is "0", then it replace it on entered value, but if text is empty - replace emptyness by "0"

CodePudding user response：

Try this widget and decoration

class TF extends StatelessWidget {
  const TF({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    int stock = 0;
    TextEditingController controller = TextEditingController(text: '$stock');

    return Container(
      margin: const EdgeInsets.fromLTRB(16, 12, 16, 0),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          GestureDetector(
            child: Container(
                padding: EdgeInsets.all(8),
                decoration: ShapeDecoration(
                    shape: CircleBorder(), color: Colors.cyanAccent),
                child: Text("-")),
            onTap: () {
              int currentValue = int.tryParse(controller.text) ?? 0;
              controller.text = (currentValue > 0) ? "${currentValue - 1}" : "0";
            },
          ),
          Container(
            padding: EdgeInsets.symmetric(horizontal: 12),
            width: 40,
            child: TextField(
              controller: controller,
              maxLength: 3,
              textAlign: TextAlign.center,
              decoration: InputDecoration(
                hintText: "0",
                border: InputBorder.none,
                counterText: "",
              ),
              keyboardType: TextInputType.number,
            ),
          ),
          InkWell(
            customBorder: CircleBorder(),
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text(" "),
            ),
            onTap: () {
              int currentValue = int.tryParse(controller.text) ?? 0;
              controller.text = "${currentValue   1}";
            },
          ),
        ],
      ),
    );
  }
}

CodePudding user response：

It here

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const MyStatefulWidget(),
      ),
    );
  }
}
class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
 
  int counter = 0;
  final TextEditingController _controller = TextEditingController(text: "0");
  
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height:50,
      width: 200,
      child: Row(
        children: <Widget>[
          TextButton(
            style: TextButton.styleFrom(
              textStyle: const TextStyle(fontSize: 20),
            ),
            onPressed: (){
              counter--;
              _controller.text = counter.toString();
              setState((){});
            },
            child: const Text('-'),
          ),
          Expanded(child:TextField(controller: _controller,onChanged:(s){
            counter = (num.tryParse(s) ?? counter) as int;
            _controller.text = counter.toString();
          })),
          TextButton(
            style: TextButton.styleFrom(
              textStyle: const TextStyle(fontSize: 20),
            ),
            onPressed: () {
              counter  ;
              _controller.text = counter.toString();
              setState((){});
              },
            child: const Text(' '),
          ),
        ],
      ),
    );
  }
}