Flutter Number Editing Controller

Het probleem

De ingebouwde TextEditingController van Flutter behandelt getallen als platte tekst. Typt een gebruiker 1000000 in een prijsveld, dan ziet hij precies dat — een onleesbare muur cijfers. Geen groepering, geen decimale opmaak, geen valutasymbool. Developers blijven achter met eigen TextInputFormatter-logica, handmatig tekenreeksen ontleden, en gevechten met de cursorpositie telkens als de opmaak de tekstlengte verandert.

Veelvoorkomende problemen:

• Gebruikers lezen grote getallen verkeerd zonder duizendtalscheiding
• Valutavelden die de conventies van de taalregio negeren (plaats van het symbool, komma of punt)
• Broze ontleedcode die stukgaat zodra de opgemaakte tekst niet-cijfers bevat
• Een cursor die na elke toetsaanslag naar een onverwachte plek springt

Hoe number_editing_controller dat oplost

number_editing_controller is een directe vervanger voor TextEditingController. Wijs hem toe aan een willekeurig TextField en hij regelt opmaak, ontleden en cursorbeheer vanzelf.

De gebruiker ziet netjes opgemaakte tekst als $1,234.56 of 1.234,56 €, terwijl jouw code de schone numerieke waarde uitleest via controller.number.

Wat het ondersteunt

• Opmaak van hele getallen — groepeert cijfers met de scheidingstekens van de taalregio (1,000,000 in het Engels, 1.000.000 in het Duits)
• Decimale opmaak — instelbaar minimum en maximum aantal decimalen
• Valuta-opmaak — plaatst het valutasymbool vóór of na het getal volgens de regels van de taalregio
• Bewust van taalregio's — gebruikt ICU-opmaakpatronen, zodat 1234.56 in USD in het Engels als $1,234.56 verschijnt en in het Duits als 1.234,56 $
• Negatieve getallen — optionele allowNegative-vlag om invoer tot positieve waarden te beperken
• Wijzigen tijdens het draaien — wissel van taalregio, valuta of precisie terwijl de app draait, zonder de controller opnieuw te maken
• Extern valutasymbool — toon het symbool als voor- of achtervoegsel in de TextField-decoratie in plaats van in de tekst zelf

Toepassingen in de praktijk

Afrekenen in een webwinkel

Een betaalformulier moet bedragen in meerdere valuta aannemen. Met number_editing_controller maak je één valutacontroller en wijzig je currencyName zodra de gebruiker een andere valuta kiest. Het veld maakt zichzelf direct opnieuw op — zonder herbouw.

Financiële apps voor meerdere taalregio's

Een bankapp die gebruikers in de VS, Duitsland en Japan bedient, heeft per regio eigen conventies nodig: $1,234.56 tegenover 1.234,56 € tegenover ¥1,500. De controller regelt dat allemaal via één locale-parameter.

Velden voor voorraad en aantallen

Magazijnapps werken met grote hele aantallen. De integer-controller maakt van 1000000 netjes 1,000,000, waardoor invoerfouten meteen opvallen.

Analysedashboards

Decimale controllers met instelbare precisie laten je meetwaarden opmaken — percentages met 2 cijfers, wetenschappelijke metingen met 4 — terwijl de ruwe num-waarde beschikbaar blijft om mee te rekenen.

Voorbeelden van opmaak per taalregio

Aan de slag

Installeer het pakket:

flutter pub add number_editing_controller

Vereist Flutter 3.19+ en Dart 3.3+.

Maak vervolgens een controller en wijs hem toe aan je TextField:

final controller = NumberEditingTextController.currency(
  currencyName: 'USD',
  locale: 'en',
);

TextField(
  controller: controller,
  keyboardType: TextInputType.numberWithOptions(decimal: true, signed: true),
)

// Lees de numerieke waarde op elk moment
final amount = controller.number; // e.g. 1234.56

Er zijn drie soorten controllers beschikbaar: .integer(), .decimal() en .currency(). Alle opties — taalregio, scheidingstekens, valuta, precisie — zijn tijdens het draaien te wijzigen zonder de controller opnieuw te maken.

Een compleet werkend voorbeeld met een valutakiezer, een taalregiokiezer en een extern geplaatst symbool staat in de voorbeeldmap.