如何在顫動中為容器設置不透明度

Question

我想為包含十六進制顏色代碼的容器設置不透明度。 如何做呢？

這是我當前的代碼：

final body = Container(
  width: MediaQuery.of(context).size.width,

  margin: const EdgeInsets.only(left: 40.0, right: 40.0),
  padding: EdgeInsets.all(28.0),
   decoration: new BoxDecoration(
     color:   const Color(0xFF0E3311),//here i want to add opacity

   border: new Border.all(color: Colors.black54,
   ),
       borderRadius: new BorderRadius.only(
           topLeft: const Radius.circular(40.0),
           topRight: const Radius.circular(40.0),
       bottomLeft: const Radius.circular(40.0),
       bottomRight:const Radius.circular(40.0) )
),

  child: Column(
    children: <Widget>[ email, password,loginButton],
  ),
);

Answer 1

換線

const Color(0xFF0E3311)

到

const Color(0xFF0E3311).withOpacity(0.5)

或您想要的任何值。

Answer 2

如果您只想為顏色設置不透明度，只需在顏色代碼前添加 2 個十六進制數字即可。 檢查此答案以了解所有值。

但是如果你想改變所有小部件的不透明度，在你的情況下是一個容器，你可以將它包裝成一個不透明度小部件，如下所示：

double _opacityValue = 0.50;//This value goes from 0.0 to 1.0. In this case the opacity is from 50%

final Widget _bodyWithOpacity = Opacity(
  opacity: _opacityValue,
  child: body,
);

如果您想了解更多信息，請在此處查看 Opacity 的文檔和此快速視頻！

Answer 3

Flutter 使用十六進制的 ARGB 顏色值，格式為 const Color(0xAARRGGBB)。 第一對字母 AA 代表 alpha 通道。 您必須將十進制不透明度值轉換為十六進制值。

十六進制不透明度值：

100% — FF
95% — F2
90% — E6
85% — D9
80% — CC
75% — BF
70% — B3
65% — A6
60% — 99
55% — 8C
50% — 80
45% — 73
40% — 66
35% — 59
30% — 4D
25% — 40
20% — 33
15% — 26
10% — 1A
5% — 0D
0% — 00

例如：

static const Color mainColor = Color(0xff0097A7);

到：

static  Color accentColor = Color(0x1A0097A7);

會將不透明度更改為 10%。

Answer 4

Flutter 使用 ARGB 格式的 32 位顏色值，其中 A = Alpha，R = RED，G = GREEN 和 B = BLUE。

因此，要控制不透明度，您可以更改const Color(0xFF0E3311)十六進制值的前兩位的值，您可以使用范圍從0x000E3311 、 0x010E3311 .... 0xFF0E3311 。

希望有幫助！

Answer 5

在代碼const Color(0xFF0E3311) ，0x 之后的兩個值（在上面的代碼“FF”中）用於不透明度。 'FF' 表示不透明，'00' 表示完全透明。 所以通過改變這個值，你可以改變顏色的不透明度。 我們還通過 Colors 類獲得白色和黑色的 diff 不透明度值顏色。 例如Colors.white70表示不透明度為 70% 的白色

Answer 6

我們也可以將Color.fromRGBO(255, 255, 255, 0.5)用於不透明度。