Flutter에서 화면 크기를 처리하는 가장 좋은 방법은 무엇입니까?

Davizgarzia

나는 첫 번째 프로젝트에서 일하고 있으며 장치 화면에 따라 위젯의 크기를 처리하는 방법에 의문이 있습니다.

iPhone 11에서는 멋지게 보이지만 Nexus 5에서 에뮬레이션하면 모든 것이 엄청나게 커집니다 ... 타이포그래피, 입력, 버튼 ... :(

항상 멋진 UI를 갖는 가장 효율적인 방법 (대부분의 경우 괜찮다는 것)은 무엇이라고 생각하십니까?

감사합니다 !

편집 : 다음은 홈페이지 코드입니다. :)

  Widget build(BuildContext context) {
return Scaffold(
  body: Container(
    color: Theme.of(context).backgroundColor,
    child: SafeArea(
        child: Container(
          padding: EdgeInsets.all(30),
          child: Flex(
            direction: Axis.vertical,
            children: <Widget>[
            Flexible(
              flex: 2,
              child: BounceInDown(
                from: 10,
                child: Container(
                  alignment: Alignment.topLeft,
                  child: Container(
                    child: SvgPicture.asset(
                      'assets/svg/twiger-face.svg',
                      color: Theme.of(context).accentColor,
                      alignment: Alignment.topLeft,
                      width: 100,
                      height: 100
                    )
                  )
                ),
              ),
            ),
            Flexible(
              flex: 6,
              child: Column(
                children: <Widget>[
                  FadeInDown(
                    from: 10,
                    child: _createTitle(AppLocalizations.of(context).translate("home_title"))
                  ),
                  SizedBox(height: 15.0),
                  FadeInUp(
                    from:5,
                    child: _createForm()
                  ),
                  if(isValidTweet(textController.text))
                  _validTweetMessage(),
                  if(!isValidTweet(textController.text) && textController.text != '')
                  _invalidTweetMessage(),                      
                ]
              ),
            ),
            Flexible(
              flex: 0,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children:[
                  Container(
                    child: RawMaterialButton(
                      padding: EdgeInsets.all(10),
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(50.0)
                      ),
                      child: RichText(
                        text: TextSpan(
                          style: TextStyle(color: Theme.of(context).accentColor),
                          children: <TextSpan>[
                            TextSpan(text: AppLocalizations.of(context).translate("feedback_btn")), 
                            TextSpan(text: "Feedback", style: TextStyle(fontWeight: FontWeight.w700))
                          ]
                        ),
                      ),
                      onPressed: (){
                        _showFeedbackModal(context);
                      },
                    ),
                  ),
                  Container(
                    child: Row(
                      children: <Widget>[
                        BounceInDown(
                          from: 10,
                          child: _createPasteTweetBtn(context)
                        ),
                        SizedBox(width: 20),
                        BounceInDown(
                          from: 10,                   
                          child: _createSendTweetBtn(context, _formKey, textController)), 
                      ]
                    ),
                  ),
                ]
              ),
            )  
          ],),
        ),
      ),
  ),
);
}
Sanket Vekariya

BuildContext context와 함께 를 사용하여 MediaQuery현재 장치 화면 크기를 가져오고 해당 값에 따라 위젯 크기를 설정할 수 있습니다.
예를 들면 :

var width = MediaQuery.of(context).size.width  * 0.4; // set width to 40% of the screen width
var height = MediaQuery.of(context).size.height  * 0.4; // set height to 40% of the screen height

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

서명 캡처 스트로크 너비에 대한 화면 크기를 결정하는 가장 좋은 방법은 무엇입니까?

분류에서Dev

MVC의 특정 화면 크기에 버튼을 표시하는 가장 좋은 방법은 무엇입니까?

분류에서Dev

여러 이미지를 동시에 화면에 배치하는 가장 좋은 방법은 무엇입니까?

분류에서Dev

SQL Server 2008에서 쿼리 결과를 최적화하는 가장 좋은 방법은 무엇입니까?

분류에서Dev

이 시나리오에서 예외를 처리하는 가장 좋은 방법은 무엇입니까?

분류에서Dev

Laravel에서 빈 웅변 쿼리를 처리하는 가장 좋은 방법은 무엇입니까?

분류에서Dev

화면 가장자리 근처에서 자동 최대화 / 크기 조정 창 (에어로 스냅)을 비활성화하는 방법은 무엇입니까?

분류에서Dev

Windows를 높은 수준에서 자동화하는 가장 좋은 방법은 무엇입니까?

분류에서Dev

vuejs에서 Http Exception 오류 메시지를 처리하는 가장 좋은 방법은 무엇입니까?

분류에서Dev

Flask에서 웹훅 응답 시간 초과를 처리하는 가장 좋은 방법은 무엇입니까?

분류에서Dev

Spring Boot에서 예외를 처리하는 가장 좋은 방법은 무엇입니까?

분류에서Dev

Rails Form Objects에서 날짜를 처리하는 가장 좋은 방법은 무엇입니까?

분류에서Dev

C ++에서 대용량 데이터를 처리하는 가장 좋은 방법은 무엇입니까?

분류에서Dev

SqlServer에서 교착 상태를 처리하는 가장 좋은 방법은 무엇입니까?

분류에서Dev

CouchDB Map / Reduce JavaScript 함수에서 Eclipse 오류를 처리하는 가장 좋은 방법은 무엇입니까?

분류에서Dev

Rails 앱에서 자연어 처리를 수행하는 가장 좋은 방법은 무엇입니까?

분류에서Dev

C ++에서 "cold / never_inline"오류 처리 기술을 상용화하는 가장 좋은 방법은 무엇입니까?

분류에서Dev

Pandas에서 데이터를 그룹화하고 정렬하는 가장 좋은 방법은 무엇입니까?

분류에서Dev

JavaScript에서 객체를 단순화하는 가장 좋은 방법은 무엇입니까 (Jquery 사용)

분류에서Dev

ajax 양식에서 html 요소를 비활성화하는 가장 좋은 방법은 무엇입니까?

분류에서Dev

C #에서 기다리는 가장 좋은 방법은 무엇입니까?

분류에서Dev

Spring Batch에서 목록 목록을 평면화하는 가장 좋은 방법은 무엇입니까?

분류에서Dev

LCD 화면에서 고정 된 픽셀을 수정하는 가장 좋은 방법은 무엇입니까?

분류에서Dev

winforms c #에 문화 세계화를 사용하는 가장 좋은 방법은 무엇입니까?

분류에서Dev

CSS를 정규화하는 가장 좋은 방법은 무엇입니까?

분류에서Dev

파일을 VFAT 파티션에 동기화하는 가장 좋은 방법은 무엇입니까?

분류에서Dev

컴퓨터간에 Office 템플릿을 동기화하는 가장 좋은 방법은 무엇입니까?

분류에서Dev

하나가 다른 것에 의존하는이 두 가지 비동기 메서드를 처리하는 가장 좋은 방법은 무엇입니까?

분류에서Dev

Ember.js에서 체크 박스를 미리 설정하는 가장 좋은 방법은 무엇입니까?

Related 관련 기사

  1. 1

    서명 캡처 스트로크 너비에 대한 화면 크기를 결정하는 가장 좋은 방법은 무엇입니까?

  2. 2

    MVC의 특정 화면 크기에 버튼을 표시하는 가장 좋은 방법은 무엇입니까?

  3. 3

    여러 이미지를 동시에 화면에 배치하는 가장 좋은 방법은 무엇입니까?

  4. 4

    SQL Server 2008에서 쿼리 결과를 최적화하는 가장 좋은 방법은 무엇입니까?

  5. 5

    이 시나리오에서 예외를 처리하는 가장 좋은 방법은 무엇입니까?

  6. 6

    Laravel에서 빈 웅변 쿼리를 처리하는 가장 좋은 방법은 무엇입니까?

  7. 7

    화면 가장자리 근처에서 자동 최대화 / 크기 조정 창 (에어로 스냅)을 비활성화하는 방법은 무엇입니까?

  8. 8

    Windows를 높은 수준에서 자동화하는 가장 좋은 방법은 무엇입니까?

  9. 9

    vuejs에서 Http Exception 오류 메시지를 처리하는 가장 좋은 방법은 무엇입니까?

  10. 10

    Flask에서 웹훅 응답 시간 초과를 처리하는 가장 좋은 방법은 무엇입니까?

  11. 11

    Spring Boot에서 예외를 처리하는 가장 좋은 방법은 무엇입니까?

  12. 12

    Rails Form Objects에서 날짜를 처리하는 가장 좋은 방법은 무엇입니까?

  13. 13

    C ++에서 대용량 데이터를 처리하는 가장 좋은 방법은 무엇입니까?

  14. 14

    SqlServer에서 교착 상태를 처리하는 가장 좋은 방법은 무엇입니까?

  15. 15

    CouchDB Map / Reduce JavaScript 함수에서 Eclipse 오류를 처리하는 가장 좋은 방법은 무엇입니까?

  16. 16

    Rails 앱에서 자연어 처리를 수행하는 가장 좋은 방법은 무엇입니까?

  17. 17

    C ++에서 "cold / never_inline"오류 처리 기술을 상용화하는 가장 좋은 방법은 무엇입니까?

  18. 18

    Pandas에서 데이터를 그룹화하고 정렬하는 가장 좋은 방법은 무엇입니까?

  19. 19

    JavaScript에서 객체를 단순화하는 가장 좋은 방법은 무엇입니까 (Jquery 사용)

  20. 20

    ajax 양식에서 html 요소를 비활성화하는 가장 좋은 방법은 무엇입니까?

  21. 21

    C #에서 기다리는 가장 좋은 방법은 무엇입니까?

  22. 22

    Spring Batch에서 목록 목록을 평면화하는 가장 좋은 방법은 무엇입니까?

  23. 23

    LCD 화면에서 고정 된 픽셀을 수정하는 가장 좋은 방법은 무엇입니까?

  24. 24

    winforms c #에 문화 세계화를 사용하는 가장 좋은 방법은 무엇입니까?

  25. 25

    CSS를 정규화하는 가장 좋은 방법은 무엇입니까?

  26. 26

    파일을 VFAT 파티션에 동기화하는 가장 좋은 방법은 무엇입니까?

  27. 27

    컴퓨터간에 Office 템플릿을 동기화하는 가장 좋은 방법은 무엇입니까?

  28. 28

    하나가 다른 것에 의존하는이 두 가지 비동기 메서드를 처리하는 가장 좋은 방법은 무엇입니까?

  29. 29

    Ember.js에서 체크 박스를 미리 설정하는 가장 좋은 방법은 무엇입니까?

뜨겁다태그

보관