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
Rajabu 
Tarehe 2024-05-10 14:53:23 Topic: Flutter
Main: Masomo
File: Download PDF
Share On
Facebook
or
Whatsapp
Imesomwa mara 375
Sponsored links
👉1 Kitau cha Fiqh
👉2 Sira ya Mtume Muhammad (s.a.w)
👉3 kitabu cha Simulizi
👉4 Madrasa kiganjani
👉5 Simulizi za Hadithi Audio
👉6 Kitabu cha Afya
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 10: Jinsi ya kutumia widget ya container
Katika somo hili utakwend akujifunza kuhusu widget ya container pia tutajifunza jinsi widget hii inavyoweza kutumika na widget nyingine. 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 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 4: Jinsi ya kuandika code za App ya flutter, hatuwa kwa hatuwa
Katika somo hili utakwenda kujifunza sasa jinsi ya kuandika code za app yetu kwenye flutter framework. 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 20: Jinsi ya ku sign App ya android kwenye flutter
Somo hili litakufundisha hatuwa kwa hatuwa jinsi ya ku sign app ya android kwenye flutter Soma Zaidi...
Flutter somo la 16: Jinsi ya kuweka drawer menu
Katika somo hili utakwenda kujifunza jisni ya kuweka drawer menu kwenye app ya flutter. Soma Zaidi...
Flutter somo la 17: Jinsi ya kubadili app icon
Katika somo hili utakwenda kujifunza jinsi ya kubadili app icon kwenye app ya Android na iphone kwenye flutter. Soma Zaidi...
FLUTTER somo la 19: jinsi ya kubadili app id ama bundle identifier na configuration nyingine
Katika somo hili utajifunza jisni ya kubadili package name ama app id kwenye Android app na Bundle Identifier kwenye iOS app na taarifa nyinginezo. 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 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...
