快捷導(dǎo)航

Flutter實(shí)現(xiàn)圖片濾鏡效果

更新時(shí)間：2021年04月01日 10:20:52 作者：一天

這篇文章主要介紹了Flutter如何實(shí)現(xiàn)圖片濾鏡效果，幫助大家更好的理解和學(xué)習(xí)使用Flutter，感興趣的朋友可以了解下

本著學(xué)習(xí)的態(tài)度，研究了一下flutter里面的ColorFilter，字面意思翻譯顏色過濾器，學(xué)習(xí)就是要舉一反三，拓展思考就把這個(gè)功能做了一個(gè)簡單的圖片濾鏡效果。（ps：圖片有點(diǎn)沒控制住，有點(diǎn)長）效果如下：

ColorFilter 介紹

兩種使用方式

const ColorFilter.mode(Color color, BlendMode blendMode)
const ColorFilter.matrix(List<double> matrix)

實(shí)現(xiàn)效果主要通過第一種方式，首先創(chuàng)建一個(gè)MorningPainter類繼承CustomPainter, 定義三個(gè)傳入的變量

ui.Image img;
Color color;
String mode;
MorningPainter(this.img, this.color, this.mode);

@override
void paint(Canvas canvas, Size size) {
  var paint = Paint();
  if (color != Colors.white) {
   BlendMode blendMode = BlendMode.clear;
   switch (mode) {
    case 'modulate':
     blendMode = BlendMode.modulate;
     break;
    case 'difference':
     blendMode = BlendMode.difference;
     break;
    case 'plus':
     blendMode = BlendMode.plus;
     break;
    case 'lighten':
     blendMode = BlendMode.lighten;
     break;
    default:
   }
   paint.colorFilter = ColorFilter.mode(color, blendMode);
  }
}
@override
bool shouldRepaint(CustomPainter oldDelegate) => true;

選取圖片

使用wechat_assets_picker進(jìn)行圖片的選擇，選擇之后進(jìn)行轉(zhuǎn)換

CustomPaint(
 size: Size(_img.width.toDouble(), _img.height.toDouble()),
 painter: MorningPainter(_img, currentColor, mode),
)

布局

最下方的顏色選擇和模式選擇，這個(gè)沒什么可說的，使用簡單的SingleChildScrollView配合Row使用就可以了。貼出其中一段代碼

SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: Row(
       mainAxisAlignment: MainAxisAlignment.center,
       crossAxisAlignment: CrossAxisAlignment.center,
       children: [
        renderItem(Colors.yellow, '黃色'),
        renderItem(Colors.red, '紅色'),
        renderItem(Colors.blue, '藍(lán)色'),
        renderItem(Colors.pink, '粉色'),
        renderItem(Colors.orange, '橙色'),
        renderItem(Colors.brown, '棕色'),
        renderItem(Colors.grey, '灰色'),
       ],
      ),
     ),

最后的思考，學(xué)習(xí)是一件很有趣的事情，特別是將所學(xué)到的知識(shí)運(yùn)用起來，成就感很強(qiáng)烈。

以上就是Flutter實(shí)現(xiàn)圖片濾鏡效果的詳細(xì)內(nèi)容，更多關(guān)于Flutter 圖片濾鏡的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: