我想在Flutter上制作一個帶有圖示的按鈕

我有個問題。我想制作一個上面有圖示的按鈕。我該怎么做？

我嘗試過使用ElevatedButton. 它似乎并沒有真正接近我想要的按鈕。

這是我撰寫的代碼：

child: Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    ElevatedButton(
      onPressed: () {},
      child: Padding(
        padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              "Masuk",
              style: TextStyle(
                fontSize: 20,
                fontWeight: FontWeight.w600,
              ),
            ),
            SizedBox(
              child: Padding(
                padding: EdgeInsets.fromLTRB(
                  10,
                  0,
                  0,
                  0,
                ),
                child: Icon(
                  Icons.arrow_forward,
                  color: Colors.white,
                ),
              ),
            ),

這是我想做的樣本：

uj5u.com熱心網友回復：

嘗試這個：

SizedBox(
      height: 60,
      child: MaterialButton(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Opacity(
              opacity: 0.0,
              child: CircleAvatar(
                child: Icon(
                  Icons.arrow_forward,
                  color: Colors.white,
                ),
                backgroundColor: Colors.indigo,
              ),
            ),
            Text(
              "MASUK",
              style: TextStyle(color: Colors.white, fontSize: 20.0),
            ),
            CircleAvatar(
              child: Icon(
                Icons.arrow_forward,
                color: Colors.white,
              ),
              backgroundColor: Colors.indigo,
            ),
          ],
        ),
        color: Colors.indigo[400],
        disabledColor: Colors.indigo[400],
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.all(
            Radius.circular(15),
          ),
        ),
        onPressed: () {},
      ),
    );

uj5u.com熱心網友回復：

將 ElevatedButton 替換為 Container 并放置 IconButton 而不是 Icon

uj5u.com熱心網友回復：

您可以使用以下代碼創建一個帶有圖示的按鈕。（圖示將出現在左側）

ElevatedButton.icon(
    icon: const Icon(Icons.add),
    label: const Text("Test"),
    onPressed: (){
        //Function
    },
);
 

您還可以創建自定義小部件并將其包裝InkWell并使用該onTap功能。

例子：

InkWell(
      onTap: (){
        // function
      },
      child: myWidget())

uj5u.com熱心網友回復：

也試試這個：上面的答案也是正確的。

Container(
          width: 250,
          height: 50,
          decoration: BoxDecoration(
            color: Colors.indigo[400],
            borderRadius: BorderRadius.circular(13),             
          ),
          child: InkWell(
            onTap: () {
              // function
            },
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Opacity(
                  opacity: 0.0,
                  child: Padding(
                    padding: EdgeInsets.all(5),
                    child: CircleAvatar(
                      radius: 15,
                      child: Icon(
                        Icons.arrow_forward,
                        color: Colors.white,
                        size: 15.0,
                      ),
                      backgroundColor: Colors.indigo,
                    ),
                  ),
                ),
                Text(
                  'MASUK',
                  textAlign: TextAlign.center,
                  style: TextStyle(fontSize: 14, color: Colors.white),
                ),
                Padding(
                  padding: EdgeInsets.all(5),
                  child: CircleAvatar(
                    radius: 15,
                    child: Icon(
                      Icons.arrow_forward,
                      color: Colors.white,
                      size: 15.0,
                    ),
                    backgroundColor: Colors.indigo,
                  ),
                ),
              ],
            ),
          ),
        ),

uj5u.com熱心網友回復：

制作像您這樣的按鈕的非常簡單的代碼是，

            RaisedButton.icon(
                  icon: const Text('UPADATE'),
                  label: Icon(Icons.next_plan),
                  textColor: Colors.white,
                  color: Colors.lightBlue,
                  onPressed: () {},
                ),

標籤：安卓 扑 视觉工作室 镖

上一篇：重組何時發生？改變狀態或改變輸入

下一篇：VisualStudio2022中.NetCore6解決方案的版本資訊的中心位置