Unten ist mein Code, mit dem ich einen Container mit runden Ecken und transparentem Hintergrund rendern möchte.

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

              ),

Dies ist jedoch das, was es rendert, es macht einen weißen Behälter (erwartet transparent) mit einem runden Eckenradius. Irgendeine Hilfe?

Wenn Sie Ihre Containermit abgerundeten Ecken in ein Elternteil mit der Hintergrundfarbe einwickeln Colors.transparent, macht das meiner Meinung nach genau das, wonach Sie suchen. Wenn Sie eine verwenden, ist Scaffolddie Standardhintergrundfarbe Weiß. Ändern Sie das in, Colors.transparentwenn das erreicht, was Sie wollen.

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

Wenn Sie Ecken mit transparentem Hintergrund abrunden möchten, verwenden Sie am besten ClipRRect.

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

Verwenden Sie ab dem 1. Mai 2019 BottomSheetTheme .

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

Die kürzlich eingeführte Verwendung eines Themas zur Steuerung des Blattstils sollte für dieses Problem am besten geeignet sein.

Wenn Sie verschiedene untere Blätter unterschiedlich gestalten möchten, fügen Sie ein neues Themenobjekt in den entsprechenden Teilbaum ein, um das untere Blatt-Thema nur für diesen Bereich zu überschreiben.

Wenn Sie das Thema beim Starten eines unteren Blattes aus irgendeinem Grund immer noch manuell überschreiben möchten, haben showBottomSheet und showModalBottomSheet jetzt einen backgroundColor- Parameter. Verwenden Sie es so:

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

Die Verwendung des Themas ermöglicht die Wiederverwendung von unteren Blättern unabhängig vom aktuellen Thema der App / App und hat keine der negativen Nebenwirkungen beim Festlegen der Leinwandfarbe, wie erwähnt.

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

Rufen Sie dies auf, um das BotoomSheet mit den Ecken anzuzeigen:

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

Das ist eine alte Frage. Aber für diejenigen, die auf diese Frage stoßen ...

Der weiße Hintergrund hinter den abgerundeten Ecken ist eigentlich nicht der Behälter. Das ist die Leinwandfarbe der App.

ZU BEHEBEN: Ändern Sie die Leinwandfarbe Ihrer App in Colors.transparent

Beispiel:

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

Verwenden Sie eine transparente Hintergrundfarbe für das Modalbottomsheet und geben Sie eine separate Farbe für die Boxdekoration an

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

Drei verwandte Pakete zur Abdeckung dieses Problems mit vielen erweiterten Optionen sind:

• sliding_up_panel
• modal_bottom_sheet
• Schiebetafel

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

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

     

 ),

)

Dadurch wird die Farbe Ihres Behälters mit der Hintergrundfarbe identisch. Und es wird einen Kindercontainer mit der gleichen Höhe und Breite und blauer Farbe geben. Dadurch hat die Ecke die gleiche Farbe wie die Hintergrundfarbe.