20230807 TIL

Today 요약

[✅] 프로그래머스 코딩테스트 LV0 2문제

[✅] flutter 랜덤 위젯 2개 

[✅] flutter 위젯 영상 2개

[✅] flutter 강의 3개

[✅] 코드챌린지 1개 > 아이콘 클릭시 음성 on/off

 

---

배운 점

1) Flutter AbsorbPointer 

• 대부분의 위젯은 억제 입력을 제공한다
• onPressed 콜백을 설정하지 않으면 기능억제가 된다
• NeverScrollableScrollPhysics를 사용해서 사용자가 드래그할 때 ListView를 스크롤 하지 않게 할 수 있음
• 터치 이벤트와 분리해야 한다면 AbsorbPointer를 사용하라 차단하고 싶은 위젯의 서브트리의 가장 윗부분에 넣으면 아래의 모든 위젯에서 터치 이벤트를 막아준다
• absorbing: 을 사용하여absorbPointer를 빠르게 껐다 켰다 할 수 있음
• ignoringSemantics : 스크린 리더와 다른 기능들이 차단된 위젯을 무시할지 조종할 수 있게 해줌

AbsorbPointer class - widgets library - Dart API

 

2)  BackdropFilter

Stack(
  fit: StackFit.expand,
  children: <Widget>[
    Text('0' * 10000),
    Center(
      child: ClipRect(  // <-- clips to the 200x200 [Container] below
        child: BackdropFilter(
          filter: ui.ImageFilter.blur(
            sigmaX: 5.0,
            sigmaY: 5.0,
          ),
          child: Container(
            alignment: Alignment.center,
            width: 200.0,
            height: 200.0,
            child: const Text('Hello World'),
          ),
        ),
      ),
    ),
  ],
)

• ImageFilter 클래스와 BackdropFilter 위젯을 함께 사용
• ImageFilter.blur : 변환에 이용되는 블러나 매트릭스 중 원하는 걸 고른후 위젯에 child를 만들어준다
• child 가 필터적용이 되는 것
• 필터를 적용하여 그림이 보이지 않게 하려면 아래와 같은 코드를 사용하면 된다
• 또한 일부만 필터를 넣을수 있음 Positioned 사용

BackdropFilter class - widgets library - Dart API

BackdropFilter(
	filter : ImageFilter.blur(
    	sigmaX:5,
        sigmaY:5, 
    ),
    child : Container(
    	color:Colors.black.withOpacity(0),    
	)
)

 

3) MaterialApp debugShowcheckedModeBanner

• 시뮬레이터 오른쪽 위에 debug배너를 없애는 것
• 기본 true

 MaterialApp(
      debugShowCheckedModeBanner: false,
 )

debugShowCheckedModeBanner property - MaterialApp class - material library - Dart API

4) OrientationBuilder()

• child를 가지지 않는 대신 builder 함수를 실행
• 부모 위젯의 방향에 따라 달라질 수 있는 위젯트리를 만듦

OrientationBuiler(
	builder:(context, orientation) {
    	return Scaffold(
        	....
        )
    }
)

 if (orientation == Orientation.landscape) {
  return const Scaffold(
    body: Center(
      child: Text("가로모드 x "),
    ),
  );
}

• collection if 와 collection for는 하나의 대상에만  작동하는데 여러개의 대상에 작동하게 하려면  리스트 안에 넣으면 된다

if(orentation == Orientation.portrait) ...[
	TextButton(),
    TextButton(),
    Text()...
]

5) WidgetFlutterBinding.ensureInitialized()

• flutter 프레임워크를 이용해 앱이 시작하기 전에 state를 어떤식으로든 바꾸고 싶다면 엔진자체와 엔진, 위젯의 연결을 확실하게 초기화 시켜야 함
• ensureInitialized :runApp을 실행하기 전에 binding을 초기화 할 때만 호출해야함

class WidgetsFlutterBinding extends BindingBase with GestureBinding, SchedulerBinding, ServicesBinding, PaintingBinding, SemanticsBinding, RendererBinding, WidgetsBinding

6) SystemChrome

• setEnabledSystemUIMode : 제공된 마지막 설정으로 시스템 오버레이 복원 / 플랫폼 강제로 ui 요소를 활성화/비활성화 할 때 사용
• setApplicationSwitcherDescription : 응용 프로그램 전환기와 관련된 응용 프로그램의 현재 상태에 대한 설명 지정  (최근 작업)  
• setEnabledSystemUIMode : 애플리케이션이 실행중일때 표시할 시스템 모드
• setPreferredOrientations : 애플리케이션 인터페이스가 표시될 수 있는 방향 지정 
• setSystemChangeCallback : 시스템ui 변경에 응답하기 위한 콜백 메서드 설정
• setSystemUIOverlayStyle : 표시되어있는  시스템 오버레이 (android,ios..)스타일 지정

SystemChrome class - services library - Dart API

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  await SystemChrome.setPreferredOrientations(
    [
      DeviceOrientation.portraitUp,
    ],
  );

  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);

  runApp(const MyApp());
}

• 위의  코드 : 화면 세로모드 고정 / 다크모드

7)kIsWeb

• 응용프로그램이 웹에서 실행되도록 컴파인된 경우 true

const bool kIsWeb = bool.fromEnvironment('dart.library.js_util');