स्पंदन: HintText के साथ एक TextField कैसे बना लेकिन कोई रेखांकन नहीं?


116

यह मैं बनाने की कोशिश कर रहा हूँ:

यहां छवि विवरण दर्ज करें

पाठ फ़ील्ड ( https://flutter.io/text-input/ ) के लिए फ़्लटर डॉक्स में यह कहता है कि आप nullसजावट को पारित करके अंडरलाइन को हटा सकते हैं । हालाँकि, यह भी संकेत पाठ से छुटकारा दिलाता है।

मैं यह रेखांकित नहीं करना चाहता कि पाठ क्षेत्र केंद्रित है या नहीं।

अद्यतन: अप्रैल 2020 तक फ़्लटर एसडीके में परिवर्तन को प्रतिबिंबित करने के लिए अद्यतन स्वीकृत उत्तर।

जवाबों:


78

उपरोक्त उत्तर में से नया फ़्लटर एसडीके के लिए काम करेगा क्योंकि वेब और डेस्कटॉप समर्थन के एकीकरण के बाद आपको व्यक्तिगत रूप से इस तरह निर्दिष्ट करने की आवश्यकता होती है

TextFormField(
    cursorColor: Colors.black,
    keyboardType: inputType,
    decoration: new InputDecoration(
        border: InputBorder.none,
        focusedBorder: InputBorder.none,
        enabledBorder: InputBorder.none,
        errorBorder: InputBorder.none,
        disabledBorder: InputBorder.none,
        contentPadding:
            EdgeInsets.only(left: 15, bottom: 11, top: 11, right: 15),
        hintText: sLabel),
  )

232

इसको ऐसे करो:

TextField(
  decoration: new InputDecoration.collapsed(
    hintText: 'Username'
  ),
),

या यदि आपको आइकन जैसे अन्य सामान की आवश्यकता है, तो सीमा के साथ सेट करें InputBorder.none

InputDecoration(
    border: InputBorder.none,
    hintText: 'Username',
  ),
),

क्या materialपैकेज को आयात किए बिना ऐसा करना संभव है ? के लिए अर्थात Cupertinoविषय?
कोसीरा - बार्टोज़ कोसार्की

मैं बचना चाहूंगा: InputDecoration' can't be assigned to the parameter type 'BoxDecoration'टाइप एरर
कोसीरा - बार्टोज़ कोसार्की

13

केंद्रित बॉर्डर को किसी में न बदलें

TextField(
      decoration: new InputDecoration(
          border: InputBorder.none,
          focusedBorder: InputBorder.none,
          contentPadding: EdgeInsets.only(left: 15, bottom: 11, top: 11, right: 15),
          hintText: 'Subject'
      ),
    ),

12

यहां एक पूरक उत्तर दिया गया है जो कुछ पूर्ण कोड दिखाता है:

यहां छवि विवरण दर्ज करें

  Container(
    decoration: BoxDecoration(
      color: Colors.tealAccent,
      borderRadius:  BorderRadius.circular(32),
    ),
    child: TextField(
      decoration: InputDecoration(
        hintStyle: TextStyle(fontSize: 17),
        hintText: 'Search your trips',
        suffixIcon: Icon(Icons.search),
        border: InputBorder.none,
        contentPadding: EdgeInsets.all(20),
      ),
    ),
  ),

टिप्पणियाँ:

  • डार्क बैकग्राउंड (कोड नहीं दिखाया गया) है Colors.teal
  • InputDecorationएक संपत्ति filledऔर fillColorसंपत्ति भी है , लेकिन मैं उन्हें एक कोने के दायरे में नहीं ला सकता था, इसलिए मैंने इसके बजाय एक कंटेनर का उपयोग किया।

3

मैंने पाया कि कोई अन्य उत्तर सीमा त्रिज्या नहीं देता है, आप बस इसे इस तरह से कर सकते हैं, कोई नेस्टेड नहीं Container

  TextField(
    decoration: InputDecoration(
      border: OutlineInputBorder(
        borderSide: BorderSide.none,
        borderRadius: BorderRadius.circular(20),
      ),
    ),
  );

-1

मैं TextFieldस्पंदन नियंत्रण का उपयोग कर रहा था। मुझे नीचे दिए गए तरीकों का उपयोग करके उपयोगकर्ता टाइप किया गया इनपुट मिला।

onChanged:(value){
}

-2
decoration: InputDecoration(
 border:OutLineInputBorder(
 borderSide:BorderSide.none
 bordeRadius: BordeRadius.circular(20.0)
 )
)

इस उत्तर और @E के बीच क्या अंतर है एक महीने पहले से सूरज का जवाब ?
जेरेमी कैने जूल

आप कुछ नया चाहते हैं?
एसआर केशव

2
यदि कोई उत्तर पहले ही प्रदान किया जा चुका है, तो उसे फिर से जमा करने की कोई आवश्यकता नहीं है। ऐसा करने से भविष्य के पाठकों के लिए केवल शोर पैदा होता है, क्योंकि उन्हें कई समान उत्तरों के माध्यम से हल करने की आवश्यकता होती है। भविष्य में, एक बार जब आप थोड़ी अधिक प्रतिष्ठा प्राप्त कर लेंगे, तो आप मौजूदा उत्तरों को बढ़ा पाएंगे; यह एक दृष्टिकोण को मान्य करने और हल करने की पुष्टि करता है कि समाधान काम करता है।
जेरेमी कैनी जूल

1
मुझे ध्यान देना चाहिए कि इस अवसर पर, योगदानकर्ता अभी भी एक समान सलाह पोस्ट करेंगे यदि उनके पास इसे समझाने का एक अलग तरीका है, या काफी महत्वपूर्ण विवरण जोड़ना चाहते हैं। वह पूरी तरह से ठीक है। यहाँ मुद्दा यह है कि आप एक ही उत्तर प्रदान करते हैं , लेकिन कम विवरण के साथ , इसलिए यह थ्रेड में बहुत योगदान नहीं देता है।
जेरेमी कैने जूल
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.