UI Challenge — ສ້າງ App ຈາກຮູບພາບ ໂດຍໃຊ້ Flutter

4 min readFeb 28, 2020

ສະບາຍດີ ຕາມຫົວຂໍ້ເລີຍ ມື້ນີ້ເຮົາຊິມາຂຽນ App ຈາກຮູບພາບ ໂດຍໃຊ້ Flutter ເປັນເຄື່ອງມື

ສໍາລັບໃຜທີ່ງົງໆ ເຮົາຕ້ອງສ້າງ App ຈາກຮູບພາບແມ່ນຫຍັງ?

ກ່ອນອື່ນ ສໍາລັບຕັ້ງແຕ່ນັກພັດທະນາ App ທໍາມະດາທົ່ວໄປ ຈົນຮອດມືອາຊີບ ສ່ວນໃຫຍ່ແມ່ນຂຽນ App ຂື້ນຈາກ Design ທີ່ UI Designer ເປັນຜູ້ອອກແບບ ເຊິ່ງໃຊ້ພວກເຄື່ອງມື Adobe XD, Figma ໆລໆ ເພື່ອໃຫ້ App ທີ່ເຮົາຂຽນອອກມາເປັນຕາເບີ່ງ .

ແລະ ໃນບົດຄວາມນີ້ເຮົາຊິມາສ້າງ App ໂດຍທີ່ບໍ່ມີ UI Designer, ແລະ ເຮັດແນວໃດໃຫ້ມັນງາມລະບາດນິ? ຄໍາຕອບແມ່ນ ຕາມຊື່ຫົວຂໍ້ເຮົາເລີຍ, ເຊິ່ງເຮົາຫາຮູບ App ທີ່ເຂົາເຈົ້າອອກແບບແລ້ວງາມໆມາຈາກ Dribbble ຫຼື Pinterest ຫຼື Google ຕາມແຕ່ຄົນມັກຈາກນັ້ນມາເລີ່ມລົງມື ສ້າງຈາກຮູບທີ່ເຮົາເຫັນ

ມາເລີ່ມກັນເລີຍ

Step 1 : ຫາຮູບ

ຂອບໃຈທີ່ມາ ຂອງ Design https://dribbble.com/shots/8712974-Crowdfunding-App

ໃນບົດຄວາມນີ້ ເຮົາຊິເອົາຮູບນີ້ ເປັນແບບ ເພື່ອບໍ່ຍາກ ແລະ ບໍ່ງ່າຍຈົນເກີນໄປ

Step 2 : ຂຽນ Code

Step 3 : ສໍາເລັດ

ມາອະທິບາຍ Code ບາດນິ

ເບີ່ງຄືງ່າຍໆ ທີ່ຈິງກະບໍ່ຍາກ (?)

ເຂົ້າມາເຮົາຈະສັງເກດວ່າມັນມີສອງໜ້າ ໜ້າຫຼັກ ກັບ ໜ້າລາຍລະອຽດ ເຊິ່ງຊິເອີ້ນວ່າໜ້າ Home ກັບ Detail ຕາມລໍາດັບ

ໜ້າ Home

ເລີ່ມຈາກສ່ວນຫົວຂອງ ໜ້າ Home ກັນເລີຍ

ໂດຍສ່ວນນີ້ ເຮົາຈະໃຊ້ Widget ທີ່ຊື່ Scaffold ແລ້ວໃຊ້ AppBar ທົ່ວໄປ ເຊິ່ງ ໃຊ້parameter leading ເພື່ອ ໄວ້ກັບ Icon ທາງ ຊ້າຍ ແລະ Action ເພື່ອໄວ້ເກັບ Icon ທາງຂວາ

ເຊິ່ງ Code ໜ້າຕາປະມານນີ້

ຕໍ່ມາເຮົາຈະໃຊ້ Column ແບ່ງສ່ວນທີ່ເຫຼືອອອກເປັນ 4 ສ່ວນ ຕາມຮູບ

ແລະ Code

ຈາກ Code ທາງເທິງເຮົາຈະເຫັນວ່າ ມີ 4 Widget ຄື Wallet, Category, Sliderm, Investment ທີ່ຢູ່ໃນ Column ເຊິ່ງ ແຕ່ລະ Widget ແມ່ນແທນໃຫ້ແຕ່ລະຫ້ອງສີແດງຈາກ Screenshot ທາງເທິງ ແລະ ໃຊ້ການສະແດງຜົນ ຂອງ Column ແບບ spaceBetween ເພື່ອໃຫ້ມັນຂະຫຍາຍຈົນເຕັມຈໍ

Widget Wallet

ແລະ Code

ຈະສັງເກດວ່າໃນ Widget ນີ້ແມ່ນມີ Column ອີກອັນໜຶ່ງ ຍ້ອນໂຕໜັງສືມີສອງແຖວນັ້ນເອງ ແລະ ໃຊ້ Widget Container + BoxDecoration ເພື່ອສ້າງເມັດນ້ອຍໆສີຟ້າ ທາງໜ້າຈໍານວນເງິນ,

ໃຊ້ Widget Chip ເພື່ອສ້າງໂຕໜັງສືທີ່ມີສີຟ້າອ້ອມຮອບ ກໍຄື +2.54 ETH ກາຍນັ້ນກໍໃຊ້ Text ທໍາມະດາປັບແຕ່ງ Style ຕາມໃນຮູບ

Widget Category

code

ງ່າຍໆບ່ອນນີ້ບໍ່ ຊັບຊ້ອນ ມີແຕ່ໃຊ້ Row ທີ່ມີຄ່າການສະແດງຜົນເປັນ spaceBetween ມາ ແລ້ວໃຊ້Text ເປັນໂຕໜາທາງໃນ ປັບຂະໜາດໂຕອັກສອນຕາມຮູບ

Widget Slider

ພາບເຄື່ອນໄຫວ ຕອນກົດໃສ່ Slider

ຈະເຫັນວ່າ Animation ທີ່ເຮັດໃຫ້ຮູບ ມັນເປັນຮູບເກົ່າທັງສອງໜ້າ ແມ່ນໃຊ້ Widget ທີ່ຊື່ Hero ແຕ່ສໍາຄັນແມ່ນ id ຂອງ Hero ຈະຕ້ອງກົງກັນກັບໃນໜ້າ Detail ທີ່ເຮົາຈະເຮັດຕໍ່ໄປ

ແລະ ຕາມຮູບມັນສາມາດເລື່ອນໄປມາໄດ້ ເຊິ່ງເຮົາໃຊ້ Widget CarouselSlider ເພື່ອມາເຮັດໜ້າທີ່ນີ້ ສ່ວນ ເສັ້ນສີຟ້າທີ່ສະແດງ ເປີເຊັນ ແມ່ນໃຊ້ Widget ຊື່ LinearPercentIndicator ຈາກ package percent_indicator ສ່ວນທີ່ເຫຼືອກໍຈະເປັນ Text, Icon , Image ແລະ ໃຊ້ Column ແລະ Row ເພື່ອຈັດລະບຽບຖັນແຖວແບບທີ່ເຮັດມາທາງເທິງ, GestureDetector ເພື່ອກວດຈັບເວລາກົດໃຫ້ເປີດໜ້າ Detail.

Widget Investment

Code

ສ່ວນນີ້ແມ່ນ ໃຊ້ Row ແບ່ງແບບ spaceBetween ເປັນສອງ ຄື Text “Your investment ” ກັບ ປຸ່ມ ເລກ 3 ໃຊ້ RawMaterialButton ແລ້ວໃສ່ Text ທາງໃນ

ແລ້ວກໍຈະໄດ້

ໜ້າ Detail

ໃນໜ້ານີ້ ຮູບແລະ card ທາງລຸ່ມມັນຊ້ອນກັນຢູ່ ເຊິ່ງແປວ່າແທນທີ່ເຮົາຈະໃຊ້ Column ແບບໜ້າ Home ເຮົາຈະມາໃຊ້ Stack ແທນ

Code

ໃນ Stack ມີ 5 Widget ຢູ່ໃນຫັ້ນ ຄື

HeroImage : ເກັບຮູບ.

DetailCard : ກາດສີຂາວທີ່ມີ ຂໍ້ມູນລາຍລະອຽດ.

SupportButton : ປຸ່ມ Support the project ສີຟ້າ ທາງລຸ່ມ.

HeaderButton : ປຸ່ມຍ້ອນກັບແລະປຸ່ມບັນທຶກ ທາງເທິງ ຊ້າຍແລະ ຂວາ.

PlayButton : ປຸ່ມຫຼີ້ນ ທາງກາງຂອງຮູບ.

Widget HeroImage

Code

ໃຊ້ Widget Hero ແລະ Imageຢູ່ທາງໃນ ບໍ່ຊັບຊ້ອນຫຼາຍ ແຕ່ທີ່ຄວນລະວັງແມ່ນ tag ເຊິ່ງ id ຕ້ອງເປັນ id ດຽວກັບ id ຂອງ Hero ຢູ່ໜ້າHome ທີ່ເຮົາສ້າງກີ້ນີ້ບໍ່ຊັ້ນມັນຈະ Error