颤动中角落半径的方形对话框答案

【问题标题】：square dialog with radius in corners in flutter颤动中角落半径的方形对话框
【发布时间】：2020-02-24 21:44:00
【问题描述】：

我尝试了这个并在它们中间的容器中使对话框颜色透明，但我不知道如何使半径到容器的角落

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

    ),)

【问题讨论】：

标签： android flutter flutter-layout

【解决方案1】：

您可以在下面复制粘贴运行完整代码
你可以使用BoxDecoration

工作演示

代码sn-p

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

【讨论】：