AppBar ni sehemu muhimu sana katika maendeleo ya programu za Flutter. Inaruhusu kuunda vichwa vya skrini (sasa hivi ni pamoja na kichwa cha juu cha skrini kwenye programu ya simu au kichwa cha programu ya wavuti) na huja na propertynyingi za kawaida kama vile kichwa cha programu, menyu za kushoto na kulia, vifungo vya kuingia, na zaidi.
Baadhi ya property zake:
Hapa kuna baadhi ya propertymuhimu za AppBar katika Flutter:
1. title: Widget inayoonyeshwa kama kichwa cha AppBar.
2. leading: Widget inayoonyeshwa kushoto ya AppBar, mara nyingi hutumika kwa ikoni ya kurudi nyuma.
3. actions: Orodha ya Widgets zinazoonyeshwa kulia ya AppBar, kawaida hutumika kwa vifungo vya kuingia.
4. backgroundColor: Rangi ya asili ya AppBar.
5. elevation: Kivuli cha AppBar kwa kina fulani.
6. brightness: Mwanga wa mwonekano wa AppBar (Brightness.light au Brightness.dark).
7. centerTitle: Boolean inayoonyesha ikiwa kichwa cha AppBar kinapaswa kuwa katikati au la.
8.iconTheme: Mwonekano wa ikoni kwenye AppBar.
9.textTheme: Mwonekano wa maandishi kwenye AppBar.
10.automaticallyImplyLeading: Boolean inayoamua ikiwa AppBar itajumuisha kiatu cha kurudi nyuma moja kwa moja kulingana na hali ya Scaffold.
11.toolbarOpacity: Utupu wa mwonekano wa chombo cha zana kwenye AppBar.
12.bottom: Widget inayoonyeshwa chini ya AppBar, kama vile TabBar.
Hizi ni baadhi tu ya propertyzinazopatikana kwa AppBar katika Flutter. Unaweza kuchunguza propertyzaidi na kujifunza jinsi ya kuzitumia kwa undani kwenye docs rasmi za Flutter kwa AppBar.
Katika como hili tunakwedna kufanyia kazi code hizi:
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Bongoclass'),
backgroundColor: Colors.blue,
),
),
),
);
}
Sasa tutaanza kuweka widget moja moja kwenye AppBar. Kama ukiangalia code hapo juu ni zile zile ambazo tunazifahamu. Hapo utapata title na backround color kwenye appbar. Sasa sisi tunataka kuongeza vitu vifutavyo:
Kuziweka text katikati (center):
Kufanya text ziwe katikati tutatumia property ya centerTitle: true, utaweka true kama unahitaji ziwe katikati. Mfano
appBar: AppBar(
title: Text('Bongoclass'),
centerTitle: true,
),
Kuongezastyle kwenye text:
Unaweza pia kurembesha hizo text kw amfano kuweka rangi, kuongeza ukubwa, kuzifanya bold, italics na style nyinginezo. Kuweka style tutatumia property ya style. Kisha kuongeza ukubwa utatumia property ya TextStyle() ambapo ndani yake utaweka prpperty unazotaka. Kama ni ukubwa utatumia fontSize kisha utaweka value. style: TextStyle(fontSize: 24.0). Na kama nirangi utaweka color: mfano color: Colors.green. Kuweka style kwenye maandisha kama italics utatumia fontStyle na kuweka mandishi yawe bold utatumia font Weight mfano fontStyle: FontStyle.italic,
Mafano wa code:
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text(
'Bongoclass',
style: TextStyle(
fontSize: 24.0,
color: Colors.green,
fontStyle: FontStyle.italic, // Set text to italic
fontWeight: FontWeight.bold, // Set text to bold
),
),
centerTitle: true,
backgroundColor: Colors.blue,
),
),
),
);
}
Utaona hapo nimetumia keyword const hii sio lazima ila ni vyema kuiweka ilikwamba endapo text itakuwa tupu basi program itatafuta text zilizopo ili kuziweka hapo kwenye bar. Hivyo ni vyema kuiweka hapo ijapokuwa hata ukitowa haina athari endapo text zitakuwepo.
Kuweka action kwenye appbar:
Hizi zinaweza kuwa ni batani ala text chochote ambacho utakiweka kwenye appbar il kiwe mlango wa kufikia taarifa nyingine. Tunatumia hizi action kufanya jambo. Mafano tunataka kuweka icon ziwe kama menu.
Actions: hii ni property ambayo ndio inakwenda kubeba hizo actions. Actions inaweza kubeba list ya widget mfano batani. Hvyo tutatumia mabano [] kuonyesha kama hyo itabeba list ya items. Rejea somo letu la dart. Ili kuonyesha kuwa list hiyo inabeba widget utatumia Widget[] sio lazima kuiweka ila ni vyema ufanye hivyo.
Mfano:
actions: [
IconButton(
icon: Icon(Icons.home),
onPressed: () {
// Define the action for the home icon
},
),
]
Utaona haponimeweka icon ya home button. Kuweka IconButon utatumia property ya icon kama inavyoonekana hapo kwenye code. Pia tutatumia onPressed: () ili kuweka ationa ya kuwa nini kitokee endapo batani itabonyezwa. Tutakuja kujifunza kwenye somo la batani. Wacha tuone jinsi ya kuongeza action nyingine.
actions: [
IconButton(
icon: Icon(Icons.home),
onPressed: () {
},
),
IconButton(
icon: Icon(Icons.info),
onPressed: () {
},
),
IconButton(
icon: Icon(Icons.contact_phone),
onPressed: () {
},
),
],
Hapo ukiangalia kuna iconbutton tatu ambazo ni:-
- Home
- Info
- contact
Code zote hizi hapa:
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text(
'Bongoclass',
style: TextStyle(
fontSize: 24.0,
color: Colors.green,
fontStyle: FontStyle.italic,
fontWeight: FontWeight.bold,
),
),
centerTitle: true,
backgroundColor: Colors.blue,
actions: [
IconButton(
icon: Icon(Icons.home),
onPressed: () {
},
),
IconButton(
icon: Icon(Icons.info),
onPressed: () {
},
),
IconButton(
icon: Icon(Icons.contact_phone),
onPressed: () {
},
),
],
),
),
),
);
}
Unaweza kufanya mazoezi zaidi, na kufuatilia kuhusu hizo property nyinginezo. Kw amfano kuweka opacity kwenye toolbar kwa kutuia toolbarOpacity Na nyinginezo.
Mwisho:
Katika somo linalofuata tutakwenda kujifunza kuhusu widget ya column. Hi ni oja kati ya widget muhimu ambazo hutuiwa sana.
