Flutter TalkBack VoiceOver Description on Image

We all know about Google TalkBack feature on android and VoiceOver feature in iOS. They are used to give information or communicate directly from app to cognitive users Users who have disabilities. We can set semanticLabel property on image and pass image description. So when in TalkBack mode on in android user selects the image a voice over message will tell the image description text. Now the user will know what is the purpose of image.

Flutter Set TalkBack VoiceOver Description on Image

1. To set semanticLabel image description on network just pass semanticLabel.

 Image.network(imageURL,
          width: 250,
          height: 200,
          fit: BoxFit.contain,
          semanticLabel: 'This is a Rose Flower Image'),

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,
          semanticLabel: 'This is a Rose Flower Image'),
    ))));
  }
}

Screenshot: