फ़्लटर में नंबर इनपुट फ़ील्ड कैसे बनाएं?

Question

मैं फ़्लटर में एक इनपुट फ़ील्ड बनाने का एक तरीका खोजने में असमर्थ हूं जो एक संख्यात्मक कीबोर्ड खोल देगा। क्या यह स्पंदन सामग्री विजेट के साथ संभव है? कुछ गितुब चर्चाएं संकेत देती हैं कि यह एक समर्थित विशेषता है लेकिन मैं इसके बारे में कोई दस्तावेज नहीं ढूंढ पा रहा हूं।

Comments

कीबोर्ड टाइप करें कीबोर्ड टाइप करें: TextInputType.number,

— इशान फर्नांडो

Answer 1

आप का उपयोग कर TextField के लिए कीबोर्ड के रूप में संख्या निर्दिष्ट कर सकते हैं :

keyboardType: TextInputType.number

मेरी main.dart फ़ाइल जांचें

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      home: new HomePage(),
      theme: new ThemeData(primarySwatch: Colors.blue),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new HomePageState();
  }
}

class HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      backgroundColor: Colors.white,
      body: new Container(
          padding: const EdgeInsets.all(40.0),
          child: new Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          new TextField(
            decoration: new InputDecoration(labelText: "Enter your number"),
            keyboardType: TextInputType.number,
            inputFormatters: <TextInputFormatter>[
    WhitelistingTextInputFormatter.digitsOnly
], // Only numbers can be entered
          ),
        ],
      )),
    );
  }
}

Comments

शानदार, धन्यवाद! मैं वास्तव में चाहता हूँ कि फ़्लटर कंस्ट्रक्टर प्रलेखन इतनी बुरी तरह से स्वरूपित नहीं था। पूरी तरह से यह एक याद किया।

— १

लेकिन मैं उस क्षेत्र पर टेक्स (अक्षर) पेस्ट कर सकता हूं क्या आपके पास कोई अन्य विकल्प है? @ ऋषिमें सुरेश

— गोविंदराज

मत भूलना => आयात 'पैकेज: स्पंदन / services.dart';

— विल्मर

डॉट, स्पेस और पेस्ट इमोजी लगाने की अनुमति देता है

— agilob

inputFormatters: [WhitelistingTextInputFormatter.digitsOnly] यहाँ भी आवश्यक है, क्योंकि अल्पविराम और डॉट अभी भी यहाँ उत्तर में स्वीकार किए जा सकते हैं।

— रवि यादव

Answer 2

जो लोग केवल संख्याओं को इनपुट के रूप में बनाना TextFieldया TextFormFieldस्वीकार करना चाहते हैं, उनके लिए यह कोड ब्लॉक आज़माएं:

TextFormField(
    controller: _controller,
    keyboardType: TextInputType.number,
    inputFormatters: <TextInputFormatter>[
        WhitelistingTextInputFormatter.digitsOnly
    ],
    decoration: InputDecoration(
        labelText:"whatever you want", 
        hintText: "whatever you want",
        icon: Icon(Icons.phone_iphone)
    )
)

Comments

गैर-उपयोगकर्ता तार (इनपुटफ़ॉर्मेटर्स) को चिपकाने के लिए उपयोगकर्ता से बचने के लिए यह स्वागत है, धन्यवाद।

— Mariano Argañaraz

यह Flutter_web में भी अच्छा काम करता है। Flutter_web में होने का कारण हम संख्यात्मक कीबोर्ड को लागू नहीं कर सकते हैं इसलिए प्रतिबंध प्राकृतिक विकल्प है। धन्यवाद @ बिलालिमेक

— अभिलाष चंद्रन

यह सही समाधान है!

— काविन्दा जयकौड़ी

Answer 3

इस विकल्प के माध्यम से आप बाहर की संख्या के साथ एक और चार को सख्ती से प्रतिबंधित कर सकते हैं।

 inputFormatters: [WhitelistingTextInputFormatter.digitsOnly],
 keyboardType: TextInputType.number,

उपरोक्त विकल्प का उपयोग करने के लिए आपको इसे आयात करना होगा

import 'package:flutter/services.dart';

इस तरह के विकल्प उपयोगकर्ता का उपयोग करके टेक्स्ट फ़ील्ड में चार पेस्ट नहीं कर सकते

Comments

यह वास्तविक व्यापक उत्तर है। बिना फॉर्मेटर्स के बस कीबोर्ड सेट करना पर्याप्त नहीं है।

— शबाबहदीदिक

अगर मैं सिर्फ दशमलव और अंक चाहते हैं। "कैसे जोड़ते हैं।" फ़ॉर्मेटर के श्वेतसूची में?

— shababhsiddique

Answer 4

कीबोर्ड और एक सत्यापनकर्ता सेट करें

String numberValidator(String value) {
  if(value == null) {
    return null;
  }
  final n = num.tryParse(value);
  if(n == null) {
    return '"$value" is not a valid number';
  }
  return null;
}

new TextFormField(
    keyboardType: TextInputType.number, 
    validator: numberValidator, 
    textAlign: TextAlign.right
    ...

• https://docs.flutter.io/flutter/material/TextFormField/TextFormField.html
• https://docs.flutter.io/flutter/services/TextInputType-class.html

Comments

त्रुटि मिली: घोषित होने से पहले स्थानीय चर संख्या को संदर्भित नहीं किया जा सकता है

— kashlo

ठीक है, numचर का नाम काम नहीं करता है। नाम बदलने की आवश्यकता है

— गुंटर ज़ोचबॉयर

डॉक्स से: ऑनएयर पैरामीटर को हटा दिया जाता है और हटा दिया जाएगा। Num.parse (string, (string) {...}) के बजाय, आपको num.tryParse (string) का उपयोग करना चाहिए ?? (...)।

— 15 दिसंबर को kashlo

Answer 5

उन लोगों के लिए जिन्हें पाठ क्षेत्रों में धन प्रारूप के साथ काम करने की आवश्यकता है :

केवल उपयोग करने के लिए: (अल्पविराम) और। (अवधि)

और प्रतीक को रोकें: - (हाइफ़न, माइनस या डैश)

साथ ही: ⌴ (रिक्त स्थान)

अपने TextField में, बस निम्नलिखित कोड सेट करें:

keyboardType: TextInputType.numberWithOptions(decimal: true),
inputFormatters: [BlacklistingTextInputFormatter(new RegExp('[\\-|\\ ]'))],

कीबोर्ड में सिंबल हाइफ़न और स्पेस अभी भी दिखाई देंगे, लेकिन ब्लॉक हो जाएंगे।

Comments

क्या आप जानते हैं कि केवल एक अल्पविराम या अवधि की अनुमति कैसे दें?

— हेडी फ्रेंको

@HeddieFranco regex के बारे में पढ़ा developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/...

— Fellipe Sanches

Answer 6

आप TextFormField के साथ इस दो विशेषताओं का उपयोग कर सकते हैं

 TextFormField(
         keyboardType: TextInputType.number
         inputFormatters: [WhitelistingTextInputFormatter.digitsOnly],

यह केवल संख्याओं को रखने की अनुमति देता है, कोई बात नहीं ..

https://api.flutter.dev/flutter/services/TextInputFormatter-class.html

Answer 7

आप कीबोर्ड टाइप पैरामीटर का उपयोग करके आसानी से इनपुट प्रकार को बदल सकते हैं और आपके पास बहुत सारी संभावनाएं हैं दस्तावेज़ीकरण की जाँच करें TextInputType ताकि आप संख्या या फोन मान का उपयोग कर सकें

 new TextField(keyboardType: TextInputType.number)

Answer 8

आप यह कोशिश कर सकते हैं:

TextFormField(
     keyboardType: TextInputType.number,
     decoration: InputDecoration(
              prefixIcon: Text("Enter your number: ")
     ),
     initialValue: "5",
     onSaved: (input) => _value = num.tryParse(input),
),

Answer 9

keyboardType: TextInputType.number फोकस पर एक अंक पैड खोलना होगा, जब उपयोगकर्ता प्रवेश करता है, तो मैं टेक्स्ट फ़ील्ड को साफ़ कर दूंगा।

keyboardType: TextInputType.number,
onChanged: (String newVal) {
    if(!isNumber(newVal)) {
        editingController.clear();
    }
}

// Function to validate the number
bool isNumber(String value) {
    if(value == null) {
        return true;
    }
    final n = num.tryParse(value);
    return n!= null;
}

Answer 10

यहाँ Android पर वास्तविक फ़ोन कीबोर्ड के लिए कोड है:

प्रमुख हिस्सा: keyboardType: TextInputType.phone,

  TextFormField(
    style: TextStyle(
      fontSize: 24
    ),
    controller: _phoneNumberController,
    keyboardType: TextInputType.phone,
    decoration: InputDecoration(
      prefixText: "+1 ",
      labelText: 'Phone number'),
    validator: (String value) {
      if (value.isEmpty) {
        return 'Phone number (+x xxx-xxx-xxxx)';
      }
      return null;
    },
  ),

Answer 11

यहाँ संख्यात्मक कीबोर्ड के लिए कोड है: keyboardType: TextInputType.phone जब आप इस कोड को टेक्स्टफ़ील्ड में जोड़ते हैं तो यह संख्यात्मक कीबोर्ड खोल देगा।

  final _mobileFocus = new FocusNode();
  final _mobile = TextEditingController();


     TextFormField(
          controller: _mobile,
          focusNode: _mobileFocus,
          maxLength: 10,
          keyboardType: TextInputType.phone,
          decoration: new InputDecoration(
            counterText: "",
            counterStyle: TextStyle(fontSize: 0),
            hintText: "Mobile",
            border: InputBorder.none,
            hintStyle: TextStyle(
              color: Colors.black,
                fontSize: 15.0.
            ),
          ),
          style: new TextStyle(
              color: Colors.black,
              fontSize: 15.0,
           ),
          );

Comments

ढेर अतिप्रवाह में आपका स्वागत है! कृपया कम से कम कुछ संदर्भ शामिल करें कि यह कोड के साथ कैसे काम करता है।

— ज़िकुआन

Answer 12

नंबर इनपुट या न्यूमेरिक कीबोर्ड के लिए आप कीबोर्ड टाइप का उपयोग कर सकते हैं: TextInputType.number

TextFormField(
  decoration: InputDecoration(labelText:'Amount'),
    controller: TextEditingController(
  ),
  validator: (value) {
    if (value.isEmpty) {
      return 'Enter Amount';
    }
  },
  keyboardType: TextInputType.number
)