YumeHANA YUME'S DEV

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..

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..