Flutter 圖片加濾鏡效果

一天清晨發表於2021-03-30
Flutter

本著學習的態度，研究了一下flutter裡面的ColorFilter，字面意思翻譯顏色過濾器，學習就是要舉一反三，擴充思考就把這個功能做了一個簡單的圖片濾鏡效果。（ps：圖片有點沒控制住，有點長） 效果如下：

tutieshi_640x1343_10s.gif

ColorFilter 介紹

兩種使用方式

const ColorFilter.mode(Color color, BlendMode blendMode)
const ColorFilter.matrix(List<double> matrix)
複製程式碼

實現效果主要通過第一種方式， 首先建立一個MorningPainter類繼承CustomPainter, 定義三個傳入的變數

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進行圖片的選擇，選擇之後進行轉換， 這個地方可以關注一下我的另外一篇文章Flutter 拼圖小遊戲 然後就是載入如下：在需要的地方進行引入

CustomPaint(
  size: Size(_img.width.toDouble(), _img.height.toDouble()),
  painter: MorningPainter(_img, currentColor, mode),
)
複製程式碼

佈局

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

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

最後的思考，學習是一件很有趣的事情， 特別是將所學到的知識運用起來，成就感很強烈。

相關文章