Abaixo está meu código, que espero renderizar um contêiner de canto arredondado com um fundo transparente.
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"),
)
),
No entanto, isso é o que ele renderiza, ele renderiza um contêiner branco (transparente esperado) com um raio de canto redondo. Qualquer ajuda?
Se você deseja arredondar cantos com fundo transparente, a melhor abordagem é usar 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"), ), ), );
fonte
ColorFiltered
. OBoxDecoration
falha em cortar custos, se você tiverColorFilter
comBlendMode.color
.A partir de 1º de maio de 2019, use 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)) ) ) ),
Introduzido recentemente, usar um tema para controlar o estilo das folhas deve ser o melhor para esse problema.
Se quiser criar um tema diferente para as folhas inferiores, inclua um novo objeto Tema na subárvore apropriada para substituir o tema da folha inferior apenas para essa área.
Se, por algum motivo, você ainda deseja substituir o tema manualmente ao iniciar uma folha inferior, showBottomSheet e showModalBottomSheet agora têm um parâmetro backgroundColor . Use-o assim:
showModalBottomSheet( backgroundColor: Colors.transparent, context: context, builder: (c) {return NavSheet();}, );
Usar o tema permite que as folhas de baixo sejam reutilizadas independentemente do tema atual do app / app e não tem nenhum dos efeitos colaterais negativos de definir a cor da tela conforme mencionado.
fonte
backgroundColor: Colors.transparent,
trabalhou para mim/// 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!"),) ), ); }
Chame isso para mostrar o BotoomSheet com cantos:
/// Show the bottomSheet when called Future _onMenuPressed() async { showModalBottomSheet( context: context, builder: (widgetBuilder) => bottomSheetBuilder() ); }
fonte
É uma velha questão. Mas para quem se depara com esta questão ...
O fundo branco atrás dos cantos arredondados não é realmente o contêiner. Essa é a cor da tela do aplicativo.
PARA CORRIGIR: mude a cor da tela do seu aplicativo para Colors.transparent
Exemplo:
return new MaterialApp( title: 'My App', theme: new ThemeData( primarySwatch: Colors.green, canvasColor: Colors.transparent, //----Change to this------------ accentColor: Colors.blue, ), home: new HomeScreen(), );
fonte
canvasColor
de vibraçãowidgets
mudará paracolor.transparent
, por favor, tente abrir a gaveta, o que você vê!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), ), ), );
fonte
Use a cor de fundo transparente para a folha de fundo modal e dê uma cor separada para a decoração da caixa
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(), ); });
fonte
Três pacotes relacionados para cobrir este problema com muitas opções avançadas são:
fonte
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, ), ) ); } }
fonte
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"), ) ), )
Isso tornará a cor do seu contêiner igual à cor de fundo. E haverá um contêiner filho da mesma altura-largura com a cor azul. Isso fará com que o canto tenha a mesma cor da cor de fundo.
fonte