Flutter 警告框用户界面

Question

我怎样才能完全像这样创建用户界面（Flutter AlertDialog）？

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

);

结果：

Flutter 警告框用户界面

Flutter AlertBox Userinterface

flutter

user-interface

flutter-layout

alert