帶圖標的圓形按鈕 flutter

Question

如圖所示，如何將此方形文本按鈕更改為帶有加號圖標的圓形按鈕。 這是我設計的按鈕代碼。 左側圖像顯示了我到目前為止設計的按鈕。 我希望它被設置為右側圖像。

Padding(
                    padding: const EdgeInsets.fromLTRB(300, 150, 0, 0),
                    child: SizedBox(
                      height: 50,
                      child: TextButton(
    
                        style: TextButton.styleFrom( backgroundColor: Color(0xffCAEC93) ,
                          side: BorderSide(color: Color(0xffCAEC93),
    
                          ),
                        ),
                        onPressed: () {
                          Icon(
                            Icons.favorite,
                            size: 20,
                            color: Colors.grey,
    
                          );
                        },
                        child: Text('M',style: TextStyle(fontFamily: 'Sen',color:Color(0xffFFFFFF)),),
                      ),
                    ),
                  ),

Answer 1

您應該改用FloatingActionButton ，但是如果您仍想使用Button ，請使用以下代碼：

ElevatedButton(
  onPressed: (){},
  style: ElevatedButton.styleFrom(
  shape: const CircleBorder(),
  primary: Colors.lightGreen,
  fixedSize: const Size(60,60)
         ),
  child: const Icon(Icons.add_circle_outline))

結果：

Answer 2

您可以使用浮動操作按鈕： https://api.flutter.dev/flutter/material/FloatingActionButton-class.html

Answer 3

您可以使用FloatingActionButton

像這樣：

FloatingActionButton(
  child: Icon(Icons.add_circle_outline),
  backgroundColor: Color(0xffCAEC93),
  onPressed: (){
   //do something
  }
)

Answer 4

我建議使用FloatingActionButton而不是TextButton ：

FloatingActionButton(
                 onPressed: (){},
                 child: Icon(Icons.add),
               ),

你的代碼應該是這樣的：

Padding(
                    padding: const EdgeInsets.fromLTRB(300, 150, 0, 0),
                    child: SizedBox(
                      height: 50,
                      child: FloatingActionButton(
                 onPressed: (){},
                 child: Icon(Icons.add),
                      ),
                    ),
                  ),

Answer 5

使用 Container 並為容器提供邊框半徑，並使用 InkWell 包裝容器小部件。

Center(
        child: InkWell(
          onTap: (){
            print("Clicked");
          },
          child: Container(
            alignment: Alignment.center,
            height: 106,
            width: 106,
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.all(Radius.circular(80)),
            ),
            child: Image.asset("assets/edit.png",scale: 8,)
          ),
        ),
      ),

圖片 Output：

Answer 6

我添加文本的方法

                       Center(
                        child: InkWell(
                            onTap: () {},
                            child: Row(children: [
                              Container(
                                alignment: Alignment.center,
                                height: 40,
                                width: 40,
                                decoration: BoxDecoration(
                                  color: Color(0xFFfd9770),
                                  borderRadius: BorderRadius.all(Radius.circular(80)),
                                ),
                                child: Icon(
                                  Icons.edit,
                                  color: Colors.white,
                                  size: 20,
                                ),
                              ),
                              SizedBox(
                                width: 10,
                              ),
                              Text('edit'.tr)
                            ]))),

Answer 7

試試這個，它適用於textButton

 SizedBox(
              height: 50,
              width: 50,
              child: TextButton(
                  style: TextButton.styleFrom(
                    backgroundColor: Color(0xffCAEC93),
                    side: BorderSide(
                      color: Color(0xffCAEC93),
                    ),
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(50),
                        side: BorderSide(color: Colors.red)),
                  ),
                  onPressed: () {},
                  child: Icon(
                    Icons.add,
                    color: Colors.white,
                  )),
            ),

或者你可以試試FloatingActionButton