flutter實現(xiàn)app整體灰色效果的方法

發(fā)布時間：2020-08-04 15:01:47 來源：億速云閱讀：185 作者：小豬欄目：移動開發(fā)

這篇文章主要講解了flutter實現(xiàn)app整體灰色效果的方法，內(nèi)容清晰明了，對此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會有幫助。

Flutter 是 Google 開源的 UI 工具包，幫助開發(fā)者通過一套代碼庫高效構(gòu)建多平臺精美應(yīng)用，支持移動、Web、桌面和嵌入式平臺。Flutter 開源、免費(fèi)，擁有寬松的開源協(xié)議，適合商業(yè)項目。

舉國哀悼, 進(jìn)入各種大廠的app也可以看到主色都變成灰色的了

作為程序員我們肯定會想怎么可以實現(xiàn)的, 我簡單研究了10分鐘, flutter中只要在整體外面套一個ShaderMask, 然后修改blendMode即可

核心代碼:

class MyApp extends StatelessWidget {
 // This widget is the root of your application.
 @override
 Widget build(BuildContext context) {
  return ShaderMask(
   child: OKToast(
    child: MaterialApp(
     title: 'Pick Image Demo',
     theme: ThemeData(
      primarySwatch: Colors.lime,
     ),
     home: MyHomePage(title: 'Pick Image Demo'),
    ),
   ),
   shaderCallback: (Rect bounds) {
    return ui.Gradient.linear(Offset.zero,
      Offset(bounds.width, bounds.height), [Colors.grey, Colors.grey]);
   },
   // blendMode: BlendMode.dst,
   blendMode: BlendMode.saturation,
  );
 }
}

在最外層套一個ShaderMask,
然后返回一個shader就可以了, 這里我用的是漸變的Gradient ,還有別的方式可以用

效果:

之前:

[文件]

flutter實現(xiàn)app整體灰色效果的方法

之后:

flutter實現(xiàn)app整體灰色效果的方法

看完上述內(nèi)容，是不是對flutter實現(xiàn)app整體灰色效果的方法有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

flutter實現(xiàn)app整體灰色效果的方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽