मैं स्पंदन वेब के लिए मोबाइल ऐप कोड का पुन: उपयोग करना चाहता हूं। मैं पहले से ही सभी स्क्रीन में पाड़ में AppBar () और शरीर विजेट के साथ कोडित। अब मैं वेब के लिए 400 चौड़ाई और केंद्र ले रहा हूं, यह एपबार को छोड़कर अच्छा है।

        Scaffold(
        appBar: this.getAppBarWidget(),
        body: Center(
          child: Container(
            width: kIsWeb ? 400.0 : MediaQuery.of(context).size.width,
            child: this.getBodyWidget(),
          ),
        ))

उपरोक्त कोड वेब में एपबार को छोड़कर मोबाइल और वेब की सभी स्क्रीनों के लिए पूरी तरह से काम कर रहा है।

चौड़ाई 400 फिट करने के लिए मैं ऐपबार की चौड़ाई कैसे बदलूं?

अगर मैं Size.fromWidth(400) त्रुटि प्राप्त करने का उपयोग करता हूं।

नीचे दिया गया कोड मोबाइल और वेब के लिए काम कर रहा है।

   Scaffold(
    body: Center(
  child: Container(
    width: kIsWeb ? 400.0 : MediaQuery.of(context).size.width,
    child: Column(
      children: [
        this.getCustomAppbarWidget(),
        this.getBodyWidget(),
      ],
    ),
  ),
))

कृपया मुझे सुझाव दें।

1
MaheshPeri19 4 सितंबर 2021, 05:09

2 जवाब

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

आकार इस विजेट को पसंद करेगा यदि यह अन्यथा अप्रतिबंधित होता। कई मामलों में केवल एक पसंदीदा आयाम को परिभाषित करना आवश्यक है। उदाहरण के लिए [मचान] केवल उसके ऐप बार की पसंदीदा ऊंचाई पर निर्भर करता है। उस स्थिति में इस पद्धति का कार्यान्वयन केवल नया आकार लौटा सकता है। से हाइट (myAppBarHeight)।

लेकिन हम customAppBar जैसे प्रदान कर सकते हैं

class MyAppBar extends StatelessWidget implements PreferredSizeWidget {
  const MyAppBar({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Align(
      alignment: Alignment.centerLeft,
      child: Container(
        alignment: Alignment.center,
        color: Colors.pink,
        // we can set width here with conditions
        width: 200,
        height: kToolbarHeight,
        child: Text("MY AppBar"),
      ),
    );
  }

  ///width doesnt matter
  @override
  Size get preferredSize => Size(200, kToolbarHeight);
}

और उपयोग करें

Scaffold(
      extendBodyBehindAppBar: true,
      appBar: MyAppBar(),
      body: ......

अगर यह शरीर की पहली वस्तु को कवर करता है, और इस मामले में जरूरत पड़ने पर स्थिति को संभालने के लिए SizedBox(height: kToolbarHeight) का उपयोग करें। परिणाम

enter image description here

1
Yeasin Sheikh 4 सितंबर 2021, 14:24

जैसा कि मुझे पता है, AppBar में चौड़ाई की अनुमति नहीं थी। AppBar . में केवल ऊंचाई की अनुमति है

toolbarHeight: 60,

लेकिन अगर आप अपने ऐपबार में मैन्युअल रूप से चौड़ाई लागू करना चाहते हैं तो आप अपने ऐपबार को पैडिंग घटक में लपेट सकते हैं

return Scaffold(
      body: Column(
        children: [
          Container(
            width: kIsWeb? 400 : double.maxFinite,
            child: AppBar(
              title: Text('hello'),
            ),
          ),
          Expanded(child: HomePageOne()), // this expanded is you page body
        ],
      ),
    );
1
HasanToufiqAhamed 4 सितंबर 2021, 08:05