YumeHANA YUME'S DEV

Text를 사용하다 보면 문구 중 일부만 따로 style을 추가적으로 넣고 싶은 경우가 있다이때 Text.rich를 사용하면 전체 style뿐만 아니라 개별로도 style을 적용을 쉽게 처리할 수 있다.Text Rich Text.rich안에 TextSpan을 활용하여 영역을 나눠준다.이때 모든 Text에는 일괄적으로 동일한 style을 주기 위해TextSpan안에 TextSpan을 넣어서 개별로 관리를 할 수 있도록 처리 TextSpan의 style을 적용하면 TextSpan안의 항목들은 모두 동일한 style이 적용된다.이후 TextSpan 안의 TextSpan에 추가적으로 개별적인 Style을 줄 수있다. 전체 TextStyle에 fontSize와 color를 주었고, 그 안의 custom이 필요한 ..

Bottom Modal을 사용할 때 안에 textField를 누르면 키보드가 생성되면서 modal이 가려지는 문제가 발생https://pub.dev/packages/keyboard_avoider keyboard_avoider | Flutter packageA lightweight alternative to the Scaffold widget for avoiding the on-screen software keyboard. Automatically scrolls obscured TextField child widgets into view on focus.pub.dev keyboard_avioder를 사용하면 키보드가 열릴때 알아서 해당 widget을 맞춰 올려준다. Dependenciesyaml 파일에 k..

버튼을 누르면 페이지 이동을 하기 위해 naviagation을 사용 Setupnatvigation을 사용하기 위해 react-navigation과 stack 사용npm install @react-navigation/nativenpm install @react-navigation/stack Useageapp.tsx 파일에서 네비게이션을 설정 NavigationContiner르 페이지를 이동할 영역을 잡아주며Stack.Navigator를 사용하여 어느 페이지로 이동할것인지 경로를 잡아준다. Stat.Navigator initalRouteName="Home"으로 설정하여 초기 화면은 Home으로 나오도록 하며,Home에서 버튼을 누르면 QR 스캔을 하는 컴포넌트로 이동하도록 구현 처음에 Stack.Navig..

react에서 svg 아이콘 사용  해당 gitHub를 참고하여 사용https://github.com/kristerkari/react-native-svg-transformer GitHub - kristerkari/react-native-svg-transformer: Import SVG files in your React Native project the same way that you would inImport SVG files in your React Native project the same way that you would in a Web application. - kristerkari/react-native-svg-transformergithub.com 우선 사용할 svg 파일을 다운https:/..

Expo camera를 활용하여 QR 코드 인식하기Expo 에서 BarcodeScanner를 사용할려고했는데 오류가 발생하면서 실행이 안되어서 Camera를 사용해서 기능을 구현 https://docs.expo.dev/versions/latest/sdk/camera/ CameraA React component that renders a preview for the device's front or back camera.docs.expo.devExpo Camera Setup우선 Expo-camera를 설치npx expo install expo-camera 앱을 사용할때 사용자의 카메라 혹은 오디오의 권한을 요청하기 위해 플러그인을 추가app.json 파일에 plugins를 추가{ "expo": { "..

텍스트를 상황에 맞게 보여주고 안보여주고 처리를 위해 blur 처리를 이용 금액을 보여주는 부분을 만들면서 blur처리를 하며 보이고 안보이고를 선택할 수 있도록 기능을 처리  BackdropFilterbackdropFilter를 사용하면 backdropFilter위에 작성한 내용들을 blur처리를 한다background의 배경을 blur처리 하는 것이므로 child안에는 blur처리를 안하는 내용들이 들어간다. 텍스트 하나만 blur처리를 하고자 child에는 빈 영역을 넣어주어 blur처리가 되는 영역을 잡아준다.child: BackdropFilter( filter: ImageFilter.blur( sigmaX: 5.0sigmaY: 5.0), child: Con..

OnBoarding에서 초기 설정을 처리하기 위해서요일과 금액을 세팅해야 화면을 넘어가게 처리 그 과정에서 요일 선택에서 datePicker를 사용할까 하다가 요일만 필요하기에 새로운 방법을 고민하다가Scroll ListView를 사용하기로 결정 그러면 ListView를 가로로 스크롤이 가능하여 선택 할 있다.Scroll ListViewListView에서 보여줄 리스트 초기화 및 선택값 초기화final List list = List.generate(31, (index) => (index + 1).toString()); String selectedValue = "1"; ListView 에 Scroll기능을 추가할려면scrollDirection을 추가해서 방향을 설정해주면 된다. 이후 Getstu..

처음 앱이 실행되었을때 설명하는 화면이 나오는 것을 처리하고 싶어서 OnBoarding을 사용https://pub.dev/packages/introduction_screen introduction_screen | Flutter packageIntroduction/Onboarding package for flutter app with some customizations possibilitiespub.dev flutter에서 introduction_screen을 활용하여 onBoarding을 구현Dependenciesintroduction_screen 의존성 추가introduction_screen: ^3.1.14 OnBoardingOnBoarding 화면을 만들기 위해 메인 컴포넌트를 제작이후 세부 페이지..