Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[공지][Front] front 요소들 크기 관련 #26

Open
sunJ0120 opened this issue Apr 21, 2024 · 0 comments
Open

[공지][Front] front 요소들 크기 관련 #26

sunJ0120 opened this issue Apr 21, 2024 · 0 comments
Assignees
Labels
Notice notice label

Comments

@sunJ0120
Copy link

sunJ0120 commented Apr 21, 2024

기존에 대부분 width, height를 지정값으로 지정하셨으리라 생각합니다 (저도 버튼 크기 같은걸 거의 지정값으로 했더라구요...)
근데 이렇게 할 경우, 폰 크기에 따라 ui가 망가질 위험이 있습니다.

그래서 아래와 같이 현재 폰크기를 받아서 값을 지정해야 합니다.
저의 경우는 따로 클래스를 생성해서 get으로 이 값들을 받아올 수 있게 설정할 예정입니다.

MediaQueryData mediaQuery = MediaQuery.of(context); 
double screenWidth = mediaQuery.size.width;
double screenHeight = mediaQuery.size.height;

그래서 이처럼 현재 화면값을 받아온 다음, 이 안에서 동적으로 요소를 생성해야 합니다.

style: ElevatedButton.styleFrom(
      fixedSize: Size(screenWidth*0.9, screenHeight*0.08),
      padding: EdgeInsets.symmetric(horizontal: 20, vertical: 5),
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(20),
      ),
      backgroundColor: Color(0xFF4B4A48),
),

예시로, 저의 경우 버튼 사이즈를 screenWidth0.9, screenHeight0.08 이런식으로 조정했는데 크기가 딱 알맞았습니다. 워낙 폰 기기 화면 크기가 천차만별이라...이렇게 화면 크기에 맞게 동적으로 사이즈를 구성하는게 좋을 것 같습니다.

저도 모든 화면의 요소를 다 이렇게 바꾼건 아니고, 실험적으로 오늘 개발한 bottom시트 부분만 바꿔본거여서 송금 화면 ui 요소들 전부 이런식으로 바꾸고 결과들 이슈로 달아두려고 합니다.


기존에 요소 생성할때는 고정값으로 했었는데, 예를들면

style: ElevatedButton.styleFrom(
    fixedSize: Size(346, 73),
    padding: EdgeInsets.symmetric(horizontal: 20, vertical: 5),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(20),
    ),
    backgroundColor: Color(0xFF4B4A48),
  ),

Size(346, 73) <- 이런식으로 고정값으로 했었습니다

@sunJ0120 sunJ0120 self-assigned this Apr 21, 2024
@sunJ0120 sunJ0120 added help wanted Extra attention is needed and removed help wanted Extra attention is needed labels Apr 21, 2024
@sunJ0120 sunJ0120 changed the title [Front][송금] front 요소들 크기 관련 [공지][Front] front 요소들 크기 관련 Apr 21, 2024
@sunJ0120 sunJ0120 added the Notice notice label label Apr 21, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Notice notice label
Projects
None yet
Development

No branches or pull requests

1 participant