CODEWITHSUNDEEP
flutterdart
iDecode
iDecode

Reputation: 28986

Why Android not able to show correct formatted Text in TextField while iOS does?

Minimal code:

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

void main() => runApp(MaterialApp(home: MyPage()));

class MyPage extends StatelessWidget {
  final _controller = TextEditingController(text: "");

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(44.0),
        child: Center(
          child: TextField(
            controller: _controller,
            keyboardType: TextInputType.number,
            onChanged: (string) {
              string = string.replaceAll(RegExp(","), "");
              string = _formattedString(string);
              _controller.text = string;
              _controller.selection = TextSelection.fromPosition(TextPosition(offset: string.length));
            },
          ),
        ),
      ),
    );
  }

   _formattedString(string) {
    final format = NumberFormat.decimalPattern();
    return format.format(int.parse(string));
  }
}

Run this code, in both Android and iOS, enter number like 123456789, in Android it prints some weird sequence however it does work in iOS. Can anybody tell me what's wrong in the code?

Android output

enter image description here

iOS output

enter image description here

Upvotes: 1

Views: 145

Answers (2)

Uroš
Uroš

Reputation: 1658

Or if you don't want another dependency in your project, give this a try:

import 'package:flutter/services.dart';
import 'package:intl/intl.dart';
import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(home: MyPage()));

class NumericTextFormatter extends TextInputFormatter {
  TextEditingValue formatEditUpdate(
      TextEditingValue oldValue, TextEditingValue newValue) {
    if (newValue.text.length == 0) {
      return newValue.copyWith(text: '');
    } else if (newValue.text.compareTo(oldValue.text) != 0) {
      int selectionIndexFromTheRight = newValue.text.length - newValue.selection.end;
      final f = new NumberFormat("#,###");
      int num = int.parse(newValue.text.replaceAll(f.symbols.GROUP_SEP, ''));
      final newString = f.format(num);
      return new TextEditingValue(
        text: newString,
        selection: TextSelection.collapsed(offset: newString.length - selectionIndexFromTheRight),
      );
    } else {
      return newValue;
    }
  }
}

class MyPage extends StatelessWidget {
  final _controller = TextEditingController(text: "");

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(44.0),
        child: Center(
          child: TextField(
            controller: _controller,
            keyboardType: TextInputType.number,
            inputFormatters: [NumericTextFormatter()],
          ),
        ),
      ),
    );
  }
}

Credit goes to: https://stackoverflow.com/a/51739086/5235984

Upvotes: 1

Nidheesh MT
Nidheesh MT

Reputation: 1140

Add this to your package's pubspec.yaml file:

dependencies: flutter_masked_text: ^0.8.0

  1. Create your mask controller
  2. Set controller to your text field:

class MyPage extends StatelessWidget { var _controller = new MaskedTextController(mask: '000,000,000,00');

 @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Padding(
            padding: const EdgeInsets.all(44.0),
            child: Center(
                child: TextField(controller: _controller)
            )
        )
    );
  }
}

Upvotes: 0

Related Questions