① 배운 것
gorouter의 go가 이전의 인스턴스를 재활용 하는 문제 해결
- context.go(A)를 했는데 첫번째는 괜찮은데 두번째 context.go(A)를 하면 이전에 만들어진 A 인스턴스가 재활용된다.
- 그래서 initState도 타지않고 build()위젯 외부에 만들어놓은 클래스 변수도 재정의 되지않는다.
- 내가 만드는 화면은 화면에 들어올때 마다 build()위젯 외부에 만들어 놓은 클래스 변수가 항상 재정의 되었어야 했기 때문에 인스턴스를 재활용하는게 문제였다. 그래서 UniqueKey()를 이용해 매번 새로운 인스턴스 가 만들어지게 수정했다.
precache + cached_network_image
- precache는 화면에 이미지가 보여지기 전에 미리 로드를 시키는 것
- cached_network_image는 한번 이미지를 로드하면 캐시해두어서, 다음번에 빠르게 이미지를 다시 보여주는 것
void didChangeDependencies() {
precacheImage(
CachedNetworkImageProvider(widget.img),
context,
);
super.didChangeDependencies();
}
///실제 사용
Image(image: CachedNetworkImageProvider(widget.img),)inkWell의 여러 효과
이 다섯 가지 속성은 모두 Flutter의 InkWell 위젯이나 InkResponse 위젯과 같은 Material 디자인 요소에서 사용되는 색상 속성들로, 사용자 상호작용에 따른 시각적 피드백을 제공합니다. 각 속성이 다른 상호작용 상태를 나타내며, 그 차이점은 다음과 같습니다:
-
super.focusColor
- 설명: 위젯이 포커스를 받았을 때 표시되는 색상입니다.
- 사용 예시: 주로 키보드 탐색이나 접근성 기능을 사용할 때, 포커스된 요소를 시각적으로 강조하는 데 사용됩니다.
InkWell( focusColor: Colors.blue, onTap: () {}, child: Text('Focus me!'), ); -
super.hoverColor
- 설명: 위젯 위에 마우스 커서를 올려놓았을 때 표시되는 색상입니다.
- 사용 예시: 데스크톱 환경이나 웹에서, 마우스를 올려놓았을 때 해당 요소가 하이라이트되는 것을 시각적으로 나타내는 데 사용됩니다.
InkWell( hoverColor: Colors.blue, onTap: () {}, child: Text('Hover over me!'), ); -
super.highlightColor
- 설명: 위젯이 길게 눌러졌을 때 또는 터치가 활성 상태일 때 표시되는 색상입니다.
- 사용 예시: 터치 이벤트가 길게 유지되는 동안, 위젯이 하이라이트되는 것을 나타내는 데 사용됩니다.
InkWell( highlightColor: Colors.blue, onTap: () {}, child: Text('Highlight me!'), ); -
super.overlayColor
- 설명: 위젯의 터치 피드백 색상입니다. 터치나 클릭과 같은 상호작용 시 오버레이로 나타나는 색상입니다.
- 사용 예시: 터치 또는 클릭 피드백으로 사용됩니다.
MaterialStateProperty로 설정할 수 있어 상태별 색상 정의가 가능합니다.
InkWell( overlayColor: MaterialStateProperty.resolveWith((states) { if (states.contains(MaterialState.pressed)) { return Colors.blue; } return null; }), onTap: () {}, child: Text('Overlay color example'), ); -
super.splashColor
- 설명: 위젯을 터치했을 때 생기는 잉크 스플래시(물결) 효과의 색상입니다.
- 사용 예시: 터치 이벤트가 발생했을 때, 물결처럼 퍼져나가는 효과의 색상을 나타내는 데 사용됩니다.
InkWell( splashColor: Colors.blue, onTap: () {}, child: Text('Splash me!'), );
요약하자면:
focusColor: 포커스가 맞춰졌을 때의 색상.hoverColor: 마우스 커서가 위에 있을 때의 색상.highlightColor: 길게 누르거나 터치가 유지될 때의 색상.overlayColor: 터치나 클릭과 같은 상호작용 시 오버레이 색상.splashColor: 터치 시 퍼져나가는 물결 효과의 색상.
이 각각의 속성들은 특정 상호작용 상태에서 위젯을 시각적으로 구분하는 데 도움을 줍니다.
보통 많이 사용되는, 눌렀을때 색상 바뀌게 하는 코드는 아래와 같음
InkWell(
overlayColor: MaterialStateProperty.all(overlayColor),
splashFactory: NoSplash.splashFactory,
....);
② 회고 (restropective)
좋은 동료가 있다는 것은 좋다.
왜냐면 혼자 고민을 하는 것보다 훨씬 좋은 해결책을 찾을 수 있기 때문이다.
동료의 코드가 되게 쉽게 쉽게 읽히고 수정가능한 코드이다. 나도 그런 코드를 좋은 코드라 생각하기 때문에 동료의 코드를 참고하기도하고,내 코드를 쓰면서 동료가 읽기 쉬울지, 내 코드가 전체적인 프로젝트에서 튀지는 않는지 항상 고민하면서 코드를 작성하고있다.
③ 개선을 위한 방법
되고싶다