স্বচ্ছ ব্যাকগ্রাউন্ড সহ বিড়বিড় কর্নার ব্যাসার্ধ

Question 1

নীচে আমার কোড যা আমি একটি স্বচ্ছ পটভূমি সহ একটি বৃত্তাকার কোণার ধারক রেন্ডার আশা করি।

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"),
                  )

              ),

তবে এটি যা রেন্ডার করে এটি এটি একটি গোলাকার কোণার ব্যাসার্ধের সাথে একটি সাদা ধারক (প্রত্যাশিত স্বচ্ছ) সরবরাহ করে। কোন সাহায্য?

স্ক্রিনশট

Question 2

আপনি যদি 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"),
           )
         ),
        ),

Question 3

আপনি যদি স্বচ্ছ ব্যাকগ্রাউন্ডের সাথে কোণগুলিকে গোল করতে চান তবে ক্লিপআরেক্ট ব্যবহার করে সর্বোত্তম পন্থা।

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"),
    ),
  ),
);

Question 4

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))
        )
      )
    ),

সম্প্রতি পরিচয় করানো হয়েছে, চাদর শৈলী নিয়ন্ত্রণ করতে একটি থিম ব্যবহার করা এই সমস্যার সবচেয়ে ভাল হওয়া উচিত।

যদি আপনি বিভিন্ন নীচের শিটগুলি আলাদাভাবে থিম করতে চান তবে কেবলমাত্র সেই অঞ্চলের নীচে শিট থিমটি ওভাররাইড করার জন্য উপযুক্ত সাবট্রিতে একটি নতুন থিম অবজেক্ট অন্তর্ভুক্ত করুন।

যদি কোনও কারণে আপনি এখনও নীচের শিটটি চালু করার সময় থিমটিকে ম্যানুয়ালি ওভাররাইড করতে চান তবে শোবটমশিট এবং শোমডালবটমশিটে এখন ব্যাকগ্রাউন্ড কালার প্যারামিটার রয়েছে। এটি এর মতো ব্যবহার করুন:

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

থিমটি ব্যবহার করে নীচে শীটগুলি অ্যাপ / অ্যাপের বর্তমান থিম নির্বিশেষে পুনরায় ব্যবহারের অনুমতি দেয় এবং উল্লিখিত হিসাবে ক্যানভাসের রঙ সেট করার নেতিবাচক পার্শ্ব প্রতিক্রিয়াগুলির কোনওটিই নেই।

Question 5

/// 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()
    );
  }

Question 6

এটি একটি পুরানো প্রশ্ন। তবে যারা এই প্রশ্নটি জুড়ে আসেন তাদের জন্য ...

গোলাকার কোণগুলির পিছনে সাদা ব্যাকগ্রাউন্ড আসলে ধারক নয়। এটি অ্যাপের ক্যানভাস রঙ।

ঠিক করুন: আপনার অ্যাপ্লিকেশনের ক্যানভাসের রঙটি কলার্স.টান্সপারেন্টে পরিবর্তন করুন

উদাহরণ:

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

Question 7

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),
    ),
  ),
);

Question 8

মডেলবটমশিটের জন্য স্বচ্ছ পটভূমির রঙ ব্যবহার করুন এবং বাক্স সজ্জায় পৃথক রঙ দিন

   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(),
    );
  });

Question 9

অনেক উন্নত বিকল্প সহ এই সমস্যাটি কভার করার জন্য সম্পর্কিত তিনটি প্যাকেজ হ'ল:

Question 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"),
              )

     

 ),

)

এটি আপনার পাত্রে রঙটিকে পটভূমির রঙের মতো করে তুলবে। এবং নীল বর্ণের সাথে একই উচ্চতা-প্রস্থের একটি শিশু ধারক থাকবে। এটি পটভূমির রঙের মতো একই রঙের সাথে কোণটি তৈরি করবে।

Question 11

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,
          ),
        )
      );
  }
}