Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Changing Background Color Of Image in Flutter

Tags:

flutter

dart

Can we Change the background color on an Image in Flutter? Like in this Image I want to change the pink color background color to something else.

enter image description here

like image 717
Rishabh Avatar asked Oct 22 '18 05:10

Rishabh


2 Answers

You can't do that with flutter. You need an image editor to change the background color.

If you want to change the background color dynamically you will first have to make the background transparent by adding an alpha channel mask to the image (again using an image editor) You will then be able to define a background color by putting the image inside a widget that has a background color.

Here is a complete example app. The background color changes at random when the widget is reloaded.

import 'dart:math';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  Color randomColor() =>
      Color((Random().nextDouble() * 0xFFFFFF).toInt() << 0).withOpacity(1.0);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MyApp',
      home: Center(
        child: Container(
          decoration: BoxDecoration(
            color: randomColor(),
          ),
          child: Image.network(
            'https://i.stack.imgur.com/O02Ip.png',
          ),
        ),
      ),
    );
  }
}
like image 154
Soundbytes Avatar answered Sep 23 '22 01:09

Soundbytes


In my case, I was trying to color a Transparent PNG

I tried this solution and it's working.

Using ShaderMask class (https://docs.flutter.io/flutter/widgets/ShaderMask-class.html)

Example:

ShaderMask(
  child: Image(
    image: AssetImage("assets/cat.png"),
  ),
  shaderCallback: (Rect bounds) {
    return LinearGradient(
      colors: [Colors.blue, Colors.lightBlue],
      stops: [
        0.0,
        0.5,
      ],
    ).createShader(bounds);
  },
  blendMode: BlendMode.srcATop,
)
like image 39
Mo Kawsara Avatar answered Sep 22 '22 01:09

Mo Kawsara