直播系統開發，Flutter建立圓圈圖示按鈕

直播系統開發，Flutter建立圓圈圖示按鈕實現的相關程式碼

我找不到任何顯示如何建立IconButton類似於的圓的示例FloatingActionButton。任何人都可以建議建立一個自定義按鈕的方式/需要什麼FloatingActionButton嗎？

我認為RawMaterialButton更適合。

RawMaterialButton(
  onPressed: () {},
  elevation: 2.0,
  fillColor: Colors.white,
  child: Icon(
    Icons.pause,
    size: 35.0,
  ),
  padding: EdgeInsets.all(15.0),
  shape: CircleBorder(),
)

您可以嘗試一下，它是完全可定製的。

ClipOval(
  child: Material(
    color: Colors.blue, // button color
    child: InkWell(
      splashColor: Colors.red, // inkwell color
      child: SizedBox(width: 56, height: 56, child: Icon(Icons.menu)),
      onTap: () {},
    ),
  ),
)

輸出：

您只需要使用形狀： CircleBorder()

MaterialButton(
  onPressed: () {},
  color: Colors.blue,
  textColor: Colors.white,
  child: Icon(
    Icons.camera_alt,
    size: 24,
  ),
  padding: EdgeInsets.all(16),
  shape: CircleBorder(),
)

您可以使用InkWell來做到這一點：

響應觸控的材料的矩形區域。

下面的示例演示如何使用InkWell。**注意：**您不需StatefulWidget要這樣做。我用它來改變計數狀態。

例：

import 'package:flutter/material.dart';
class SettingPage extends StatefulWidget {
  @override
  _SettingPageState createState() => new _SettingPageState();
}
class _SettingPageState extends State<SettingPage> {
  int _count = 0;
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Center(
        child: new InkWell(// this is the one you are looking for..........
        onTap: () => setState(() => _count++),
        child: new Container(
          //width: 50.0,
          //height: 50.0,
          padding: const EdgeInsets.all(20.0),//I used some padding without fixed width and height
          decoration: new BoxDecoration(
            shape: BoxShape.circle,// You can use like this way or like the below line
            //borderRadius: new BorderRadius.circular(30.0),
            color: Colors.green,
          ),
          child: new Text(_count.toString(), style: new TextStyle(color: Colors.white, fontSize: 50.0)),// You can add a Icon instead of text also, like below.
          //child: new Icon(Icons.arrow_forward, size: 50.0, color: Colors.black38)),
        ),//............
      ),
      ),
    );
  }
}

如果要利用splashColor，請使用材料型別為circle的小部件highlightColor包裝InkWell小Material部件。然後decoration在Container小部件中刪除。

結果：

RawMaterialButton(
  onPressed: () {},
  constraints: BoxConstraints(),
  elevation: 2.0,
  fillColor: Colors.white,
  child: Icon(
    Icons.pause,
    size: 35.0,
  ),
  padding: EdgeInsets.all(15.0),
  shape: CircleBorder(),
)

記下 constraints: BoxConstraints()，這是為了不允許向左填充。

如果需要背景影像，則可以將CircleAvatar與IconButton一起使用。設定backgroundImage屬性。

CircleAvatar(
  backgroundImage: NetworkImage(userAvatarUrl),
)

按鈕示例：

        CircleAvatar(
          backgroundColor: Colors.blue,
          radius: 20,
          child: IconButton(
            padding: EdgeInsets.zero,
            icon: Icon(Icons.add),
            color: Colors.white,
            onPressed: () {},
          ),
        ),

實際上，有一個示例如何建立類似於FloatingActionButton的圓形IconButton。

Ink(
    decoration: const ShapeDecoration(
        color: Colors.lightBlue,
        shape: CircleBorder(),
    ),
    child: IconButton(
        icon: Icon(Icons.home),
        onPressed: () {},
    ),
)

此程式碼將幫助您新增按鈕而不會出現不必要的填充，

RawMaterialButton(
      elevation: 0.0,
      child: Icon(Icons.add),
      onPressed: (){},
      constraints: BoxConstraints.tightFor(
        width: 56.0,
        height: 56.0,
      ),
      shape: CircleBorder(),
      fillColor: Color(0xFF4C4F5E),
    ),

以上就是 直播系統開發，Flutter建立圓圈圖示按鈕實現的相關程式碼，更多內容歡迎關注之後的文章