पारदर्शी पृष्ठभूमि के साथ स्पंदन कोने त्रिज्या

Question

नीचे मेरा कोड है जो मैं पारदर्शी पृष्ठभूमि के साथ एक गोल-कोने वाले कंटेनर को प्रस्तुत करने की उम्मीद करता हूं।

return new Container(
                //padding: const EdgeInsets.all(32.0),
                height: 800.0,
                //color: const Color(0xffDC1C17),
                //color: const Color(0xffFFAB91),
                decoration: new BoxDecoration(
                  color: Colors.green, //new Color.fromRGBO(255, 0, 0, 0.0),
                  borderRadius: new BorderRadius.only(
                    topLeft:  const  Radius.circular(40.0),
                    topRight: const  Radius.circular(40.0))
                ),
                child:  new Container(
                    decoration: new BoxDecoration(
                        color: Colors.blue,
                        borderRadius: new BorderRadius.only(
                            topLeft:  const  Radius.circular(40.0),
                            topRight: const  Radius.circular(40.0))
                    ),
                  child: new Center(
                    child: new Text("Hi modal sheet"),
                  )

              ),

हालाँकि यह है कि यह क्या प्रदान करता है, यह एक गोल कोने त्रिज्या के साथ एक सफेद कंटेनर (उम्मीद पारदर्शी) प्रदान करता है। कोई मदद?

Answer 1

यदि आप अपने Containerमाता-पिता के अंदर गोल कोनों के साथ लपेटते हैं, तो Colors.transparentमुझे लगता है कि आप जो खोज रहे हैं, वह पृष्ठभूमि रंग के साथ है । यदि आप Scaffoldडिफ़ॉल्ट पृष्ठभूमि रंग का उपयोग कर रहे हैं तो सफेद है। उसको बदलें Colors.transparentअगर वह हासिल करता है जो आप चाहते हैं।

        new Container(
          height: 300.0,
          color: Colors.transparent,
          child: new Container(
            decoration: new BoxDecoration(
              color: Colors.green,
              borderRadius: new BorderRadius.only(
                topLeft: const Radius.circular(40.0),
                topRight: const Radius.circular(40.0),
              )
            ),
            child: new Center(
            child: new Text("Hi modal sheet"),
           )
         ),
        ),

Comments

यदि मैं SliverAppBar में छवि का उपयोग करता हूं , तो वह कैसे करें?

— Md.Abdul हलीम रफ़ी

आप SliverFillRemaining का उपयोग कर सकते हैं (बच्चा: उपर्युक्त)

— JenonD

Answer 2

यदि आप पारदर्शी पृष्ठभूमि के साथ कोनों को गोल करना चाहते हैं, तो सबसे अच्छा दृष्टिकोण क्लिपर्रेट का उपयोग कर रहा है।

return ClipRRect(
  borderRadius: BorderRadius.circular(40.0),
  child: Container(
    height: 800.0,
    width: double.infinity,
    color: Colors.blue,
    child: Center(
      child: new Text("Hi modal sheet"),
    ),
  ),
);

Comments

यह काम करता है .. लेकिन मेरे कंटेनर के अंत में त्रिज्या ओएस बढ़ जाती है : imgur.com/a/Qb5kaVW । आप मेरी मदद कर सकते हैं?

— अगस्तो

के साथ भी काम करता है ColorFiltered। BoxDecorationकोनों में कटौती करने में विफल रहता है, जब आपके पास ColorFilterके साथ BlendMode.color।

— मिलन जारोस

जब showModalBottomSheet के साथ प्रयोग किया जाता है तो आपको बॉटमशीट को निर्दिष्ट करना होगा जैसे @jayjw ने सुझाव दिया है

— Jørgen Andersen

Answer 3

1 मई 2019 तक, बॉटमशीटथीम का उपयोग करें ।

MaterialApp(
    theme: ThemeData(
      // Draw all modals with a white background and top rounded corners
      bottomSheetTheme: BottomSheetThemeData(
        backgroundColor: Colors.white,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.vertical(top: Radius.circular(10))
        )
      )
    ),

हाल ही में प्रस्तुत किया गया , चादर शैली को नियंत्रित करने के लिए एक विषय का उपयोग करना इस समस्या के लिए सबसे अच्छा होना चाहिए।

यदि आप अलग-अलग बॉटम शीट को अलग-अलग थीम देना चाहते हैं, तो उस क्षेत्र के लिए नीचे की शीट थीम को ओवरराइड करने के लिए उपयुक्त सबट्री में एक नई थीम ऑब्जेक्ट शामिल करें।

यदि किसी कारण से आप अभी भी थीम को मैन्युअल रूप से ओवरराइड करना चाहते हैं, तो नीचे की शीट लॉन्च करते समय, ShowBottomSheet और showModalBottomSheet अब एक बैकग्राउंडर पैरामीटर है। इसे इस तरह उपयोग करें:

 showModalBottomSheet(
    backgroundColor: Colors.transparent,
    context: context,
    builder: (c) {return NavSheet();},
  );

विषय का उपयोग करने से एप्लिकेशन / ऐप की वर्तमान थीम की परवाह किए बिना नीचे की शीट को फिर से उपयोग करने की अनुमति मिलती है, और कैनवास रंग को स्थापित करने के नकारात्मक प्रभावों में से कोई भी नहीं है जैसा कि उल्लेख किया गया है।

Comments

यह स्वीकृत उत्तर होना चाहिए ... पूरी तरह से काम करता है!

— जॉन डेटलेफ़्स

backgroundColor: Colors.transparent,मेरे लिए काम किया

— tudorprodan

Answer 4

/// Create the bottom sheet UI
  Widget bottomSheetBuilder(){
    return Container(
      color: Color(0xFF737373), // This line set the transparent background
      child: Container(
        decoration: BoxDecoration(
          color: Colors.white,
            borderRadius: BorderRadius.only(
                topLeft: Radius.circular(16.0),
                topRight: Radius.circular( 16.0)
            )
        ),
        child: Center( child: Text("Hi everyone!"),)
      ),
    );
  }

बॉटूमशीट को कोनों से दिखाने के लिए इसे कॉल करें:

/// Show the bottomSheet when called
  Future _onMenuPressed() async {
    showModalBottomSheet(
        context: context,
        builder: (widgetBuilder) => bottomSheetBuilder()
    );
  }

Answer 5

यह एक पुराना सवाल है। लेकिन इस सवाल पर आने वालों के लिए ...

गोल कोनों के पीछे की सफेद पृष्ठभूमि वास्तव में कंटेनर नहीं है। यह ऐप का कैनवास कलर है।

TO FIX: अपने ऐप के कैनवास रंग को Colors.transparent में बदलें

उदाहरण:

return new MaterialApp(
  title: 'My App',
  theme: new ThemeData(
    primarySwatch: Colors.green,
    canvasColor: Colors.transparent, //----Change to this------------
    accentColor: Colors.blue,
  ),
  home: new HomeScreen(),
);

Comments

इसमें कुछ कमियां हैं। अन्य वस्तुएं जो कैनवास के रंग पर निर्भर करती हैं, जैसे ताज़ा आइकन, में सफेद के बजाय एक पारदर्शी पृष्ठभूमि होगी।

— जॉर्ज मेनजीवर

मैं ऐसा करने की सलाह नहीं दूंगा। बहुत सारे विजेट कैनवास के रंग पर निर्भर करते हैं और उन सभी को व्यक्तिगत रूप से सेट करने की आवश्यकता होती है।

— मौर्य

सबसे अच्छा जवाब, यह शीर्ष उत्तर होना चाहिए।

— एल्विन क्विज़ॉन

जब इस का उपयोग, सभी canvasColorके स्पंदन widgets के लिए बदल जाएगा color.transparent, खुला दराज की कोशिश करें, यू क्या देखते हैं!

— नौरेईं

आखिरकार! मेरा मुद्दा हल किया।

— mbartn 18

Answer 6

Scaffold(
  appBar: AppBar(
    title: Text('BMI CALCULATOR'),
  ),
  body: Container(
    height: 200,
    width: 170,
    margin: EdgeInsets.all(15),
    decoration: BoxDecoration(
      color: Color(
        0xFF1D1E33,
      ),
      borderRadius: BorderRadius.circular(5),
    ),
  ),
);

Answer 7

मोडलबॉटम्सशीट के लिए पारदर्शी पृष्ठभूमि रंग का उपयोग करें और बॉक्स सजावट के लिए अलग रंग दें

---

   showModalBottomSheet(
      backgroundColor: Colors.transparent,
      context: context, builder: (context) {
    return Container(

      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.only(
            topLeft:Radius.circular(40) ,
            topRight: Radius.circular(40)
        ),
      ),
      padding: EdgeInsets.symmetric(vertical: 20,horizontal: 60),
      child: Settings_Form(),
    );
  });

Answer 8

कई उन्नत विकल्पों के साथ इस मुद्दे को कवर करने के लिए तीन संबंधित पैकेज हैं:

• sliding_up_panel
• modal_bottom_sheet
• sliding_panel

Answer 9

class MyApp2 extends StatelessWidget {

  @override
  Widget build(BuildContext context) { 
    return MaterialApp( 
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        appBarTheme: AppBarTheme(
          elevation: 0,
          color: Colors.blueAccent,
        )
      ),
      title: 'Welcome to flutter ',
      home: HomePage()
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

  int number = 0;
  void _increment(){
   setState(() {
      number ++;
   });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.blueAccent,
        appBar: AppBar(
          title: Text('MyApp2'), 
          leading: Icon(Icons.menu),
          // backgroundColor: Colors.blueAccent,

          ),
        body: Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(200.0),
              topRight: Radius.circular(200)
            ), 
            color: Colors.white,
          ),
        )
      );
  }
}

Answer 10

showModalBottomSheet(
   context: context,
   builder: (context) => Container(
            color: Color(0xff757575), //background color 
            child:  new Container(
                decoration: new BoxDecoration(
                    color: Colors.blue,
                    borderRadius: new BorderRadius.only(
                        topLeft:  const  Radius.circular(40.0),
                        topRight: const  Radius.circular(40.0))
                ),
              child: new Center(
                child: new Text("Hi modal sheet"),
              )

     

 ),

)

यह आपके कंटेनर के रंग को पृष्ठभूमि के रंग के समान बना देगा। और नीले रंग के साथ एक ही ऊंचाई-चौड़ाई का एक बच्चा कंटेनर होगा। यह कोने को पृष्ठभूमि के रंग के समान रंग के साथ बना देगा।