MaskTextInputFormatter erases characters when I do the insertion

Question

I am using MaskInputFormatter to format a phone number textfield and it's a customTextField I created. When I insert the number it erases the previous digit. And when a non-number character is inserted it erases all the inserted data.

I tried using it in a 'vanilla' TextFormField and had the same result.

TextFormField(
  onChanged: (value) {
    setState(() {
      mobile.setContactNumber(value);
    });
  },
  initialValue:
      mobile.contactNumber,
  inputFormatters: [MaskTextInputFormatter(mask: "+258 ###-##-##")],
),

Answer 1

This code:

class _MyHomePageState extends State<MyHomePage> {
  final  maskFormatter = MaskTextInputFormatter( mask: '+### ###-##-##');
  _controller=TextEditingController(text: "+258 ");
  @override
  Widget build(BuildContext context) {
    return Scaffold(
     body: Padding(
       padding: const EdgeInsets.all(8.0),
       child: Column(
        children: [
          SizedBox(height: 50,),
          TextField(
          controller:_controller,
            keyboardType: TextInputType.number,
            decoration: InputDecoration(
              hintText: 'Enter Phone Number'
              ),
              inputFormatters: [
                maskFormatter
              ],
          ),
        ],
       ),
     ), 
    );
  }
}

Answer 2

try this

class _MyHomePageState extends State<MyHomePage> {
  final  maskFormatter = MaskTextInputFormatter( mask: '+### ###-##-##');
  @override
  Widget build(BuildContext context) {
    return Scaffold(
     body: Padding(
       padding: const EdgeInsets.all(8.0),
       child: Column(
        children: [
          SizedBox(height: 50,),
          TextField(
            keyboardType: TextInputType.number,
            decoration: InputDecoration(
              hintText: 'Enter Phone Number'
              ),
              inputFormatters: [
                maskFormatter
              ],
          ),
        ],
       ),
     ), 
    );
  }
}