flutter number textfield with right symbol-CodePudding

i am trying to implement text field with showing symbol of height at the right of the text. for example when user enter any input the the TextField must be like:

180 cm

as you see above cm should be appear whenever any text changed and shouldn't be removable.

i am trying to achieve it by using following library but could success. any suggestion?

https://pub.dev/packages/flutter_masked_text2

here is what I tried:

 var heightController = MaskedTextController(
    mask: '000 cm',
  );

CodePudding user response：

you can try this

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Postfix Text Controller',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        brightness: Brightness.dark,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final TextEditingController _textController = TextEditingController();
  final String _userPostfix = " cm";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: const Text("Postfix Text Controller"),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(15.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              TextFormField(
                controller: _textController,
                onChanged: (value) {
                  if (value == _userPostfix) {
                    _textController.text = "";
                    return;
                  }
                  value.endsWith(_userPostfix)
                      ? _textController.text = value
                      : _textController.text = value   _userPostfix;
                  _textController.selection = TextSelection.fromPosition(
                      TextPosition(
                          offset: _textController.text.length -
                              _userPostfix.length));
                },
                decoration: const InputDecoration(
                  labelText: "Height",
                  border: OutlineInputBorder(),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

CodePudding user response：

You can try this

TextField(
                    controller: _textController,
                    keyboardType: TextInputType.number,
                    onChanged: (val) {
                      _textController.text =
                          val.replaceAll("c", "").replaceAll("m", "")   " cm";
                      _textController.selection = TextSelection.fromPosition(
                          TextPosition(
                              offset: _textController.text.length - 3));
                    },
                  ),