아래는 투명한 배경으로 둥근 모서리 컨테이너를 렌더링 할 것으로 예상되는 코드입니다.
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"),
)
),
그러나 이것이 렌더링하는 것이므로 둥근 모서리 반경을 가진 흰색 컨테이너 (투명 할 것으로 예상 됨)를 렌더링합니다. 도움이 필요하세요?
답변
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"),
)
),
),
답변
투명한 배경으로 모서리를 둥글게하려면 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"),
),
),
);
답변
2019 년 5 월 1 일부터 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))
)
)
),
최근에 도입 된 테마를 사용하여 시트 스타일을 제어하는 것이이 문제에 가장 적합합니다.
다른 하단 시트의 테마를 다르게 지정하려면 해당 하위 트리에 새 테마 개체를 포함하여 해당 영역에 대한 하단 시트 테마를 재정의합니다.
어떤 이유로 인해 하단 시트를 시작할 때 수동으로 테마를 재정의하려는 경우 이제 showBottomSheet 및 showModalBottomSheet 에 backgroundColor 매개 변수가 있습니다. 다음과 같이 사용하십시오.
showModalBottomSheet(
backgroundColor: Colors.transparent,
context: context,
builder: (c) {return NavSheet();},
);
테마를 사용하면 앱 / 앱의 현재 테마에 관계없이 하단 시트를 재사용 할 수 있으며, 언급 한대로 캔버스 색상을 설정하는 데 따른 부작용이 없습니다.
답변
/// 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를 표시하려면 다음을 호출하십시오.
/// Show the bottomSheet when called
Future _onMenuPressed() async {
showModalBottomSheet(
context: context,
builder: (widgetBuilder) => bottomSheetBuilder()
);
}
답변
오래된 질문입니다. 하지만이 질문을 접하는 사람들을 위해 …
둥근 모서리 뒤의 흰색 배경은 실제로 컨테이너가 아닙니다. 이것이 앱의 캔버스 색상입니다.
수정하려면 : 앱의 캔버스 색상을 Colors.transparent로 변경하세요.
예:
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),
),
),
);
답변
모달 바닥 시트에 투명한 배경색을 사용하고 상자 장식을 위해 별도의 색상을 지정하십시오.
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(),
);
});
