ListView.builder के साथ विस्तारित विजेट का कोई भी विकल्प

Question

मुझे एक स्क्रीन डिजाइन करने की आवश्यकता है जो एक अलग विजेट (चयनित विजेट) दिखाता है, जिसके आधार पर बटन का चयन किया जाता है। समस्या यह है कि सामग्री गतिशील है और मुझे सभी API के लिए ListView.builder का उपयोग करना होगा। और लिस्ट व्यू.बिल्डर केवल तभी काम करता है जब रो युक्त सूचीविस्तार को विस्तृत विजेट में लपेटा जाता है। मैं अपने ListView के ठीक नीचे दो बटन रखना चाहता हूं, जिसे मैं विस्तारित विजेट के कारण हासिल नहीं कर पा रहा हूं, जो पूरे कॉलम को कवर करता है जिसमें ListView मौजूद है।

यह वह डिज़ाइन है जिसकी मुझे आवश्यकता है।

कोड मूल संरचना देता है जो मैं उपयोग कर रहा हूं। चयनित विजेट लिस्ट व्यू.बिल्डर विजेट है जिसे चयनित फ्लैटबटन के अनुसार चुना जाएगा। इसके अलावा, कॉलम जिसमें चयनित विजेट शामिल है उसकी गतिशील ऊंचाई है। इसे सूची के आकार के अनुसार समायोजित किया जाना चाहिए, इसलिए मैं निश्चित ऊंचाई या अधिकतम ऊंचाई को परिभाषित नहीं कर सकता। मैं यहां केवल मिनहाइट दे सकता हूं। और मेरे ListView के नीचे के दो बटन मेरे ListView के ठीक नीचे होने चाहिए और फ्लेक्स 3 के साथ कॉलम की चौड़ाई लें।

मैंने ListView के लिए स्क्रॉल को अक्षम करने और SingleChildScrollView का उपयोग करने की भी कोशिश की है, लेकिन फिर ListView के नीचे मेरे दो बटन भी स्क्रॉल करना शुरू करते हैं, जो मुझे नहीं चाहिए। मुझे उन्हें स्क्रीन पर स्थिर होने की आवश्यकता है और केवल सूची दृश्य स्क्रॉल करना चाहिए।

मुझे उपरोक्त समस्या के समाधान की आवश्यकता है। मुझे इस विस्तृत विजेट के लिए वर्कअराउंड की आवश्यकता है जो मुझे मेरी सूची के ठीक नीचे अपने बटन संरेखित नहीं करने देता है और सफेद स्थान देता है। कृपया साझा करें यदि लिस्ट व्यू.बिल्डर का कोई विकल्प है क्योंकि मुझे नहीं लगता कि मैं विस्तृत विजेट के बिना लिस्ट व्यू.बिल्डर का उपयोग कर सकता हूं। मैंने ListView और विस्तारित विजेट के साथ हर संभव संरचना की कोशिश की है।

class MyScreen extends StatefulWidget {
  @override
  _MyScreenState createState() => _MyScreenState();
}

class _MyScreenState extends State<MyScreen> {
  @override
  Widget build(BuildContext context) {
    return Column(
    children:[
      Expanded(
          child: Row(
          Expanded(flex: 2,
            child: Column(
                children: [
                    FlatButton(),
                    FlatButton(),
                    FlatButton(),
                    FlatButton(),
                ]
            )
           ),
          Expanded(flex: 3, 
            child: Column(
                children: [
                    Expanded(selectedWidget),
                    Row(children: [FlatButton(), FlatButton()], )
                ]
            )
          ),
      )
      )
    ],);
  }
  
}

Answer 1

हो सकता है कि आप ListView के अंदर उपयोग Flexibleऔर सेट कर सकते हैं shrinkWrap: true,। निम्न 2 बटन को Expandउसके बाद विजेट की आवश्यकता नहीं हो सकती है।

child: Column(
  children: [
    Flexible(
      child: ListView.builder(
        shrinkWrap: true,
        itemBuilder: (BuildContext context, int index) => Text(index.toString()),
        itemCount: 6,
      ),
    ),
    Row(
      ... // 2 Buttons