Aşağıda, şeffaf bir arka plana sahip yuvarlak köşeli bir kapsayıcı oluşturmayı beklediğim kodum var.

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

              ),

Bununla birlikte, yaptığı şey budur, yuvarlak bir köşe yarıçapına sahip beyaz bir kabı (beklenen şeffaf) yapar. Herhangi bir yardım?

İstemiyorsun, mutfakta annene sarın Eğer Containerarka plan rengi seti ile bir ebeveyn iç köşeleri yuvarlatılmış için Colors.transparentben aradığınız yapar düşünüyorum. ScaffoldVarsayılan bir arka plan rengi kullanıyorsanız beyazdır. Colors.transparentİstediğinizi başarırsa bunu olarak değiştirin .

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

Şeffaf arka plan ile köşeleri yuvarlatmak istiyorsanız, en iyi yaklaşım ClipRRect kullanmaktır.

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

1 Mayıs 2019 itibarıyla BottomSheetTheme'yi kullanın .

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

Son zamanlarda tanıtılan , sayfa stilini kontrol etmek için bir tema kullanmak, bu problem için en iyisi olmalıdır.

Farklı alt sayfaları farklı şekilde temalandırmak istiyorsanız, yalnızca o alan için alt sayfa temasını geçersiz kılmak için uygun alt ağaca yeni bir Tema nesnesi ekleyin.

Bir alt sayfayı başlatırken herhangi bir nedenle temayı manuel olarak geçersiz kılmak isterseniz, showBottomSheet ve showModalBottomSheet artık bir backgroundColor parametresine sahiptir. Bunu şu şekilde kullanın:

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

Temayı kullanmak, alt sayfaların uygulamanın / uygulamanın mevcut temasına bakılmaksızın yeniden kullanılmasına izin verir ve tuval rengini ayarlamanın belirtilen olumsuz yan etkilerinin hiçbirine sahip değildir.

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

BotoomSheet'i köşelerle göstermek için bunu arayın:

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

Bu eski bir soru. Ama bu soruyla karşılaşanlar için ...

Yuvarlatılmış köşelerin arkasındaki beyaz fon aslında kap değildir. Bu, uygulamanın tuval rengidir.

DÜZELTMEK İÇİN: Uygulamanızın tuval rengini Colors.transparent olarak değiştirin

Misal:

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

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

Modal alt tabaka için şeffaf arka plan rengi kullanın ve kutu dekorasyonu için ayrı bir renk verin

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

Bu sorunu birçok gelişmiş seçenekle ele almak için ilgili üç paket şunlardır:

• sliding_up_panel
• modal_bottom_sheet
• sliding_panel

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

     

 ),

)

Bu, kap renginizin arka plan rengiyle aynı olmasını sağlar. Ve mavi renk ile aynı yükseklik genişliğinde bir alt konteyner olacaktır. Bu, köşeyi arka plan rengiyle aynı renkte yapacaktır.

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