Katika Flutter, Text Widget ni kipengele kinachotumiwa kuonyesha maandishi kwenye programu. Kwa kawaida, hutumiwa kama sehemu ya muundo wa UI ya programu za Flutter.
Property za Text:
data: Hii ni moja ya property muhimu sana ya Text Widget. Ni string ya maandishi ambayo unataka kuonyesha.
style: Hii ni property inayowezesha kuweka staili ya maandishi kama vile ukubwa wa fonti, mstari wa juu, rangi, nk. Inatumia TextStyle ambayo inaweza kubadilishwa kwa kutumia propertyzake kama vile fontSize, color, fontWeight, nk.
textAlign: Inaruhusu kuweka mwelekeo wa maandishi kama vile kushoto, kulia, au katikati.
textDirection: Inaruhusu kuweka mwelekeo wa maandishi kama vile kutoka kushoto kwenda kulia (LTR) au kutoka kulia kwenda kushoto (RTL).
maxLines: Inaruhusu kudhibiti idadi ya mistari ya maandishi ambayo inaweza kuonyeshwa. Kwa mfano, kama maxLines ni 1, maandishi yatakuwa katika mstari mmoja tu.
overflow: Huamua jinsi ya kuthibiti maandishi ikiwa yanazidi ukubwa wa kontena yake. Kwa mfano, unaweza kuweka TextOverflow.ellipsis ili kuonyesha alama ya ellipsis (...) mwishoni mwa maandishi yaliyokatwa.
Hizi ni baadhi tu ya propertyza kawaida za Text Widget. Kuna propertyzaidi ambazo unaweza kuchunguza kulingana na mahitaji yako ya programu. Uwezo wa kubadilika na kutengeneza maandishi kulingana na mahitaji yako ndio huifanya Text Widget kuwa chaguo la kawaida kwa kuonyesha maandishi katika programu zilizojengwa kwa kutumia Flutter.
Mifano:
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Bongoclass'),
centerTitle: true,
backgroundColor: Colors.blue,
),
body: const Center(
child: Text(
'Mafunzo ya flutter',
style: TextStyle(fontSize: 24.0),
),
),
),
);
}
}
Jinsi ya kutumia property za Text:
Kanunu ni zile zile tulizokuwa tukitumia awali, ila tu cha kukumbusha zaidi ku kuwa property zote zinatakiwa ziwe ndani ya widget ya text. Ia hizo text tulizoweka ndio huitwa Data. mfano hao mafunzo ya flutter hapo huitwa data. Sasa wacha tune jinsi ya kuziweka property nyinginezo:-
Style property:
Sasa ili uweze kupanglia vyema text zako ni vyem ukatambuwa jinsi ya kuitumia style kwenye text. Hapa nitakuletea baadhi ya properties za style.
Hapa kuna maelezo ya mali muhimu za darasa la TextStyle katika Flutter kwa Kiswahili:
1. color: Inaamua rangi ya maandishi.
2. fontSize: Inaweka ukubwa wa maandishi.
3.fontWeight: Inataja uzito wa herufi, kama vile kawaida, bold, au extra bold.
4.fontStyle: Inaamua mtindo wa herufi, kama vile kawaida, italiki, au oblique.
5.letterSpacing: Inaweka nafasi kati ya kila herufi katika maandishi.
6. wordSpacing: Inaweka nafasi kati ya kila neno katika maandishi.
7.lineHeight: Inaweka urefu wa kila mstari wa maandishi.
8.decoration: Huongeza mapambo kwenye maandishi, kama vile chini, juu au kati.
9.decorationColor: Inataja rangi ya mapambo yanayotumika kwenye maandishi.
10.decorationStyle: Inataja mtindo wa mapambo, kama vile imara, mstari uliovunjika, au mstari wa mabano.
11.decorationThickness: Inaweka unene wa mstari wa mapambo.
12.fontFamily: Inaamua familia ya fonti itakayotumika kwa maandishi.
13.background: Inaweka rangi ya nyuma ya maandishi.
14.foreground: Inaweka rangi ya mbele ya maandishi.
Hizi ni baadhi ya mali muhimu zaidi za darasa la TextStyle. Unaweza kutumia mali hizi pamoja ili kupata muonekano unaotaka wa maandishi katika programu yako ya Flutter.
Mfano:
style: TextStyle(
fontSize: 24.0,
fontWeight: FontWeight.bold, // Making the text bold
letterSpacing: 1.5, // Adding letter spacing
color: Colors.green, // Changing the text color
decoration: TextDecoration.underline
),
Jins ya ku scrol text:
Sasa tuchukulie mfano text ni nyingi. Wacha tuweke habari hapa ili tuweze kuifanyia kazi:
Hapo zamani za kale, kulikuwa na sungura na kobe wawili ambao walikuwa marafiki wakubwa lakini pia washindani sana. Kila mara walipokutana, walizozana kuhusu ni nani mwenye kasi zaidi.
Sungura alikuwa mwerevu sana na alijua kuwa kobe alikuwa na miguu mikubwa na polepole, hivyo akaona fursa ya kumchokoza. Akamwambia kobe, "Hebu tufanye mbio, tujue ni nani mwenye kasi zaidi kati yetu!"
Kobe, ambaye hakuwa na haraka sana, alijibu kwa kujiamini, "Sawa, tutafanya mbio. Lakini ujue, si kila kitu ni kuhusu kasi. Kuna hekima pia."
Wakakubaliana kuwa mbio zitafanyika siku ya pili. Sungura alikuwa na mpango wake.
Siku iliyofuata, wote wawili walikusanyika kwenye mstari wa kuanzia wa mbio. Sungura alimwambia kobe, "Kwa kuwa unaonekana mzito, nitakupa kichwa kuanzia. Hii itakusaidia kuanza mapema."
Kobe alishukuru na kujisikia vizuri kwa heshima aliyopewa na rafiki yake. Mbio zilianza na sungura aliondoka kwa kasi sana. Kobe alijua hawezi kufikia kasi yake, lakini alikimbia kadiri alivyoweza.
Kwanza jifunze kupaga hizo text:
Hizo text kwanza utaziweka kwenye code zako, kwa kutumia lama ya Kila unaporuka mstari. Hivyo zitaonekana hivi:-
Text(
'Hapo zamani za kale, kulikuwa na sungura na kobe wawili ambao walikuwa marafiki wakubwa lakini pia washindani sana. Kila mara walipokutana, walizozana kuhusu ni nani mwenye kasi zaidi. '
'Sungura alikuwa mwerevu sana na alijua kuwa kobe alikuwa na miguu mikubwa na polepole, hivyo akaona fursa ya kumchokoza. Akamwambia kobe, "Hebu tufanye mbio, tujue ni nani mwenye kasi zaidi kati yetu!" '
'Kobe, ambaye hakuwa na haraka sana, alijibu kwa kujiamini, "Sawa, tutafanya mbio. Lakini ujue, si kila kitu ni kuhusu kasi. Kuna hekima pia." '
'Wakakubaliana kuwa mbio zitafanyika siku ya pili. Sungura alikuwa na mpango wake. '
'Siku iliyofuata, wote wawili walikusanyika kwenye mstari wa kuanzia wa mbio. Sungura alimwambia kobe, "Kwa kuwa unaonekana mzito, nitakupa kichwa kuanzia. Hii itakusaidia kuanza mapema." '
'Kobe alishukuru na kujisikia vizuri kwa heshima aliyopewa na rafiki yake. Mbio zilianza na sungura aliondoka kwa kasi sana. Kobe alijua hawezi kufikia kasi yake, lakini alikimbia kadiri alivyoweza. ',
style: TextStyle(
fontSize: 24.0,
fontWeight: FontWeight.bold,
letterSpacing: 1.5,
color: Colors.black87,
decoration: TextDecoration.underline,
),
Hapo huwezi ku scrol:
Hapo kwanza bado app yetu haiwezi kuscrol text ambazo zinaendlea chini. Sasa kwanza tutatumia elipsis ambapo tutaweka overflow na kuweka idadi ya laini tunazotaka kusomeke. Kisha nyingine tutazikata.
Mfano:
maxLines: 8,
overflow: TextOverflow.ellipsis,
Hapo nimeweka maxLine 8 yaani sasa app yetu itasoma mistari 8 tu ya hiyo stori kisa utaweka alama ya elipsis (...) kumaanisha kuwa bado text zinaendelea.
Ili kuweza ku scrol:
Kwanz aondoa hizo code za hapo juu hizo za elipsis. Kisha ili uweze kuscrol hizo text ongeza chil nyingine ya SingleChildScrollView() kwenye body. Hii itakuwezesha ku scrol hayo maandishi mengi.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
&nbs">...
Je! umeipenda hii post?
Ndio Hapana Save post
Kama unahitaji kuuliza maswali Bofya hapa
Mwandhishi Tarehe 2024-02-23 Download PDF Share On Facebook or Whatsapp Imesomwa mara 245
Download our Apps
👉1 kitabu cha Simulizi
👉2 Kitabu cha Afya
👉3 Kitau cha Fiqh
👉4 Madrasa kiganjani
Flutter somo la 1: Nini flutter na nini hasa inafanya
Katika somo hili utajifunza historia fupi ya flutter, kazi zake, nini hasa inafanya. pia utajifunza jinsi ya ku install flutter Soma Zaidi...
FLUTTER somo la 2: Jinsi ya kutengeneza App ya flutter
Katika somo hili utajifunza jinsi ya kutengeneza App yako ya kwanza ya Flutter hatuwa kwa hatuwa. Soma Zaidi...
Flutter somo la 7: jinsi ya kutumia Widget ya AppBar
Katika somo hili utakwend akujifunza kuhusu widget ya AppBar. Hata tutaona inavyofanya kazi na baadhi ya property zake. Soma Zaidi...
Flutter somo la 8: Jinsi ya kutumia widget ya column
Katika somo hili utakweda kujifunza kuhsu widget ya column. Widget hii ni moja katika widget zilizo muhimu sana kuzifaham. Soma Zaidi...
Flutter somo la 6: Scaffold widget, kazi zake na property zake
Katika somo hili utakwend akujifunza kuhusu scaffold widget. Hapa tutakwend kuona properties zake na baadhi ya mifano. Soma Zaidi...
Flutter somo la 15: Jinsi ya kuweka icon kwenye App ya flutter
Katika somo hili utakwenda kujifunza jinsi ya kutumia icon yaani kuweka icon kwenye App ya flutter. Soma Zaidi...
Flutter: Somo la 3: Mambo muhimu kuhusu App ya flutter
Katika somo hili tutakwend akuyaona baadhi ya maeneo muhimu ya kuanzia kuyajuwa kwa ajili ya course ya flutter kwneye android studio. Soma Zaidi...
Flutter somo la 13: widget ya batani
Katika somo hili uatakwenda kujifunz ajinsi ya kutumia batani na kuweka maumbo mbalimbali ya batani. Soma Zaidi...
Flutter somo la 12: widget ya padding
Katika somo hili utakweda kujifunza jinsi ya kutumia widget ya padding kwenye App yako. Soma Zaidi...
Flutter somo la 9: Jinsi ya kutumia widget ya Row
Katika somo hili utakwenda kujifunza kuhusu row widget. Hii ni widget ambayo ina utofauti na column widget kwa kuwa hii yenyewe inapangilia maudhui kwa safu za mlalo, tofauti na iliyopita inapangilia kwa safu za wima. Soma Zaidi...
Flutter somo la 5: widget ni nini na zinafanya nini kwenye flutter
Katika somo hili uatwkeda kujifunza zaidi kuhusu widget, maana yake, aia zake na kazi zake kwneye flutter. Soma Zaidi...
Flutter somo la 14: Jinsi ya kuweka picha
Katika somo hili utakwenda kujifunza kuhusu widget ya Image ambayo hutumika kuonyesha picha kwenye App. Soma Zaidi...
