Flutter: Quality Loss In The Background Image

Question

There is a noticeable quality loss in the background image when I modify the opacity of the overlaying element.

_{Utilizing a transparent color for the container does not impact the underlying image's quality. Nevertheless, incorporating an opacity value results in the image being rendered with reduced fidelity and visual imperfections.}

Design Version

The Flutter version I made.

My Code:

HomeScreen

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:otobusum_nerede_mobile_clone/components/main_appbar.dart';


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

  @override
  Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
      statusBarColor: Colors.transparent,
    ));
    return Scaffold(
      extendBodyBehindAppBar: true,
      backgroundColor: const Color(0xFFF7F7FA),
      appBar: const MainAppBar(
        title: "Otobüsüm Nerede?",
        height: 90,
      ),
      bottomNavigationBar: BeautifulNavigationBar(
        height: MediaQuery.of(context).size.width * 0.16,
      ),
      body: Column(
        ...
      ),
    );
  }
}

MainAppbar Widget

import 'package:flutter/material.dart';
import '../constants/paddings.dart';

class MainAppBar extends StatelessWidget implements PreferredSizeWidget {
  final String title;
  final double height;
  const MainAppBar({required this.title, required this.height, super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: GeneralPaddings.generalPageIndentPadding.value()),
      decoration: BoxDecoration(
        color: Colors.black.withOpacity(0.6),
        borderRadius: const BorderRadius.only(bottomRight: Radius.circular(120)),
      ),
      child: SafeArea(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Row(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Image.asset(
                      'assets/images/logo.png',
                      width: 32.0,
                    ),
                    RichText(
                      text: const TextSpan(
                        children: [
                          TextSpan(
                            text: 'Otobüsüm',
                            style: TextStyle(
                              color: Colors.white,
                              fontSize: 20,
                              fontWeight: FontWeight.w800,
                            ),
                          ),
                          TextSpan(
                            text: 'Nerede?',
                            style: TextStyle(
                              color: Colors.white,
                              fontWeight: FontWeight.w300,
                              fontSize: 20,
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
                Image.asset(
                  'assets/images/menu3.png',
                  width: 32.0,
                  color: Colors.white,
                ),
              ],
            ),
            const Text(
              "Merhaba",
              style: TextStyle(color: Colors.white, fontSize: 16, fontWeight: FontWeight.w500),
            ),
          ],
        ),
      ),
    );
  }

  @override
  Size get preferredSize => Size(double.infinity, height);
}

I tried the 'BlendMode' features but they didn't work.

...
decoration: BoxDecoration(
        backgroundBlendMode: BlendMode....,
        color: Colors.black.withOpacity(0.6),
        borderRadius: const BorderRadius.only(bottomRight: Radius.circular(120)),
      ),
...