मैं इस तरह का इनपुट फील्ड बनाना चाहता हूं।

widget to be achieved

मुझे पबदेव में एक flutter_chip_input पैकेज मिला जो पहले से ही इस कार्यक्षमता की सेवा करता है लेकिन यह थोड़ी छोटी थी। मेरे पास प्लगइन के अगले अपडेट की प्रतीक्षा करने का समय नहीं है इसलिए मैंने आगे बढ़ने और इसे स्वयं बनाने का फैसला किया।

वेब ऐप में, मैं सीएसएस और कुछ जावास्क्रिप्ट में सापेक्ष-पूर्ण संपत्ति का उपयोग करके आसानी से इस डिज़ाइन को प्राप्त कर सकता हूं।

हां, मैंने पहले ही स्टैक विजेट का उपयोग करने की कोशिश की है, लेकिन समस्या यह है कि Container (इनपुट फ़ील्ड के निचले भाग में सफेद सूची का एक आवरण) नीचे तक नहीं टिकेगा।

जब भी अधिक सामग्री लोड की जाती है, तो ऊंचाई नीचे जाने के बजाय ऊपर की ओर बढ़ती है, जिससे इनपुट फ़ील्ड कंटेनर के नीचे छिपा हो जाता है।

मुझे केवल यह जानने की जरूरत है कि सूची को इनपुट फ़ील्ड के नीचे कैसे चिपकाया जाए और ऊंचाई को नीचे तक कैसे बढ़ाया जाए। बाकी मैं संभाल लूंगा।

कोई सुराग? कृपया मेरी वर्तमान स्क्रिप्ट पर एक नज़र डालें:

@override
Widget build(BuildContext context) {
  return Stack(
    alignment: AlignmentDirectional.bottomCenter,
    overflow: Overflow.visible,
    children: [
      TextFormField(
        focusNode: _focusNode,
        decoration: widget.decoration,
        onChanged: (String query) {
          print(query);
        },
      ),
      Positioned(
        bottom: -30,
        left: 0,
        right: 0,
        child: Container(
          height: 100,
          decoration: BoxDecoration(
            color: Theme.of(context).cardColor,
            borderRadius: BorderRadius.circular(20),
          ),
          child: Text('asdasdasd'),
        ),
      ),
    ],
  );
}

अग्रिम में धन्यवाद!

0
Tamma 10 अगस्त 2020, 08:16

3 जवाब

सबसे बढ़िया उत्तर

आप इसे फ़्लोट करने के लिए OverlayEntry का उपयोग कर सकते हैं और CompositeTransformTarget और CompositeTransformFollower को LayerLink के साथ जोड़ सकते हैं, इसलिए सूची इनपुट के निचले भाग तक रहेगी।

उदाहरण के कार्यान्वयन के लिए आप इस लेख को पढ़ सकते हैं

स्पंदन: फ़्लोटिंग विजेट प्रदर्शित करने के लिए ओवरले का उपयोग करना

2
skybur 11 अगस्त 2020, 13:55

एक searchDelegate विजेट का उपयोग करने का प्रयास करें यदि आप इसके पूर्ण स्क्रीन पर कब्जा करने के साथ ठीक हैं। इसे इस्तेमाल करना काफी आसान है।

यहां दस्तावेज़: https://api.flutter.dev/flutter/material/SearchDelegate -class.html

संपादित करें: मेरा बुरा, ऐपबार में इसका उपयोग करना जरूरी नहीं है। बुलाना

showSearch(context: context, delegate: SearchDel()); कहीं से भी। यह पूर्ण स्क्रीन थो लेता है।

यदि नहीं, तो मुझे विजेट के लिए कोड जोड़ना होगा। कुछ उपाय करने के बारे में सोचा।

1
Crazzygamerr 10 अगस्त 2020, 18:55

इस बारे में कैसा है? बिना स्टैक के जुगा बीसा कोक

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    IntrinsicWidth(
      child: Container(
        constraints: BoxConstraints(
          minWidth: 200,
        ),
        child: TextFormField(
          onChanged: (String query) {
            print(query);
          },
        ),
      ),
    ),
    Container(
      constraints: BoxConstraints(
        minHeight: 100,
      ),
      child: Column(
        children: [
          Container(
            padding: EdgeInsets.all(12),
            decoration: BoxDecoration(
              color: Theme.of(context).cardColor,
              borderRadius: BorderRadius.circular(8),
            ),
            child: Text('asdasdasd'),
          ),
          Container(
            padding: EdgeInsets.all(12),
            decoration: BoxDecoration(
              color: Theme.of(context).cardColor,
              borderRadius: BorderRadius.circular(8),
            ),
            child: Text('asdasdasd'),
          ),
          Container(
            padding: EdgeInsets.all(12),
            decoration: BoxDecoration(
              color: Theme.of(context).cardColor,
              borderRadius: BorderRadius.circular(8),
            ),
            child: Text('asdasdasd'),
          ),
        ]
      ),
    ),
  ],
),
0
Miko 10 अगस्त 2020, 18:28