Flutter uchun Yangi boshlanuvchilar

chegara : EdgeInsets.symmetric(vertikal: 10.0, gorizontal: 25.0), bola: to'ldirish(
bola: Ustun( bolalar: [
_itemHeader (yoqimlilik), Matn (favor.description),
_itemFooter (yoqimlilik)
],
),
to'ldirish: EdgeInsets.all(8.0),
),
);

Qachon biz gapirish haqida ro'yxati buyumlar, biz bo'ladi har doim kerak a kalit uchun the vidjet, da kamida qachon biz unga tegish hodisasini boshqarishni qo'shamiz. Buning sababi shundaki, Flutter-dagi ro'yxatlar aylantirish hodisalari paytida ko'plab elementlarni qayta ishlashlari mumkin va kalit qo'shish orqali biz ma'lum bir vidjetning u bilan bog'langan o'ziga xos holati borligini tasdiqlaymiz.

The yangi qismi Bu yerga hisoblanadi the marja mulk ning the Karta vidjet, qaysi qo'shadi a marja uchun vidjet. Bunday holda biz 10.0 ni qo'shamiz yuqori va pastki uchun dip va 25,0 chap va o'ng uchun. Uning tanasi bola uch qismga bo'lingan:

Birinchidan, U yerda hisoblanadi the sarlavha, qaysi ko'rsatadi the do'st bu ega qilingan the yaxshilik _itemHeader() da aniqlangan so'rov funktsiyasi:

Qator _itemHeader(Favor yaxshilik) { qaytish Qator(

bolalar: [
CircleAvatar (
fon rasmi: Tarmoq tasviri ( yaxshilik.friend.photoURL,
),
),
Kengaytirilgan(
bola: to'ldirish(
to'ldirish: EdgeInsets.only(chapda: 8.0),
bola: Matn("${favor.friend.name} so'radi siz uchun... ")),
)
],
);
}

The sarlavha hisoblanadi belgilangan kabi a Qator > [CircleAvatar, Kengaytirilgan] pastki daraxt. Bu qator bilan boshlanadi ta'rif ( Ustun kabi ishlaydi vidjet, lekin gorizontal o'qda) bu ega CircleAvatar _ Masalan, aylana tasviri foydalanuvchini ifodalaydi. Bu yerda, bizda ... bor ishlatilgan Tarmoq tasviri provayder; shunchaki o'tib ketamiz rasm URL manzili va biz uchun yuklashiga ruxsat bering. Qatorning qolgan maydoni vidjet matn tomonidan ishlatiladi bir oz Padding bilan unda do'st nomi ko'rsatilgan.

Ikkinchidan, U yerda hisoblanadi the mazmuni, qaysi hisoblanadi shunchaki a Matn vidjet bilan the yaxshi tavsif .
Nihoyat, U yerda hisoblanadi the altbilgi, qaysi o'z ichiga oladi the mavjud harakatlar uchun the _itemFooter() da belgilangan imtiyozlar toifasiga qarab imtiyoz so'rovi funktsiyasi:

Vidjet _itemFooter(Favor yaxshilik) { agar (favor.isCompleted) {

final format = DateFormat(); qaytish Idish(
chegara: EdgeInsets.only(yuqori: 8.0), tekislash: Alignment.centerRight, bola: Chip(

yorliq: Matn ("Tugallandi da:

${format.format(favor.completed)}"),
),
);
}
agar (favor.isRequested) { qaytish Qator(
mainAxisAlignment: MainAxisAlignment.end, bolalar: [
Yassi tugma(
bola: Matn ("Rad etish"), bosilgan: () {},
),
Yassi tugma(
bola: Matn ("Bajar"),
bosilgan: () {},
)
],
);
}
agar (favor.isDoing) { qaytish Qator(
mainAxisAlignment: MainAxisAlignment.end, bolalar: [
Yassi tugma(
bola: Matn("ber yuqoriga"), bosilgan: () {},
),
Yassi tugma(
bola: Matn("to'liq"), bosilgan: () {},
)
],
);
}

qaytish Idish();

}

The _itemFooter() funktsiyasi qaytadi a vidjet qarab yoqilgan the yaxshilik holat. Afzallik holatlari oluvchilar tomonidan belgilanadi marhamatda _ sinf:

So'rov bosqichida (yaxshilik hali qabul qilinmagan yoki rad etilmagan), biz qaytamiz a Qator vidjet bilan ikki material Yassi tugma holatlar yoqilgan bu bilan tegishli mavjud harakatlar, rad etish yoki bajarish. Yassi tugma balandligi yoki fon rangi bo'lmagan Material Design tugmasi.
Uchun the qilmoq faza, biz qaytish a Qator vidjet bilan rad etilgan yoki FlatButtons sifatida amallarni bajaring .
Uchun the yakunlandi holat, biz ko'rsatish the yakunlandi sana va vaqt DateFormat yordamida formatlangan Chip ichidagi Dartdan sinf matnning qolgan qismidan farqlash uchun vidjet.
etilgan holatda biz konteynerni qaytaramiz hech qanday o'lchamdagi cheklovlarsiz vidjet; bu hisoblanadi a bo'sh idish (bu qiladi emas olish yuqoriga bo'sh joy yoqilgan tartib) .

Sifatida biz bor ko'rgan ichida the yaxshilik ro'yxatlar amalga oshirish, U yerda bor har xil vidjetlar bastalash tartib. E'tibor bering, biz bu erda hech qanday foydalanuvchi harakatini bajarmayapmiz; Bularning barchasini keyingi bobda tekshiramiz. Keling, so'rovni yoqtirish ekranini ko'rib chiqaylik.

The iltimos yoqadigan ekran

So'rovni yoqtirish ekrani foydalanuvchi va ilova o'zaro aloqasi sodir bo'ladigan joy bo'ladi. Hozircha biz faqat ushbu ekranning tartibini ko'rib chiqamiz. Kitob davom etar ekan, biz unga qo'shilamiz dona uchun tanlang the do'st uchun so'rang the iltifot, va shuningdek saqlang the yaxshilik uchun the Firebase masofaviy ma'lumotlar bazasi:

The iltimos yaxshilik ekran vidjet shuningdek o'z ichiga oladi a Material Dizayn Iskala vidjet bilan bu safar amallarni o'z ichiga olgan ilova paneli. Iskala tanasi vidjet so'rovni yaratish uchun foydalanuvchi tomonidan kiritilgan ma'lumotlarga ega bo'lgan maydonlarni o'z ichiga oladi.

The tartib kod

The RequestFavorPage vidjet hisoblanadi shuningdek fuqaroligi bo'lmagan to'g'ri hozir kabi biz g'amxo'rlik faqat haqida uning hozirda tartib :

sinf RequestFavorPage uzaytiradi davlatsiz vidjet { final Ro'yxat do'stlar;

RequestFavorPage({Key kalit, bu.do'stlar}) : super(kalit: kalit);

@override
Vidjet qurish (BuildContext kontekst) {...} // uchun qisqa
}

Sifatida siz mumkin qarang, the faqat narsa ichida the vidjet tavsifi hisoblanadi the do'stlar ro'yxat, qaysi kerak ota-ona vidjeti tomonidan taqdim etilishi mumkin, chunki bu davlatsiz vidjet misol hozir.

The qurmoq() usuli ning the vidjet boshlanadi quyidagicha :

@override
Vidjet qurish (BuildContext kontekst) { qaytish Iskala(
appBar: AppBar(
sarlavha: Matn ("So'rov a marhamat"), yetakchi: CloseButton(),
harakatlar: [ Yassi tugma(
bola: Matn("SAQLASH"), matn rangi: Ranglar.oq, bosilgan: ()
{}),
],
),
tanasi: ... // davom etadi quyida
...

appBar Bu yerga o'z ichiga oladi ikki yangi xususiyatlari:

The yetakchi mulk, qaysi hisoblanadi a vidjet ko'rsatilgan oldin the sarlavha. In bu Bunday holda, biz CloseButton tugmasidan foydalanamiz material Navigator bilan birlashtirilgan tugma bo'lgan vidjet vidjet (bu haqda batafsil bobda 7 , Marshrutlash: Ekranlar orasida navigatsiya ).
The harakatlar mulk, qaysi oladi a ro'yxati ning vidjetlar uchun ko'rsatish keyin the sarlavha; bu holda biz FlatButtonni ko'rsatamiz misol, uning yordamida biz yaxshilik so'rovini saqlaymiz.
Tana _ iskala _ Ustundagi tartibni belgilaydi vidjet. U ikkita yangi xususiyatni o'z ichiga oladi: the birinchi hisoblanadi mainAxisSize , qaysi belgilaydi the hajmi ichida the vertikal eksa; Bu yerga biz MainAxisSize.min dan foydalanamiz shuning uchun u faqat kerakli darajada joy egallaydi. Ikkinchisi
hisoblanadi crossAxisAlignment , qaysi belgilaydi qayerda uchun tekislash the bolalar ichida the gorizontal o'qi. Odatiy bo'lib, Ustun bolalarni gorizontal ravishda markazda tekislaydi. Ushbu xususiyatdan foydalanib, biz ushbu xatti-harakatni o'zgartirishimiz mumkin. Ustunda uchta asosiy vidjet mavjud u foydalanuvchi ma'lumotlarini oladi:


A DropdownButtonFormField vidjet bu ro'yxatlar the DropdownMenuItem bosilganda qalqib chiquvchi oynadagi vidjet elementlari:


...
DropdownButtonFormField( elementlar: do'stlar
.map(
(f) => DropdownMenuItem( bola: Matn (f.name),
),
)
.toList(),
),
...

Bu yerda, biz foydalanish the map() usuli dan the Dart Takrorlash mumkin turi, qayerda ro'yxatdagi har bir element (do'stlar, bu holda) yangi DropdownMenuItem bilan taqqoslanadi vidjet. Shunday qilib, do'stlar ro'yxatidagi har bir element ochiladigan ro'yxatda vidjet elementi sifatida ko'rsatiladi.

A TextFormField vidjet bu imkon beradi the kiritish ning matn tomonidan yozish yoqilgan klaviatura :


TextFormField( maxLines: 5,
kirish formatlari: [LengthLimitingTextInputFormatter(200)],
),

TextFormField _ vidjet matn kiritish imkonini beradi. InputFormatters qo'shish orqali unga, biz mumkin sozlash Qanday bu ko'rinadi yoqilgan the ekran. Bu yerda biz shunchaki chegara the jami yozilgan matn uzunligi 200 gacha LengthLimitingTextInputFormatter yordamida belgilar tomonidan taqdim etilgan sinf

the chayqalish/xizmatlar kutubxona.



A DateTimePickerFormField vidjet bu imkon beradi the foydalanuvchi uchun tanlang a
DateTime misol va xaritalar bu uchun a DateTime Dart turi:


DateTimePickerFormField( kirish turi: InputType.both,
format: Sana formati ("EEEE, MMMM d, yyyy 'da' h: mma"), tahrirlanishi mumkin: yolg'on,
bezatish: Kirish dekoratsiyasi(
labelText: "Sana/vaqt", hasFloatingPlaceholder: yolg'on), onChanged: (dt) {},
),

DateTimePickerFormField _ vidjet Flutter’dan o‘rnatilgan vidjet emas. Bu uchinchi tomon plagin dan the datetime_picker_formfield kutubxona. Bu yerda, biz aniqlash ko'rinishini o'zgartirish uchun ba'zi xususiyatlar:

kirish turi : Xoh uchun tanlang sana, vaqt, yoki ikkalasi.
format : A Sana formati Dart turi uchun aniqlash the ip vakillik format qiymatidan.
tahrirlanishi mumkin : vidjet foydalanuvchi tomonidan qo‘lda tahrirlanishi mumkinmi yoki yo‘qmi. bezatish : Ishlatilgan uchun aniqlash a bezatish uchun the kiritish maydon ichida a Material Dizayn usuli. E'tibor bering, biz uni boshqa kiritish maydonlari uchun aniqlamadik.
onChanged : Qayta qo'ng'iroq qilish chaqirdi bilan the yangi qiymat tanlangan tomonidan foydalanuvchi .

Bundan tashqari the kiritish dalalar, U yerda bor shuningdek biroz Idish va Matn vidjetlar ichida the Ustun ekranni formatlash va loyihalashda yordam berish uchun. To'liq tartib kodi uchun bobning manba kodini ko'rib chiqing .