Flutter Set Image Opacity Both Local & Network

To set opacity on image in flutter we have a property opacity. It supports Animation<double> type value between Zero and One. 0.1 reflects lowest opacity value and 1.0 reflects highest opacity value.

Flutter Set Image Opacity on Network Image:

1. Creating Image widget with Opacity property. We are defining AlwaysStoppedAnimation<double> to apply transparency on image.

Image.network(
        imageURL,
        width: 250,
        height: 200,
        fit: BoxFit.contain,
        opacity: const AlwaysStoppedAnimation <double>(0.4),
      ),

Screenshot:

Flutter Set Opacity on local Image:

Image.asset(
        localImagePath,
        fit: BoxFit.fitWidth,
        opacity: const AlwaysStoppedAnimation <double > (0.4),
      )

Source code for main.dart file:

import 'package:flutter/material.dart';

void main() => runApp(const App());

class App extends StatelessWidget {
  const App({super.key});

  final String imageURL =
      'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqulsBzAJFu9AOO1BOdDW26gGWmVpnTgInl_H9YEtDxCnuHva7o3Z6EGqTjoSJxFgVkpo1fYbPR6h-B4X5kkwc7lJyymDQGoRX3RdSfxIezLhLt9pVuNGusnG-CI9DAldqAoGLZw44ybQL5tw6cw-6oW3ULCVr4lu-wMMTxe_RU4VfWaZtD5dT2d00xyDf/s1280/rose.jpg';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: SafeArea(
                child: Center(
      child: Image.network(
        imageURL,
        width: 250,
        height: 200,
        fit: BoxFit.contain,
        opacity: const AlwaysStoppedAnimation <double>(0.4),
      ),
    ))));
  }
}