Flutter: How to mimic calculator display with TextFormField? - flutter

Question

I'm implementing code below to save numeric data to database.
The saved numeric data will be used in arithmetic operations in the future.
The code is still quite native where numeric number is not separated by thousands.
The inserted value is equal to the retrieved value with this practice.
I want to give the user an experience mimicking physical calculator.
To achieve that I tried to use Masking Controller or Input Formatter Packages available in the pub.dev.
So far, I haven't get the result I was looking for.
In the commented out code below, is one of the example practice where I tried to separate those numbers by thousands and decimals when inserting and retrieving numeric data by using currency_text_input_formatter package.
In this practice, not all digits were saved to the database,
any number inserted above three digits always resulted in only three digits and two decimals saved and retrieved.
Examples:
1. value inserted: 7000
print('value: $value')
the result was:
I/flutter (12551): value: 700.0
2. value inserted: 12,345,678.90
print('value: $value')
the result was:
I/flutter (12551): value: 123.45
Is there any suggestion which package or method I should implement?
And how to make the implementation of the package or method to get the desired result?
My original native code as shown below,
please uncomment the commented out code to reproduce my problem.
Any help would be highly appreciated.
my Model:
class Product {
int id;
String name;
num savedValue;
static const tblProduct = 'product';
static const colId = 'id';
static const colName = 'name';
static const colSavedValue = 'savedValue';
Product({
this.id,
this.name,
this.savedValue,
});
Map<String, dynamic> toMap() {
var map = <String, dynamic>{
colName: name,
colSavedValue: savedValue,
};
if (id != null) map[colId] = id;
return map;
}
Product.fromMap(Map<String, dynamic> map) {
id = map[colId];
name = map[colName];
savedValue = map[colSavedValue];
}
}
my UI:
import 'dart:ui';
import 'package:get/get.dart';
import 'package:intl/intl.dart';
import 'package:sqflite/sqflite.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_form_builder/flutter_form_builder.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:currency_text_input_formatter/currency_text_input_formatter.dart';
class LossZero extends StatefulWidget {
#override
_LossZeroState createState() => _LossZeroState();
}
class _LossZeroState extends State<LossZero> {
DatabaseHelper dbHelper = DatabaseHelper.instance;
Product product = Product();
List<Product> products = [];
String name;
int id;
num value;
final _fbKey = GlobalKey<FormBuilderState>();
final itemController = TextEditingController();
final savedValueController = TextEditingController();
final retrievedValueController = TextEditingController();
final itemChosen = TextEditingController();
#override
void initState() {
super.initState();
dbHelper = DatabaseHelper.instance;
refreshItems();
}
#override
Widget build(BuildContext context) {
return Container(
child: SafeArea(
child: Scaffold(
body: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
FormBuilder(
key: _fbKey,
child: Column(
children: [
Container(
width: MediaQuery.of(context).size.width,
height: 70,
margin: EdgeInsets.symmetric(horizontal: 15),
child: FormBuilderTextField(
attribute: 'item',
controller: itemController,
autofocus: true,
textAlign: TextAlign.start,
textAlignVertical: TextAlignVertical.bottom,
textInputAction: TextInputAction.next,
keyboardType: TextInputType.name,
inputFormatters: [],
decoration: InputDecoration(
helperText: ' ',
hintText: 'Item',
hintStyle: TextStyle(fontSize: 12),
prefixIcon: Padding(
padding: const EdgeInsets.only(right: 10.0),
child: Icon(
FontAwesomeIcons.shoppingBag,
size: 20,
),
)),
onChanged: (val) {
setState(() {
name = val;
_fbKey.currentState.fields['item'].currentState
.validate();
});
},
autovalidateMode: AutovalidateMode.onUserInteraction,
validators: [
FormBuilderValidators.required(
errorText: 'required',
),
],
),
),
Container(
width: MediaQuery.of(context).size.width,
height: 70,
margin: EdgeInsets.symmetric(horizontal: 15),
child: FormBuilderTextField(
attribute: 'value',
controller: savedValueController,
textAlign: TextAlign.start,
textAlignVertical: TextAlignVertical.bottom,
textInputAction: TextInputAction.next,
keyboardType: TextInputType.number,
inputFormatters: [
// CurrencyTextInputFormatter(
// decimalDigits: 2,
// ),
],
decoration: InputDecoration(
helperText: ' ',
hintText: 'Saved Value',
hintStyle: TextStyle(fontSize: 12),
prefixIcon: Padding(
padding: const EdgeInsets.only(right: 10.0),
child: Icon(
FontAwesomeIcons.save,
size: 20,
),
)),
onChanged: (val) {
setState(() {
value = num.parse(val);
_fbKey.currentState.fields['value'].currentState
.validate();
});
},
autovalidateMode: AutovalidateMode.onUserInteraction,
validators: [
FormBuilderValidators.required(
errorText: 'required',
),
],
),
),
SizedBox(height: 50),
RaisedButton(
child: Text('Save'),
onPressed: saveForm,
),
SizedBox(height: 40),
Container(
color: Colors.grey[200],
width: MediaQuery.of(context).size.width,
height: 70,
margin: EdgeInsets.symmetric(horizontal: 20),
child: FormBuilderTypeAhead(
attribute: 'item_chosen',
initialValue: product,
getImmediateSuggestions: true,
autoFlipDirection: true,
controller: itemChosen,
decoration: InputDecoration(
border: InputBorder.none,
),
hideOnLoading: true,
onChanged: (val) {},
itemBuilder: (context, Product product) {
return ListTile(
title: Text(product.name),
subtitle: Text(product.savedValue.toString()),
);
},
selectionToTextTransformer: (Product ps) => ps.name,
suggestionsCallback: (query) {
if (query.isNotEmpty) {
var lowercaseQuery = query.toLowerCase();
return products.where((product) {
return product.name
.toLowerCase()
.contains(lowercaseQuery);
}).toList(growable: false)
..sort((a, b) => a.name
.toLowerCase()
.indexOf(lowercaseQuery)
.compareTo(b.name
.toLowerCase()
.indexOf(lowercaseQuery)));
} else {
return products;
}
},
textFieldConfiguration: TextFieldConfiguration(
autofocus: true,
style: DefaultTextStyle.of(context).style.copyWith(
fontSize: 24,
letterSpacing: 1.2,
color: Colors.black,
fontWeight: FontWeight.w300,
decoration: TextDecoration.none),
),
noItemsFoundBuilder: (BuildContext context) {
return Text('not registered');
},
onSuggestionSelected: (product) {
if (product != null) {
setState(() {
retrievedValueController.text =
product.savedValue.toString();
});
} else {
return products;
}
},
),
),
Container(
width: MediaQuery.of(context).size.width,
height: 70,
margin: EdgeInsets.symmetric(horizontal: 15),
child: FormBuilderTextField(
attribute: 'retrieve_value',
controller: retrievedValueController,
textAlign: TextAlign.start,
textAlignVertical: TextAlignVertical.bottom,
textInputAction: TextInputAction.next,
keyboardType: TextInputType.number,
inputFormatters: [
// CurrencyTextInputFormatter(
// decimalDigits: 2,
// )
],
decoration: InputDecoration(
helperText: ' ',
hintText: 'Retrieved Value',
hintStyle: TextStyle(fontSize: 12),
prefixIcon: Padding(
padding: const EdgeInsets.only(right: 10.0),
child: Icon(
FontAwesomeIcons.list,
size: 20,
),
)),
onChanged: (val) {},
validators: [],
),
),
],
),
),
],
),
),
),
),
);
}
saveForm() async {
if (_fbKey.currentState.validate()) {
_fbKey.currentState.save();
if (product.id == null) {
Product p = Product(
id: null,
name: name,
savedValue: value,
);
await insertValue(p);
itemController.clear();
savedValueController.clear();
refreshItems();
Get.snackbar('Done', 'Item Saved');
print('value: $value');
} else {
Get.snackbar('Fail', 'Item saving Failed');
}
}
}
refreshItems() async {
List<Product> p = await getAllItems();
setState(() {
products = p;
});
}
Future<int> insertValue(Product prod) async {
Database db = await dbHelper.database;
return await db.insert(Product.tblProduct, prod.toMap());
}
Future<List<Product>> getAllItems() async {
Database db = await dbHelper.database;
List<Map> x = await db.query(Product.tblProduct);
return x.length == 0
? []
: x.map((e) => Product.fromMap(e)).toList();
}
}
my dbHelper
import 'dart:io';
import 'dart:async';
import 'package:path/path.dart';
import 'package:sqflite/sqflite.dart';
import 'package:path_provider/path_provider.dart';
class DatabaseHelper {
static const _databaseVersion = 1;
static const _databaseName = 'product.db';
DatabaseHelper._();
static final DatabaseHelper instance = DatabaseHelper._();
Database _database;
Future<Database> get database async {
if (_database != null) return _database;
_database = await _initDatabase();
return _database;
}
_initDatabase() async {
Directory dataDirectory = await getApplicationDocumentsDirectory();
String dbPath = join(dataDirectory.path, _databaseName);
return await openDatabase(
dbPath,
version: _databaseVersion,
onCreate: _onCreateDB,
);
}
_onCreateDB(Database db, int version) async {
await db.execute('''
-- P R O D U C T
CREATE TABLE ${Product.tblProduct}(
${Product.colId} INTEGER INCREMENT,
${Product.colName} TEXT NOT NULL,
${Product.colSavedValue} FLOA
)
''');
}
}

Answer 1

I finally get the result I was looking for after using this package as many has recommended.
On the code above, I modified following methods:
saving method:
onChanged: (val) {
setState(() {
value =
savedValueController.numberValue.toDouble();
_fbKey.currentState.fields['value'].currentState
.validate();
});
},
retrieve data method:
onSuggestionSelected: (product) {
if (product != null) {
setState(() {
var x = product.savedValue;
retrievedValueController
.updateValue(x.toDouble());
});
} else {
return products;
}
},
modifying controller method
modified TexEditingController:
final savedValueController =
MoneyMaskedTextController(decimalSeparator: '.', thousandSeparator: ',');
final retrievedValueController =
MoneyMaskedTextController(decimalSeparator: '.', thousandSeparator: ',');
putting inputFormatter in FormBuilder:
inputFormatters: [],