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

Comet Digital Agency Laos / Innovation  / Ideas  / UI Challenge — ສ້າງ App ຈາກຮູບພາບ ໂດຍໃຊ້ Flutter

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

ສະບາຍດີ ຕາມຫົວຂໍ້ເລີຍ ມື້ນີ້ເຮົາຊິມາຂຽນ 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

via GIPHY

ຈະເຫັນວ່າ 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

Widget DetailCard

ໃນໜ້ານີ້ ເຂົ້າມາເຮົາຈະໃຊ້ ຕາມລໍາດັບນອກເຂົ້າໃນ ຂອງ Widget ຕາມນີ້ເດີ້

Align : ເພື່ອກໍານົດໃຫ້ມັນຢູ່ທາງລຸ່ມ,

ClipRRect : ເພື່ອກໍານົດໃຫ້ຂອງທາງເທິງຂອງມັນເປັນວົງມົນ,

Container : ເພື່ອກໍານົດຄວາມສູງເປັນ MediaQuery.of(context).size.height / 1.5 ປະມານ 2 ໃນ 3 ຂອງຈໍ,

Column : ເພື່ອຈັດຮູບແບບແຕ່ເທິງລົງລຸ່ມ

ຈາກນັ້ນທາງໃນກໍຈະເປັນພວກ Text, Divider, icon ທົ່ວໄປ ແລະ ໃຊ້ LinearPercentIndicator ຈາກ package percent_indicator ເພື່ອສະແດງເປີເຊັນເປັນເສັ້ນ ຄືເກົ່າ

ສ່ວນທາງລຸ່ມ

ສ່ວນນີ້ແມ່ນເຮົາໃຊ້

DefaultTabController ເປັນໂຕເຮັດໃຫ້ມັນເລື່ອນໄປຊ້າຍຂວາໄດ້ ວິດີໂອສອນໃຊ້.

ແລະຂໍ້ມູນທາງໃນTab ກໍຈະເປັນ Text ປົກກະຕິ

Widget SupportButton

Code

ໃນສ່ວນນີ້ ໃຊ້ Column ເພື່ອແບ່ງເປັນສອງສ່ວນ ສ່ວນເສັ້ນສີດໍາບາງໆ ກັບສ່ວນຂອງປຸ່ມ

ເສັ້ນສີດໍາແມ່ນໃຊ້ Divider

ສ່ວນປຸ່ມແມ່ນ :

Padding : ເພື່ອໃຫ້ມັນບໍ່ຕິດຂອບ,

Container : ເພື່ອຂະຫຍາຍຂະໜາດຕາມລວງກວ້າງ,

FlatButton :ສ້າງປຸ່ມແລະກໍານົດ shape ໃຫ້ມັນໂຄ້ງປະມານ 30.0

ທີເຫຼືອກໍແມ່ນ Text ປັບຂະໜາດແລະສີຕາມຮູບ

Widget HeaderButton

Code

ສ່ວນນີ້ກໍບໍ່ມີຫຍັງຫຼາຍ ໃຊ້ AppBar ເພື່ອກໍານົດ Action (ປຸ່ມທາງຂວາ) ເປັນປຸ່ມເປັນທຶກ ແລະ leading (ປຸ່ມທາງຊ້າຍ) ເປັນປຸ່ມຍ້ອນກັບ

Widget PlayButton

Code

Widget ຫຼັກໆແມ່ນເຮົາໃຊ້

Align : ເພື່ອກໍານົດໃຫ້ມັນຢູ່ທາງກາງ ເບື້ອງເທິງ

Padding : ເພື່ອປັບໃຫ້ມັນມາຢູ່ທາງກາງຮູບ

RawMaterialButton : ເພື່ອເຮັດປຸ່ມ ແລ້ວໃສ່ສີພື້ນຫຼັງແລະສີ Icon ຕາມຮູບ

ສໍາເລັດ

Code ທັງໝົດເບິ່ງໄດ້ທີ່

source code https://github.com/cometdigital/ui_challenge

ໂດຍ: Xokthilat Oudomdy — Mobile Developer at Comet Digital Agency

No Comments
Post a Comment