簡體   English   中英

方形對話框,在顫動的角落中具有半徑

[英]square dialog with radius in corners in flutter

我嘗試了這個並使對話框顏色透明在它們的容器中處於中心,但我找不到如何使容器角的半徑

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM