Blend it Like… Anything!!

Hello Flutter Learners,

Have you played with IMAGES in Flutter? If not, this article is the right destination for you.

I have worked out a demo to explore various blending options that can be applied to any image in Flutter.

Website: https://www.techieblossom.com

Demo

What is Blending?

Blending in simple words is mix/combine. Blending on an image is nothing but mixing the image with a specific color. While blending the color layer and image layer, there are many blending modes. To understand, you can read about blending modes basic information on Wikipedia — Blend Modes

Blending modes available in Flutter — Color Burn, Color Dodge, Saturation, Hue, Soft Light, Overlay, Multiply, Luminosity, Plus, Exclusion, Hard Light, Lighten, Darken, Screen, Modulate, Difference.

Code in Flutter

In flutter, you can use an Image widget to load the image using either assets, memory or file or network

• Image.asset()
• Image.memory()
• Image.file()
• Image.network()

Each of the options has two properties color and colorBlendMode.

Image.asset(
  "images/background_image.jpg",
  height: double.maxFinite,
  width: double.maxFinite,
  fit: BoxFit.fitHeight,
  color: /*color of the blending layer*/,
  colorBlendMode: /*blending mode*/ ,
)

• color can be any color from Colors repository in Flutter or your custom defined color, which will act as the second layer other than the image layer
• colorBlendMode is the mode which is present in BlendMode repository in Flutter

For the sake of demo, I have created a map of selected blend modes that I found are working for images directly in Flutter. Image is loaded from assets.

body: Stack(
    children: <Widget>[
      Image.asset(
        "images/background_image.jpg",
        height: double.maxFinite,
        width: double.maxFinite,
        fit: BoxFit.fitHeight,
        color: /*color of the blending layer*/,
        colorBlendMode: /*blending mode*/,
      ),
      Positioned(
        left: 0.0,
        bottom: 0.0,
        height: 100.0,
        right: 0.0,
        child: /*List of blend modes*/,
      ),
    ],
  ),
)

• Stack having two children. Image and a List container.

When a list item is selected, the widget is rebuilt and respective blend mode is applied to the image.

List of Blend Modes in stateful widget

int selectedBlendModeIndex = 0;

Map<String, BlendMode> blendModeMap = Map();

@override
void initState() {
  super.initState();
  blendModeMap.putIfAbsent("Normal", () => BlendMode.clear);
  blendModeMap.putIfAbsent("Color Burn", () => BlendMode.colorBurn);
  blendModeMap.putIfAbsent("Color Dodge", () => BlendMode.colorDodge);
  blendModeMap.putIfAbsent("Saturation", () => BlendMode.saturation);
  blendModeMap.putIfAbsent("Hue", () => BlendMode.hue);
  blendModeMap.putIfAbsent("Soft light", () => BlendMode.softLight);
  blendModeMap.putIfAbsent("Overlay", () => BlendMode.overlay);
  blendModeMap.putIfAbsent("Multiply", () => BlendMode.multiply);
  blendModeMap.putIfAbsent("Luminosity", () => BlendMode.luminosity);
  blendModeMap.putIfAbsent("Plus", () => BlendMode.plus);
  blendModeMap.putIfAbsent("Exclusion", () => BlendMode.exclusion);
  blendModeMap.putIfAbsent("Hard Light", () => BlendMode.hardLight);
  blendModeMap.putIfAbsent("Lighten", () => BlendMode.lighten);
  blendModeMap.putIfAbsent("Screen", () => BlendMode.screen);
  blendModeMap.putIfAbsent("Modulate", () => BlendMode.modulate);
  blendModeMap.putIfAbsent("Difference", () => BlendMode.difference);
  blendModeMap.putIfAbsent("Darken", () => BlendMode.darken);
}

• selectedBlendModeIndex is updated in setState when an item is selected. Blend mode lying on that index in the blendModeMap is applied to image.

ListView holding Blend Modes

ListView.builder(
  padding: EdgeInsets.symmetric(horizontal: 8.0),
  scrollDirection: Axis.horizontal,
  itemCount: blendModeMap.keys.length,
  itemBuilder: (context, index) {
    return Container(
      padding: EdgeInsets.all(4.0),
      child: ChoiceChip(
          padding: EdgeInsets.symmetric(
              horizontal: 8.0, vertical: 0.0),
          labelStyle: TextStyle(
              color: Colors.white,
              fontSize: (selectedBlendModeIndex == index)
                  ? 15.0
                  : 13.0,
              fontWeight: (selectedBlendModeIndex == index)
                  ? FontWeight.bold
                  : FontWeight.normal),
          backgroundColor: Colors.black.withOpacity(0.8),
          selectedColor: Colors.blue,
          label: Center(
            child: Text(blendModeMap.keys.elementAt(index)),
          ),
          selected: selectedBlendModeIndex == index,
          onSelected: (bool selected) {
            setState(() {
              selectedBlendModeIndex =
                  selected ? index : null;
            });
          }),
    );
  },
)

Why using ChoiceChips?

While I was creating a demo, I needed some type of selectable list view. I came across ChoiceChips, which actually have two useful properties selected and onSelected .

• onSelected is called when a tap operation is performed on ChoiceChip. If the chip is selected, selectedBlendModeIndex value is changed to the index of the selected item from the list. To highlight the selected item from others, I have changed the fontWeight and fontSize of ChoiceChip label .
• selected is a bool value, which holds true if the current chip is the selected chip out of all the ChoiceChips in the List.

That is the end of this article. If you liked the article, hit the clap and follow me for more articles on Flutter. Comment for any questions or feedback.

Complete code for this demo is

Some of my other articles

#WidgetoftheWeek — AnimatedContainer Widget

Flutter: #WidgetOfTheWeek — Page View

The Flutter Pub is a medium publication to bring you the latest and amazing resources such as articles, videos, codes, podcasts etc. about this great technology to teach you how to build beautiful apps with it. You can find us on Facebook, Twitter, and Medium or learn more about us here. We’d love to connect! And if you are a writer interested in writing for us, then you can do so through these guidelines.