Flutter somo la 13: widget ya batani
Katika somo hili uatakwenda kujifunz ajinsi ya kutumia batani na kuweka maumbo mbalimbali ya batani.
Batani zina faida nyingi kwenye app, batani zinaweza kurahisiha ufikiwaji wa kurasa kwenye app. Yaani batani inawezesha kuweka shotkati.
Widget ya batani inahusu kifaa kidogo au programu ndogo ambayo hutoa huduma maalum kwenye programu au tovuti. Kwa mfano, katika programu za simu au tovuti, widget ya batani inaweza kutoa ufikiaji wa haraka kwa habari au huduma fulani, kama vile hali ya hewa ya sasa, saa, kalenda, au viungo vya haraka kwa sehemu muhimu za programu au tovuti. Jina "batani" linatokana na neno la Kiingereza "button," na kawaida inahusishwa na kifungo au sehemu ndogo inayopatikana kwa urahisi kwenye skrini au ukurasa wa wavuti.
Baadhi ya properties za batanii:-
1.Text: Inaruhusu kuweka maandishi yanayoonekana kwenye batani.
2.Background Color: Inaruhusu kuweka rangi ya asili ya batani.
3.Border: Inaruhusu kurekebisha mipaka ya batani, kama vile ukubwa na rangi ya mpaka.
4.Font: Inaruhusu kurekebisha fonti (aina ya herufi) ya maandishi kwenye batani.
5.Alignment: Inaruhusu kurekebisha mpangilio wa maandishi ndani ya batani (kama vile kulia, kushoto, au katikati).
6.Enabled/Disabled: Inaruhusu kuwezesha au kulemaza batani ili kuzuia au kuruhusu vitendo vya mtumiaji.
7.Visible/Invisible: Inaruhusu kuficha au kuonyesha batani kwenye skrini.
8.Click Event: Inaruhusu kuweka vitendo (actions) vinavyotekelezwa wakati batani inapobonyezwa.
9.Tooltip: Inaruhusu kuongeza ujumbe mfupi unaotokea wakati pointer inapopita juu ya batani.
10.Size: Inaruhusu kuweka ukubwa wa batani, kama vile urefu na upana.
11.Icon/Image: Inaruhusu kuongeza picha au ikoni kwenye batani.
12.Style: Inaruhusu kuomba mitindo maalum kwa batani, kama vile mitindo ya pembe za mviringo au mipaka ya kipekee.
13.Margin: Inaruhusu kuweka nafasi ya batani kutoka kwenye vipengele vingine kwenye ukurasa au programu.
14.Padding: Inaruhusu kuweka nafasi kati ya maudhui ya batani na mipaka yake.
15.Visibility Conditions: Inaruhusu kuweka masharti ambayo yanadhibiti ikiwa batani itaonekana au la.
Wacha tuone mifano:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Mfano 1:'),
centerTitle: true,
backgroundColor: Colors.blue,
),
body: Center(
child: ElevatedButton(
onPressed: (){},
child: Text('Bofya hapa'),
),
),
),
);
}
}
Hapo nimekuletea mfano wa simple button. Kwanza tambuwa kuwa button ni widget. Hvyo kama unataka kuweka text kwenye hiyo button hizyo widget ya text inatakiwa iwe ndani a button widget. Kitu kingine unatakiwa kutambuwa aina ya batani unayoitaka kwa mfano hapo nimetumia ElevatedButton. Baada ya hapo utaweka method kwa ajili ya kuthibiti matendo ya batani kama mtu akibofya ama kubonyeza. Kufanya hivyo kama ni kubofya tutatumia onPress hii hujulikana kama callback. Nazo hizi zipo nyingi. Hapo mbele nitakuletea aina za batani na aina za claaback.
Sehemu nyingine muhimu ni text za hiyo batani. Kuweka text za batani utatumia widget ya text. Tumeshazungumzia kwa kina kwenye masomo mawili yaliopita. Kumbuka kuwa kama unahitaji batani yako ifanyekazi itakubidi kutumia statefull widget na sio stateless widget kama nilivyofanya hapo juu.
Aina za batani:
ElevatedButton: Hii ni batani iliyoinuliwa ambayo ina muonekano wa 3D. Mara nyingi hutumiwa kwa vitendo muhimu kama vile kuwasilisha au kuokoa data.
FlatButton: Hii ni batani bila kivuli na huonyeshwa kama maandishi au ikoni bila msingi. Hutumiwa kwa vitendo visivyo muhimu sana ambavyo havitakiwi kuvutia umakini mkubwa.
TextButton: Hii ni batani ambayo inaonyesha maandishi tu na hakuna msingi au kivuli. Hutumika kwa vitendo visivyo muhimu sana ambavyo havitakiwi kuvutia umakini mkubwa.
OutlinedButton: Hii ni batani ambayo inaonyesha mpaka tu bila rangi ya msingi. Mara nyingine hutumika kwa vitendo kama vile kuanzisha mazungumzo au kufuta data.
IconButton: Hii ni batani iliyowekwa kwenye ikoni badala ya maandishi. Hutumika kwa vitendo maalum au vitendo ambavyo vinaonyeshwa vizuri kwa ikoni.
FloatingActionButton: Hii ni batani ya mduara ambayo mara nyingi huonekana kwenye kona ya chini kulia ya skrini. Hutumiwa kwa vitendo muhimu zaidi kama vile kuongeza kitu kipya au kuanza kitendo kipya.
DropdownButton: Hii ni batani ambayo inaonyesha orodha ya chaguo ambayo mtumiaji anaweza kuchagua kutoka kwake. Mara nyingi hutumiwa kwa kuchagua chaguo kutoka kwa orodha ya chaguo.
ToggleButton: Hii ni seti ya batani ambazo mtumiaji anaweza kuchagua chaguo moja kutoka kwa seti ya chaguo. Kila batani inaweza kuwa katika hali ya kuchaguliwa au kutochaguliwa.
PopupMenuButton: Hii ni batani ambayo inaonyesha menyu ya muktadha wakati inapobonyezwa. Hutumiwa kwa vitendo vya kuchagua chaguo kutoka kwenye orodha ya chaguo.
Mfano wa button hizo pamoja na property zao:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Button Examples'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () {},
child: Text('ElevatedButton'),
),
SizedBox(height: 10),
TextButton(
onPressed: () {},
child: Text('TextButton'),
),
SizedBox(height: 10),
OutlinedButton(
onPressed: () {},
child: Text('OutlinedButton'),
),
SizedBox(height: 10),
IconButton(
icon: Icon(Icons.add),
onPressed: () {},
tooltip: 'IconButton',
),
SizedBox(height: 10),
DropdownButton<String>(
items: <String>['Option 1', 'Option 2', 'Option 3']
.map((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
onChanged: (String? newValue) {},
hint: Text('DropdownButton'),
),
SizedBox(height: 10),
ToggleButtons(
isSelected: [true, false],
onPressed: (int index) {},
children: const <Widget>[
">...
Jifunze zaidi, na wasiliana nasi ukiwa na App yetu. Bofya link hapo chini kuweza kuipakua. Umeionaje Makala hii.. ? Katika somo hili utajifunza jisni ya kubadili package name ama app id kwenye Android app na Bundle Identifier kwenye iOS app na taarifa nyinginezo. 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. Katika somo hili utakwend akujifunza kuhusu widget ya AppBar. Hata tutaona inavyofanya kazi na baadhi ya property zake. Katika Flutter, Text Widget ni kipengele kinachotumiwa kuonyesha maandishi kwenye programu. Kwa kawaida, hutumiwa kama sehemu ya muundo wa UI ya programu za Flutter. Katika somo hili utakwenda kujifunzajinsi ya kubadilisha, jinala App yaani App name. Katika somo hili utajifunza historia fupi ya flutter, kazi zake, nini hasa inafanya. pia utajifunza jinsi ya ku install flutter Katika somo hili utakweda kujifunza jinsi ya kutumia widget ya padding kwenye App yako. Katika somo hili utakwenda kujifunza kuhusu widget ya Image ambayo hutumika kuonyesha picha kwenye App. Katika somo hili utakwenda kujifunza jisni ya kuweka drawer menu kwenye app ya flutter. Katika somo hili utajifunza jinsi ya kutengeneza App yako ya kwanza ya Flutter hatuwa kwa hatuwa. Download App Yetu
👉1
kitabu cha Simulizi
👉2
Madrasa kiganjani
👉3
Bongolite - Game zone - Play free game
👉4
Sira ya Mtume Muhammad (s.a.w)
👉5
Simulizi za Hadithi Audio
👉6
Kitau cha Fiqh
Post zinazofanana:
FLUTTER somo la 19: jinsi ya kubadili app id ama bundle identifier na configuration nyingine
Flutter somo la 9: Jinsi ya kutumia widget ya Row
Flutter somo la 7: jinsi ya kutumia Widget ya AppBar
Flutter somo la 11: Matumizi ya text widget
FLUTTER somo la 18: Jinsi yakubadili App name kwenye flutter
Flutter somo la 1: Nini flutter na nini hasa inafanya
Flutter somo la 12: widget ya padding
Flutter somo la 14: Jinsi ya kuweka picha
Flutter somo la 16: Jinsi ya kuweka drawer menu
FLUTTER somo la 2: Jinsi ya kutengeneza App ya flutter
