【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part108 その他

基礎 から 学ぶ Flutter 」という書籍で  学習 したことを ブログでアウトプットしていこうと思います。今回は ウィジェット編 ( part108 )です。

前回

【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part107 Async

今回から「その他」について学びます。

Semanticsウィジェット

Semanticsウィジェットはアクセシビリティ機能です。目の不自由な方に音声で読み上げてくれる機能を提供できます。
スクリーンリーダーというやつでしょうか。

AndroidだとTalkBack、iOSだとVoiceOverという機能だそうです。

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/semantics.dart';

void main() {
  runApp(new MaterialApp(home: new MyHomePage(title: 'テスト中!')));
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Semantics(
              child: GestureDetector(
                child: Text(
                  '$_counter',
                  style: Theme.of(context).textTheme.headline4,
                ),
                onTap: _incrementCounter,
                onLongPress: () => setState(() => _counter = 0),
              ),
              button: true,
              onTapHint: '値を増加',
              onLongPressHint: 'リセット',
              customSemanticsActions: <CustomSemanticsAction, VoidCallback>{
                CustomSemanticsAction(label: 'Increment'): _incrementCounter,
                CustomSemanticsAction(label: 'reset'): () =>
                    setState(() => _counter = 0),
              },
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _incrementCounter();
        },
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

・・・どうやって確認すればよいかわからず・・・。

 

最後に

AndroidでTalkBackを利用するには上にスワイプして右にスワイプ・・・とあるのですが何も起こりませんでした。
どんな動作をするのか確認できず残念です。

昨今、アクセシビリティはとても重要な機能の一つとなっています。
Semanticsウィジェットのプロパティティは50種類以上もあるというので驚きです😦

今日はここまで!

参考

FlutterでSemanticsクラスを使ってコンテキストメニューを作成 – Qiita

【日本語版】【Flutter】Widget of the Week – #47 Semantics【要約】│アイマナ – ITを学ぼう (aimana-it.com)