Flutter භාවිතයෙන් ලොගින් පේජ් එකක් නිර්මාණය කරන විට, කීබෝර්ඩ් පෙන්වන විට බොත්තම තිරයේ පහළින් වැටී යාමක් සාමාන්ය ගැටලුවක්. බිබේක් පණ්ඩා විසින් ලියූ මෙම ලිපියෙහි, එම ගැටලුවට සරල නමුත් ප්රභාවශාලී හඳුන්වා දෙන ආකාරයක් – RenderShiftedBox භාවිතයෙන් කීබෝර්ඩ් උච්චතමය සමඟ UI එක ‘ශ්වාස’ ගත කිරීමයි.
පළමුව, resizeToAvoidBottomInset: false සකස් කර Scaffold එකේ ස්වයංක්රීය පරිමාණ වෙනස් කිරීම අක්රිය කරයි. පසුව, View.of(context).viewInsets.bottom මඟින් කීබෝර්ඩ් උච්චතමය ලබා ගනිමින්, didChangeMetrics මෙහෙයුම තුළ ඒ අගය devicePixelRatio සමඟ බෙදා, බොත්තමට අවශ්ය පඩය (padding) එකතු කරයි.
ඉන්පසු, RenderShiftedBox එක භාවිතා කර, රූපය (hero illustration) කීබෝර්ඩ් උච්චතමය පමණක් ඉහලට ගෙන යාමට හැකි වේ. කීබෝර්ඩ් වැසෙන විට UI මුල් තත්ත්වයට ආපසු පැමිණේ, ඒ නිසා පේජ් එක ‘ඉස්සරහට’ ගමන් කරන විදියකට හැඩගැන්වී ඇත.
මෙම විසඳුම 20 පේළි කේතයක් පමණක් අඩංගු වන අතර, GitHub රෙපොසිටරියක සම්පූර්ණ උදාහරණයක්ද සපයා ඇත. ලේඛකයා පළමු උත්සාහයන් ලෙස resizeToAvoidBottomInset සහ AnimatedSize භාවිතා කරමින් අසාර්ථක වූ අත්දැකීම් බෙදා ගනී. ඒවාෙන් ඉගෙන ගත් පාඩම්, Flutter හි layout engine එකේ පසුබැසීමේ ක්රමවේදයන් පිළිබඳ වඩාත් ගැඹුරු අවබෝධයක් ලබා දේ.
ශ්රී ලංකාවට ඇති වැදගත්කම
- ශ්රී ලාංකීය සංවර්ධකයින්ට කීබෝර්ඩ්‑අනුගත UI සැලසුම් ඉතා පහසුවෙන් ක්රියාත්මක කිරීමේ නව තාක්ෂණයක් ලැබේ.
- ඉගෙනීමේ ආකාරය සරල වීම නිසා, විශ්වවිද්යාල සහ පුහුණු පාඨමාලාවල Flutter පාඨමාලා අඩු කාලයක් තුළ ප්රායෝගික උදාහරණයක් ලෙස භාවිතා කළ හැක.
- ව්යාපාරික යෙදුම්වල පරිශීලක අත්දැකීම් (UX) වැඩිදියුණු කර, දේශීය ඇප් වෙළඳපලේ තරඟශීලීත්වය ඉහළ ගනී.
ඉදිරියේදී, මේ වැනි කුඩා නවෝත්පාදන තාක්ෂණික ගැටළු විසඳීම, ශ්රී ලංකාවේ මොබයිල් ඇප් සංවර්ධනයේ ගුණාත්මක මට්ටම උසස් කරනු ඇත. ඔබත් Flutter සමඟ ඔබේ ඇප් එකේ UI එක ‘ශ්වාස’ ගත කර ගැනීමට කැමති නම්, මෙය අත්හදා බලන්න.
අවසන් වශයෙන්, Flutter ද්රව්යමය UI අඩවියක් ලෙස පවතින අතර, එහි සංකීර්ණ layout ගැටළු සරල code snippet එකකින් විසඳා ගැනීමට හැකියාව ඇති බව තහවුරු කරයි.
