First Day

One Day Widget

하루에 Flutter Widget을 하나 이상을 예제를 보면서 이해하는 시간을 가지기 위해 준비한 시간

Today Widget (Semantics)

// 위젯의 의미에 대한 설명으로 위젯 트리에 주석을 추가하는 위젯!!
// 접근성 도구 , 검색 엔진 및 기타 의미 분석 소프트웨어에서 용응 프로그램의 의미를 결정하는 데 사용!!

• 예제

import 'package:flutter/material.dart';

class ContainerSemantics extends StatelessWidget {
  const ContainerSemantics({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(vertical: 10.0),
      width: double.infinity,
      height: 200,
      child: Semantics(
        label: "Free Image",
        child: const CircleAvatar(
          radius: 25.0,
          backgroundImage: NetworkImage("https://post-phinf.pstatic.net/MjAyMTAxMjVfMTA1/MDAxNjExNTU3Mzk4MjIy.MEUMpAkus932Fhh-pbLvJrTfgcRSa9lLqnSzItTVjOcg.ua3bCg2MM04cjQR1LUjdol1vgYEhnSmUF-BMDWyZW7Ig.PNG/%EA%B7%80%EC%97%AC%EC%9A%B4%EC%9D%BC%EB%9F%AC%EC%8A%A4%ED%8A%B8.png?type=w1200"),
          child: Text(
            "우리 고양이",
            style: TextStyle(color: Colors.red),
          ),
        ),
      ),
    );
  }
}

---

Today Widget (merge Semantics)

• 하위 항목의 semantics를 병합하는 위젯

• 이 노드에 뿌리를 둔 하위 트리의 모든 semantics 체계가 semantic 체계 트리의 한 노드를 병합되도록 함

• 체크박스 위젯 옆에 text node가 있는 위젯의 경우 checkbox의 checked semantic status를 가진 Text 노드의 label을 레이블이 모두 있는 단일 노드로 사용할 수 있음

• 하위 트리의 두 노드에 semantics가 충돌하는 경우 결과가 무의미 할 수 있음

• 체크박스가 체크되어 있고 체크박스가 해제되어 있는 서브트리는 체크된 것으로 표시

• label은 단일 문자열로 merge / 각 레이블을 다른 레이블과 구분하는 개행 / merge된 하위 트리의 여러 노드

• semantics 제스쳐를 처리할 수 있는 경우 tree 순서의 첫번 쨰 노드가 콜백을 수신하는 노드가 됌

import 'package:flutter/material.dart';

class ContainerMergeSemantics extends StatelessWidget {
  const ContainerMergeSemantics({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
        padding: const EdgeInsets.symmetric(vertical: 10.0),
        width: double.infinity,
        height: 200,
        child: MergeSemantics(
          // 하위 항목의 semantics를 병합하는 위젯
          // 이 노드에 뿌리를 둔 하위 트리의 모든 semantics 체계가 semantic 체계 트리의 한 노드를 병합되도록 함
          // 체크박스 위젯 옆에 text node가 있는 위젯의 경우 checkbox의 checked semantic status를 가진 Text 노드의 label
          // 을 레이블과 레이블이 모두 있는 단일 노드로 사용할 수 있음

          // 하위 트리의 두 노드에 semantics가 충돌하는 경우 결과가 무의미 할 수 있음
          // 체크박스가 체크되어 있고 체크박스가 해제되어 있는 서브트리는 체크된 것으로 표시
          // label은 단일 문자열로 merge / 각 레이블을 다른 레이블과 구분하는 개행 / merge된 하위 트리의 여러 노드
          // semantics 제스쳐를 처리할 수 있는 경우 tree 순서의 첫번 쨰 노드가 콜백을 수신하는 노드가 됌
          child: Row(
            children: <Widget>[
              Checkbox(
                value: true,
                onChanged: (bool? value) {},
              ),
              const Text('Settings'),
            ],
          ),
        ));
  }
}

---

Today Widget (exclude_semantics)

• child 항목의 모든 자손의 시맨틱스를 삭제하는 위젯!
• excluding이 true라면, 해당 위젯(해당 child tree)에서 제외 되옴
• 혼란스러운 하위 위젯을 숨기는 데 사용하 수 있음
• example (material library chip 위젯은 chip label과 중복되기에 아바타를 숨킬 수 있음)

import 'package:flutter/material.dart';

class ContainerExcludeSemantics extends StatelessWidget {
  const ContainerExcludeSemantics({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(vertical: 10.0),
      width: double.infinity,
      height: 200,
      child: const ExcludeSemantics(

        excluding: true,
        child: CircleAvatar(
          radius: 25.0,
          backgroundImage: NetworkImage("https://post-phinf.pstatic.net/MjAyMTAxMjVfMTA1/MDAxNjExNTU3Mzk4MjIy.MEUMpAkus932Fhh-pbLvJrTfgcRSa9lLqnSzItTVjOcg.ua3bCg2MM04cjQR1LUjdol1vgYEhnSmUF-BMDWyZW7Ig.PNG/%EA%B7%80%EC%97%AC%EC%9A%B4%EC%9D%BC%EB%9F%AC%EC%8A%A4%ED%8A%B8.png?type=w1200"),
          child: Text(
            "우리 고양이2",
            style: TextStyle(color: Colors.blue),
          ),
        ),
      ),
    );
  }
}

---

Today Widget (Block Semantics)

• BlockSemantics
• 동일한 semantics 컨테이너에서 이전에 그려진 모든 위젯의 semantics를 삭제하는 위젯
• 특정 위젯 뒤에 그려진 접근성 도구에서 위젯을 숨기는 데 유용
• ex) Drawer은 drawer 외부 모든 위젯과 상호작용을 차단함

import 'package:flutter/material.dart';

class ContainerBlockSemantics extends StatelessWidget {
  const ContainerBlockSemantics({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(vertical: 10.0),
      width: double.infinity,
      height: 200,
      child: BlockSemantics(
        blocking: true,
        child: const CircleAvatar(
          radius: 25.0,
          backgroundImage: NetworkImage("https://post-phinf.pstatic.net/MjAyMTAxMjVfMTA1/MDAxNjExNTU3Mzk4MjIy.MEUMpAkus932Fhh-pbLvJrTfgcRSa9lLqnSzItTVjOcg.ua3bCg2MM04cjQR1LUjdol1vgYEhnSmUF-BMDWyZW7Ig.PNG/%EA%B7%80%EC%97%AC%EC%9A%B4%EC%9D%BC%EB%9F%AC%EC%8A%A4%ED%8A%B8.png?type=w1200"),
          child: Text(
            "우리 고양이3",
            style: TextStyle(color: Colors.red),
          ),
        ),
      ),
    );
  }
}