Flutter uchun Yangi boshlanuvchilar

Amalda mavzulashtirish

Flutter-da vidjetlarni uslublash bir necha usul bilan amalga oshirilishi mumkin va uslublar bilan bog'liq hamma narsa asoslanadi yoqilgan a Mavzu vidjet. Bu hisoblanadi vaqt uchun tekshirish tashqariga Qanday bu ishlaydi. Keling demoq, uchun misol, Bizda quyidagi oddiy ilova bor:

sinf MyAppDefaultTheme uzaytiradi Davlatsiz vidjet { @override

Vidjet qurish (BuildContext kontekst) { qaytish Idish(
rang: Ranglar.qizil, bola: markaz(
bola: Matn( "Oddiy Matn",
matn yo'nalishi: TextDirection.ltr,
),
),
);
}
}

Sifatida siz mumkin qarang, biz bor shunchaki foydalanish a Idish vidjet kabi bizning ildiz vidjet holda

a Mavzu vidjet. Shunday qilib, biz mumkin faraz qilmoq biz qil emas bor har qanday uslublar qo'llaniladi uchun uning avlod vidjetlari. Shuningdek, textDirection mulk bu nuqtada yangi. Foydalanishda
the Material ilovasi vidjet ichida bizning tartib, bu beradi a sukut bo'yicha textDirect qiymat biz uchun bilvosita. Keyingi bo'limda bu haqda ko'proq.
Biz mumkin, uchun misol, foydalanish the Mavzu vidjet uchun o'zgartirish the uslub ning a Matn vidjet. ThemeData _ sinfda textTheme mavjud matnni o'z ichiga olgan xususiyat Materiallar dizayni bo'yicha ko'rsatmalarga muvofiq uslub konfiguratsiyasi:


Matn(
"Oddiy Matn",
matn yo'nalishi: TextDirection.ltr,
uslub: Theme.of(kontekst).textTheme.display1,
),

Uslub _ Matnning mulki vidjet TextStyle ni qabul qiladi dan olishimiz mumkin bo'lgan qiymat Mavzu vidjet. Biroq, kabi siz mumkin esda tuting, biz bor emas belgilangan a Mavzu ilova daraxtimizdagi vidjet. Oldingi misolda bu ishlaydi, chunki Theme.of usuli ThemeData ni qaytaradi vidjetni qayta tiklash, agar bittasi aniqlanmagan bo'lsa. Agar siz kodni bajarsangiz, Matnni ko'rasiz vidjet sukut bo‘yicha kattaroq shrift o‘lchamida ko‘rsatiladi, chunki biz displey1 dan foydalanmoqdamiz Material Design-dan uslub.

Biz mumkin shuningdek moslashtirish the uslublash; mana misol :

sinf MyAppCustomTheme uzaytiradi Davlatsiz vidjet { @override

Vidjet qurish (BuildContext kontekst) { qaytish Idish(
rang: Ranglar.ko'k, bola: markaz(
bola: Mavzu(
ma'lumotlar: Theme.of(context).copyWith(