Flutter 移除底部填充容器

Question

我創建了一個自定義對話框，但是當我在底部添加 2 個按鈕時，我仍然有一個填充，我該如何刪除它？

這是我的代碼

  contentBox(context) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(20),
      child: Container(
        color: Colors.white,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Container(
              padding: EdgeInsets.all(20),
              child: Column(
                children: [
                  Text(
                    widget.title,
                    style: TextStyle(fontSize: 23, fontWeight: FontWeight.w600),
                    textAlign: TextAlign.center,
                  ),
                  SizedBox(height: 15),
                  Text(
                    widget.descriptions,
                    style: TextStyle(fontSize: 16),
                    textAlign: TextAlign.center,
                  ),
                ],
              ),
            ),
            Row(
              children: <Widget>[
                Expanded(
                  child: RaisedButton(
                    child: Text('Reject'),
                    onPressed: () => null,
                  ),
                ),
                Expanded(
                  child: RaisedButton(
                    color: Colors.amber,
                    child: Text('Approve'),
                    onPressed: () => null,
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }

結果：

PS：如果有優化，請告訴我，因為我從 flutter 開始

Answer 1

這是因為RaisedButton具有固定的高度。 將RaisedButton包裹在Container小部件中並為其指定高度值。 像這樣應該沒問題

Expanded(
    child: Container(
      height: 48,
      child: RaisedButton(
        child: Text('Reject'),
        onPressed: () => null,
      ),
    ),
  ),

對你的兩個按鈕執行此操作 這是 output：

此外，如果您想創建一個警報框，如果您想要 iOS 樣式的警報框，最好使用 flutter 構建在像AlertDialog這樣的小部件中，那么您可以使用CupertinoAlertDialog

AlertDialog在這個視頻中得到了很好的解釋

Answer 2

RaisedButton 有一些默認填充，因此您需要創建一個自定義按鈕，如下所示：

class CustomButton extends StatelessWidget {
      const CustomButton({
        Key key,
        this.backgroundColor,
        this.child,
      }) : super(key: key);
    
      final child;
      final Color backgroundColor;
    
      @override
      Widget build(BuildContext context) {
        return Container(
          height: 40,
          child: Material(
            color: backgroundColor,
            child: InkWell(
              onTap: () {},
              child: Container(
                alignment: Alignment.center,
                child: child,
              ),
            ),
          ),
        );
      }
    }

現在在你的代碼中使用它，用這個替換你的行

Row(
  children: <Widget>[
    Expanded(
     child: CustomButton(
      backgroundColor: Colors.grey[100],
      child: Text('Reject'),
     ),
    ),
    Expanded(
     child: CustomButton(
      backgroundColor: Colors.amber,
      child: Text('Approve'),
     ),
    ),
   ],
 ),
                  

結果：