Di seguito è riportato il mio codice che mi aspetto di rendere un contenitore ad angolo tondo con uno sfondo trasparente.

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

              ),

Tuttavia questo è ciò che rende, rende un contenitore bianco (trasparente previsto) con un raggio d'angolo arrotondato. Qualsiasi aiuto?

Se avvolgi il tuo Containercon angoli arrotondati all'interno di un genitore con il colore di sfondo impostato su Colors.transparentpenso che faccia quello che stai cercando. Se stai usando un Scaffoldcolore di sfondo predefinito è il bianco. Cambialo in Colors.transparentse ottieni ciò che desideri.

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

Se vuoi arrotondare gli angoli con uno sfondo trasparente, l'approccio migliore è usare 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"),
    ),
  ),
);

A partire dal 1 ° maggio 2019, usa 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))
        )
      )
    ),

Introdotto di recente, l'utilizzo di un tema per controllare lo stile dei fogli dovrebbe essere il migliore per risolvere questo problema.

Se si desidera applicare un tema diverso ai diversi fogli inferiori, includere un nuovo oggetto Tema nella sottostruttura appropriata per sovrascrivere il tema del foglio inferiore solo per quell'area.

Se per qualche motivo desideri ancora sovrascrivere il tema manualmente quando avvii un foglio inferiore, showBottomSheet e showModalBottomSheet ora hanno un parametro backgroundColor . Usalo in questo modo:

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

L'utilizzo del tema consente di riutilizzare i fogli inferiori indipendentemente dal tema corrente dell'app / app e non ha nessuno degli effetti collaterali negativi dell'impostazione del colore della tela come menzionato.

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

Chiamalo per mostrare il BotoomSheet con gli angoli:

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

È una vecchia domanda. Ma per coloro che si imbattono in questa domanda ...

Lo sfondo bianco dietro gli angoli arrotondati non è effettivamente il contenitore. Questo è il colore della tela dell'app.

PER RISOLVERE: Cambia il colore della tela della tua app in Colors.transparent

Esempio:

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

Usa un colore di sfondo trasparente per il modalbottomsheet e dai un colore separato per la decorazione della scatola

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

Tre pacchetti correlati per coprire questo problema con molte opzioni avanzate sono:

• slide_up_panel
• modal_bottom_sheet
• scorrevole_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"),
              )

     

 ),

)

Questo renderà il colore del contenitore uguale al colore di sfondo. E ci sarà un contenitore figlio della stessa altezza-larghezza con colore blu. Questo renderà l'angolo dello stesso colore del colore di sfondo.

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