Flutter AlertBox 用户界面答案

【问题标题】：Flutter AlertBox UserinterfaceFlutter AlertBox 用户界面
【发布时间】：2021-07-22 10:00:04
【问题描述】：

我怎样才能像这样创建 UserInterface(Flutter AlertDialog)？

【问题讨论】：

标签： flutter user-interface flutter-layout alert

【解决方案1】：

您可以使用 Dialog 小部件制作自定义 AlertDialog。这里我举个例子：

showDialog(
context: context,
builder: (ctx) => Dialog(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(15.0),
  ),
  backgroundColor: Colors.white,
  child: Column(
    mainAxisAlignment: MainAxisAlignment.start,
    crossAxisAlignment: CrossAxisAlignment.start,
    mainAxisSize: MainAxisSize.min,
    children: [
      Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            Center(
              child: Text(
                'Delete your account',
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 18.0,
                ),
              ),
            ),
            SizedBox(height: 10.0),
            Text(
              'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt magnam quisquam ',
              textAlign: TextAlign.center,
              style: TextStyle(
                color: Colors.grey,
                fontSize: 15.0,
              ),
            ),
          ],
        ),
      ),
      SizedBox(height: 15.0),
      Row(
        children: [
          Expanded(
            child: InkWell(
              onTap: () {},
              child: Container(
                height: 50,
                decoration: BoxDecoration(
                  color: Colors.grey[100],
                  borderRadius: BorderRadius.only(
                    bottomLeft: Radius.circular(15.0),
                  ),
                ),
                child: Center(child: Text('YES')),
              ),
            ),
          ),
          Expanded(
            child: InkWell(
              onTap: () {},
              child: Container(
                height: 50,
                decoration: BoxDecoration(
                  color: Colors.blue,
                  borderRadius: BorderRadius.only(
                    bottomRight: Radius.circular(15.0),
                  ),
                ),
                child: Center(
                  child: Text(
                    'NO',
                    style: TextStyle(color: Colors.white),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    ],
  ),
),

);

结果：

【讨论】：