Flutter TIL - Semantics

[Music] welcome today in today i learned semantics semantics is a flutter widget that annotates the wiki tree with a description it's used by accessibility tools search engines and other analysis software to determine the meaning of the application but my guess for you is that screen readers like voiceover on ios and talkback on android are the biggest use case to use semantics in your app so let's go for a demo here we have a very very small app it has a scaffold app bar the scaffold a center and a column which holds an image and a text you can see it right here in the emulator i already have talkback enabled because this is an android device so if i tap single tab something on this emulator the screen reader will announce it let's try it out with the app bar mr anderson demo heading there you go so let's say we have an image like we do right here this is an image the the company logo image right so if someone is using the screen reader what will they hear let's find out unlabeled image well that's not very helpful is it an unlabeled image how can we resolve this so the screen reader would say something meaningful so we can wrap this image with semantics right let's try it out unlabeled image nothing yet that's because we need to set a label this label is a string and let's say the company logo let's try this again the company logo image that's right it said the company logo and then image because it already has the context of the image this is nice and already helpful because i could set mr anderson logo but because the app name is called mr anderson demo maybe it's implicit um so now this is a small introduction to the semantics widget there are a lot and a lot of stuff to be found here you can find them out yourself let's do one more i already prepped one up and that's this text view our text which says click me let's find out what the screen will say about this click me that's right only click me that's right but what if we wrap this up with a gesture detector and make this more like a button right you need to provide a just keep it empty for now that's okay hot reload and that's here click me double tap to activate okay that's something already double tap to activate that's very cool but it's not very clear that it's a button right maybe it doesn't seem like a button right now but you could style it and make it feel like a button even though it's just a text by all means use a button widget if it is really a button but there are some cases so here you can wrap it again in the semantics widget and here you can say bud is true that's reload and it's here click me button double tap to activate click me button double tap to activate this is exactly what we want and that concludes the demo for now have a look at the other attributes and see you guys in the next video you

Channel: Dennis Anderson

Views: 177

Keywords: iMovie

Id: jg7pzXqX-Po

Length: 4min 31sec (271 seconds)

Published: Thu Oct 07 2021