我尝试过此操作,并使对话框颜色在其中的透明容器中居中,但我找不到如何将raduis设置到容器的角处
Dialog alert = Dialog(
elevation: 0,
backgroundColor: Colors.greenAccent,
//backgroundColor: hexToColor('#f26937'),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(8.0)),
),
//title: Text("My title"),
child:
ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(1.0)),
child:Container(
margin: EdgeInsets.only(right: width-54-232,left: width-54-232),
color: hexToColor('#f26937'),
height: 120,
width: 120,
child : Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SizedBox(
child: CircularProgressIndicator(
//backgroundColor: Colors.white,
valueColor: new AlwaysStoppedAnimation<Color>(Colors.white),
),
height: 54.0,
width: 54.0,
)
],)
),)
BoxDecoration
工作演示
代码段
Container(
decoration: BoxDecoration(
color: hexToColor('#f26937'),
borderRadius: BorderRadius.all(
Radius.circular(20.0),
)
),
完整代码
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); Color myColor = Color(0xff00bfa5); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, title: "Rounde Alert Box", home: Scaffold( appBar: AppBar( backgroundColor: myColor, title: Text("Rounded Alert Box"), ), body: RoundedAlertBox(), ), ); } } class RoundedAlertBox extends StatefulWidget { @override _RoundedAlertBoxState createState() => _RoundedAlertBoxState(); } class _RoundedAlertBoxState extends State<RoundedAlertBox> { @override Widget build(BuildContext context) { return Center( child: RaisedButton( onPressed: openAlertBox, color: myColor, child: Text( "Open Alert Box", style: TextStyle(color: Colors.white), ), ), ); } Color hexToColor(String hexColor) { final hexCode = hexColor.replaceAll('#', ''); return Color(int.parse('FF$hexCode', radix: 16)); } openAlertBox() { return showDialog( context: context, builder: (BuildContext context) { return Dialog( elevation: 0, backgroundColor: Colors.greenAccent, //backgroundColor: hexToColor('#f26937'), shape: RoundedRectangleBorder( borderRadius: BorderRadius.all(Radius.circular(8.0)), ), //title: Text("My title"), child: Container( decoration: BoxDecoration( color: hexToColor('#f26937'), borderRadius: BorderRadius.all( Radius.circular(20.0), ) ), margin: EdgeInsets.only(right: 10, left: 10), height: 120, width: 120, child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ SizedBox( child: CircularProgressIndicator( //backgroundColor: Colors.white, valueColor: new AlwaysStoppedAnimation<Color>(Colors.white), ), height: 54.0, width: 54.0, ) ], ))); }); } }