YumeHANA YUME'S DEV

메뉴를 구성하기 위해 Drawer Navigator를 사용 https://reactnavigation.org/docs/drawer-navigator Drawer Navigator | React NavigationDrawer Navigator renders a navigation drawer on the side of the screen which can be opened and closed via gestures.reactnavigation.org Navigation docs에서 expo기준으로 진행Setup두개를 설치npm install @react-navigation/drawernpx expo install react-native-gesture-handler react-native-reanimate..

tab 기능을 구현하기 위해서tabBar를 사용 https://api.flutter.dev/flutter/material/TabBar-class.html TabBar class - material library - Dart APIA Material Design primary tab bar. Primary tabs are placed at the top of the content pane under a top app bar. They display the main content destinations. Typically created as the AppBar.bottom part of an AppBar and in conjunction with a TabBarView. If a Tapi.flutter.de..

3 x 2 형태로 데이터를 보여주고자 하여 GridView를 사용하여 구현Table 보다는 Grid 형식으로 사용하는 이유는 테이블의 경우에는 데이터를 구조에 맞춰서 보여줘야하지만Grid의 경우에는 알아서 개수를 나누어 구조를 만들어주기 때문에 GridView를 사용 https://api.flutter.dev/flutter/widgets/GridView-class.html GridView class - widgets library - Dart APIA scrollable, 2D array of widgets. The main axis direction of a grid is the direction in which it scrolls (the scrollDirection). The most commonl..

외부에서 font를 사용하는 과정에서 font size가  큰 상태에서 bold속성을 주면 fontColor가 정상적으로 채워지지 않는 경우가 발생 이것처럼 텍스트의 외곽선이 안채워져서 비어있는 느낌이 나는 경우가 발생 이를 해결하기위해 테두리도 함께 색을 변경해주기 위해foreground 속성을 사용하여 테두리크기와 색을 변경해주었지만이 경우에는 내부 색은 채워지지 않는 상황이 발생 찾아보니 Text의 경우 테두리 색과 글자색을 동시에 변경을 할 수 없다고 하여테두리 색과 글자색을 개별로 만들어줘서 합쳐줘야한다.Useage이렇게 Stack을 활용하여 두개의 Text를 겹쳐주어 하나에는 외곽선 스타일을 다른 Text에는 내부 글자 색상을 넣어주도록 위젯을 생성 return Stack( child..

progress bar 기능 구현을 위해 percent_indicator 라이브러리를 사용여러 progress bar가 존재하기에 추후 여러 progress bar를 만들때 유용하게 사용이 가능할 것 같음. https://pub.dev/packages/percent_indicator percent_indicator | Flutter packageLibrary that allows you to display progress widgets based on percentage, can be Circular or Linear, you can also customize it to your needs.pub.dev Dependenciespercent_indicator 의존성 추가percent_indicator: ^..

bottomModal을 사용하면서 완료를 눌렀을때 뿐만 아닌 모달이 닫혔을때도 값을 전달하고자 한다.기존에는 Navigator.pop(context,value) 방식으로 모달이 닫힐때 값 전달을 처리했지만 이는 특정 버튼을 눌렀을때 혹은 특정 동작을 했을때만 처리가 가능하고 단순히 뒤로가기 혹은 모달 외부 클릭시 값 전달 방법이 없어callBack 함수를 이용. PopScope를 활용해보고자 했지만 모달을 닫기전에만 컨트롤을 할 수 있었을 뿐 모달이 닫히면서 값 전달이 안되었다. 텍스트 수정을 위해 연필 아이콘을 누르면 단순 input창이 나오는 bottomModal을 구현이후 모달이 닫을때 자동으로 수정되게 처리CallBack FunctionCallBack 함수 선언class BottomModalInp..

어느정도 앱을 만들고 출시 전 앱 아이콘을 만들고자 한다.임시로 앱 아이콘 디자인을 한 후 아이콘을 적용 앱의 경우에는 여러 모바일 환경이 존재하므로 사이즈 별로 아이콘을 정해줘야하는데아래 사이트에서 각각 사이즈에 맞는 아이콘을 만들어 준다.https://www.appicon.co App Icon Generator www.appicon.coUseage간단하게 아이콘 디자인을 하고,사용할 기종을 선택하여 생성을 누르면 모바일 환경 사이즈별로 아이콘을 생성해준다. 여기서 android와 Assets.xcassets두개의 폴더가 생성이 되는데이 폴더 그대로 옮겨 덮어쓰기를 하면 된다. 저장 위치android -> app -> src -> main -> resios -> runner -> Assets.xcas..

값을 선택하는 스크롤이 있는 영역에서 특정 값을 파라미터로 보냈을때 해당 값으로 자동으로 스크롤이 되도록 처리ListView Scrollhttps://yumedev.tistory.com/27 [ Flutter ] Horizontal Scroll ListView, Global KeyOnBoarding에서 초기 설정을 처리하기 위해서요일과 금액을 세팅해야 화면을 넘어가게 처리 그 과정에서 요일 선택에서 datePicker를 사용할까 하다가 요일만 필요하기에 새로운 방법을 고민하다가Syumedev.tistory.com이전에 만들었던 스크롤을 다시 사용하다보니 값 전달을 할때 스크롤이 그대로 유지 되는 경우가 발생값이 1일때와 10 이상의 값이 들어왔을때 스크롤이 안되어 있어서 들어온 값을 기준으로 스크롤이 되..