여러모로 플러터로 앱을 제작중에 컴포넌트를 만들어두는게 조금더 나을꺼같아서 미리 만들어보기도하고, 포스팅도해보려고한다.
먼저 컴포넌트의 구조는 이렇게 정하려고한다
검색창 클릭->검색페이지로이동->검색페이지에서 검색결과와, 필터다이로그->다시원상태로 혹은 검색결과로
그럼 먼저 
검색창을 디자인해봤다.
decoration: BoxDecoration(
boxShadow: <BoxShadow>[
BoxShadow(
color: Theme.of(context).shadowColor.withOpacity(0.3),
offset: const Offset(0, 3),
blurRadius: 5.0)
],
borderRadius: const BorderRadius.all(Radius.circular(15.0)),
color: Colors.white,
),
...
decoration: InputDecoration(
hintText: "검색어를 입력해주세요",
hintStyle: Theme.of(context).textTheme.caption,
border: InputBorder.none,
),재사용성을 높이기위해서 직접 컬러를 입력하기보단 theme.of를 사용해서 사용하는 앱의 테마에 맞게끔 설정해놨다.
그리고 해당 앱을 히어로 위젯으로 감싸서 눌렀을때 검색창이 맨위로 움직이게끔 돌아가게 만들었다.
검색창 내부에 isActive 란 변수를 할당해서 검색중일때는 필터버튼으로 왼쪽에는 뒤로가기 버튼으로 변경하도록 하였다.
문제가 하나있었는데 해당 컴포넌트를 클릭했을때 페이지를 전환하려고했는데 TextField와 gestureDetector가 겹치는건지 몰라도 onTap이 실행이 안되는것을 발견하여서 검색창위에 stack위젯을 활용해서 빈 컨테이너를 생성한다음 해당 컨테이너에 onTap을 적용시켰다.
마지막으로 플터 부분을 만들었는데 showDialog로 하니깐 SlideTransition 을 했는데 크기가 지정이 되지않았다.
그래서 밑에 sizedBox를 두어서 버튼이 화면에 보이도록 만들어두긴했지만, 조금 편법인것같아서 변경해보려고한다.
또 문제가있었는데 dispose시 애니메이션이 적용이 어려웠는데 이문제는 showDialog로 하는것보다 하나의 위젯을 원래 서치 컴포넌트에 position 시키는 형식으로 하면 해결되지않을까 싶기도한데... 꺼질때까지 애니메이션이 동작한다면 살짝 답답하니깐 이것도 나쁘지 않으려나 하는 마음도있다.
그럼이만
