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 utakwenda kujifunza jinsi ya kubadili app icon kwenye app ya Android na iphone kwenye flutter. Katika somo hili utakwend akujifunza jinsi ya kutengeneza faili la apk kwa ajili ya ku share app yako, na faili la aab kwa ajili ya ku publih app yako. 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 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 kujifunza sasa jinsi ya kuandika code za app yetu kwenye flutter framework. Katika somo hili utakwenda kujifunza jisni ya kuweka drawer menu kwenye app ya flutter. Somo hili litakufundisha hatuwa kwa hatuwa jinsi ya ku sign app ya android kwenye flutter Katika somo hili utakwenda kujifunza jinsi ya kutumia icon yaani kuweka icon kwenye App ya flutter. Katika somo hili utakwenda kujifunzajinsi ya kubadilisha, jinala App yaani App name. Katika somo hili utakweda kujifunza jinsi ya kutumia widget ya padding kwenye App yako. Download App Yetu
👉1
Kitau cha Fiqh
👉2
Bongolite - Game zone - Play free game
👉3
Kitabu cha Afya
👉4
Simulizi za Hadithi Audio
👉5
Sira ya Mtume Muhammad (s.a.w)
👉6
Madrasa kiganjani
Post zinazofanana:
Flutter somo la 17: Jinsi ya kubadili app icon
FLUTTER somo la 21: Jinsi ya kutengeneza faili la apka na faili la aab
FLUTTER somo la 19: jinsi ya kubadili app id ama bundle identifier na configuration nyingine
Flutter somo la 11: Matumizi ya text widget
Flutter: somo la 4: Jinsi ya kuandika code za App ya flutter, hatuwa kwa hatuwa
Flutter somo la 16: Jinsi ya kuweka drawer menu
FLUTTER somo la 20: Jinsi ya ku sign App ya android kwenye flutter
Flutter somo la 15: Jinsi ya kuweka icon kwenye App ya flutter
FLUTTER somo la 18: Jinsi yakubadili App name kwenye flutter
Flutter somo la 12: widget ya padding
