나는 첫 번째 프로젝트에서 일하고 있으며 장치 화면에 따라 위젯의 크기를 처리하는 방법에 의문이 있습니다.
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)),
]
),
),
]
),
)
],),
),
),
),
);
}
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] 삭제
몇 마디 만하겠습니다