如何將 Flutter 中的“FlatButton”轉換為“TextButton”？

Question

我得到以下代碼：

      FlatButton.icon(
        minWidth: double.infinity,
        padding: EdgeInsets.symmetric(
          vertical: kDefaultPadding,
        ),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(10),
        ),
        color: kPrimaryColor,
        onPressed: () {},
        icon: WebsafeSvg.asset("assets/Icons/Edit.svg", width: 16),
        label: Text(
          "New message",
          style: TextStyle(color: Colors.white),
        ),
      ).addNeumorphism(
        topShadowColor: Colors.white,
        bottomShadowColor: Color(0xFF234395).withOpacity(0.2),
      ),

似乎FlatButtun現在已被棄用，我必須將其轉換為TextButton但是當我嘗試這樣做時，它會給我minWith參數錯誤。 當我嘗試用ConstrainedBox包裝它時，我得到了padding形狀等的其他錯誤。

我不知道如何讓這段舊代碼按預期工作？

Answer 1

正如我所評論的，您不能只是將TextButton.icon FlatButton.icon 按鈕中的更改打破了對 Flutter 所做的更改：

Flutter 添加了一組新的基本材料按鈕小部件和主題。原來的類已被棄用，最終將被刪除。 總體目標是使按鈕更靈活，並且更容易通過構造函數參數或主題進行配置。

因此，要解決您的問題，您必須編寫自己的小部件以接近FlatButton.icon 。

對於您的示例，您可以使用Padding小部件進行填充，使用SizedBox來設置寬度。 對於圓角，您可以使用style屬性。

使用TextButton.icon你的按鈕代碼看起來像這樣：

SizedBox(
        width: double.infinity,
        child: Padding(
          padding: EdgeInsets.symmetric(
            vertical: kDefaultPadding,
            child: TextButton.icon(
              //rounded corners
              style: ButtonStyle(
                shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                  RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(18.0),
                  ),
                ),
              ),

              onPressed: () {},
              icon: WebsafeSvg.asset("assets/Icons/Edit.svg", width: 16),
              label: Text(
                "New message",
                style: TextStyle(color: Colors.white),
              ),
            ),
          ),
        ))