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>[
Icon(Icons.format_bold),
Icon(Icons.format_italic),
],
),
SizedBox(height: 10),
PopupMenuButton<String>(
onSelected: (String value) {},
itemBuilder: (BuildContext context) => <PopupMenuEntry<String>>[
const PopupMenuItem<String>(
value: 'Item 1',
child: Text('Item 1'),
),
const PopupMenuItem<String>(
value: 'Item 2',
child: Text('Item 2'),
),
const PopupMenuItem<String>(
value: 'Item 3',
child: Text('Item 3'),
),
],
child: Text('PopupMenuButton'),
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
tooltip: 'FloatingActionButton',
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
),
);
}
}
Hapo utaona nimeongeza SizedBox(height: 10), hii ni kwa ajili ya kutenganisha nafasi kati ya batani moja na ningine. Kama utaitoa utaona batani zipo karibu karib sana. Mpaka kufikia hapo batani zetu haijaanza kufanya kazi.
Sasa nataka tuweke batani moja kwanza endapo mtu anaibofya itasema Karibu bongoclass. Kumbuka ili batani iweze kufanya kazi itatubidi kubadili widget state kuwa stateful. Rejea somo la widget.
Jinsi ya kuifanya batani ifanye kazi:
Kwanza tutatengeneza class tatu ambazo ni
- MyApp: hii itakuwa ndio class yetu kuu ambayo ita return class ya homepage
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage(),
);
}
}
- Homepage: class hii itahusiana na maudhui ya kwenye App yetu. Nimeiita HomePage, unaweza kuipa jina lolote lile. Pia ndani ya class hii ndipo tutakwend akutengeneza state yaani
createState()
class HomePage extends StatefulWidget {
@override
_HomePageState createState() {
return _HomePageState();
}
}
- _HomePageState: class hii ndio ambayo itakwenda kutumia state ambayo imetengenezwa kwenye homepage class ili kuweza kutengeneza tukio ambalo tunataka litokee endapo mtu atabofya batani. Hivyo katika class hii ndipo tutaweka method ambayo uta display ujumbe wetu.
class _HomePageState extends State<HomePage> {
String karibu = '';
void ujumbe() {
setState(() {
karibu = 'Karibu BongoClass!';
});
}
Sasa tukirudi kwenye batani yetu, baada ya kuweka callbacl ya onPress ndani yake tutakuw akuiita method yetu ya ku display ujumbe wetu. Kumbuka method ama fuction haziwezi kufanya kazi mpaka ziitwe.
ElevatedButton(
onPressed: () {
ujumbe();
},
child: Text('Bofya hapa'),
),
Sasa tutamaliza na kuweka widget ya text ambayo utafanya kazi baada ya batani kuwa imebofywa.
Text(
karibu,
style: TextStyle(fontSize: 20),
),
Hii nyenyewe itakuwa inasikuliza kwenye batani. Pindi batani ikibofywa itaita methid ya ku display ujumbe na hapo ndipo widget hii itaonyesha huo ujumbe.
Code zote zipo hivi:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
@override
_HomePageState createState() {
return _HomePageState();
}
}
class _HomePageState extends State<HomePage> {
String karibu = '';
void ujumbe() {
setState(() {
karibu = 'Karibu BongoClass!';
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Mfano 1:'),
centerTitle: true,
backgroundColor: Colors.blue,
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () {
ujumbe();
},
child: Text('Bofya hapa'),
),
SizedBox(height: 20),
Text(
karibu,
style: TextStyle(fontSize: 20),
),
],
),
),
);
}
}
Kwa mfan unataka akibofya tena huo ujumbe uondoke unaweza kutumia if else. Logig ipo hivi code zitaangalia kama kwenye screen ujumbe unasoma basi aikibofywa batani ujumbe uondoke.
void ujumbe() {
setState(() {
if (karibu == 'Karibu BongoClass!') {
karibu = ''; // Remove the message
} else {
karibu = 'Karibu BongoClass!';
}
});
}
Kwa mfano unataka huo ujumbe ukae kwa sekunde 10 tu. kufanya hivyo kwanza utakubidi ku import import 'dart:async'; kwa ajili ya kutumia future, unaweza kurejea somola synchronous programming kwneye mafunzo ya Dart. baada ya hapo utakuja kuset time kwneye method yety ua ujumbe.
void ujumbe() {
setState(() {
karibu = 'Karibu BongoClass!';
});
// Timer to clear the message after 10 seconds
Timer(Duration(seconds: 10), () {
setState(() {
karibu = '';
});
});
}
Callback za button:
Callback inahusu event ama yale matukio ambayo hufanyika kwenye batani ama kwenye widget nyinginezo. Hapa nitakupa orother ya callback ambazo tutakuwa tukiaziona kwenye widget ya batani na nyinginezo zitakazofuata.
onPressed: Maudhui haya hutumika na batani na hutekelezwa wakati batani inapobonyezwa au kuguswa na mtumiaji.
onChanged: Maudhui haya mara nyingi hutumika na vitufe vya kuingiza kama vile TextField, Slider, na Checkbox. Hutolewa wakati thamani ya kivinjari inabadilika, kama vile unapoweka maandishi kwenye TextField au unapobadilisha nafasi ya Slider.
onTap: Maudhui haya hutumika na vitufe vya GestureDetector na InkWell ili kugundua kugusa kwa kifaa kwenye kivinjari. Hutolewa wakati kifaa kinaguswa na mtumiaji.
onSubmitted: Maudhui haya hutumika na vitufe vya TextField na hutekelezwa wakati mtumiaji anawasilisha maandishi yaliyoingizwa, kwa kawaida kwa kubonyeza kitufe cha Enter kwenye kibodi.
onSelected: Maudhui haya hutumika na PopupMenuButton na hutolewa wakati mtumiaji anachagua kipengee kutoka kwenye menyu ya pop-up.
Katika batani mara ntngi tunatumia onPressed kama ambavyo tulivyojifunza kwenye somo hili. Hizo callback nyingine tutakwenda kuziona kwenye widget zinazofuata.
Mwisho:
Katika somo linalofuata tutakwend akujifunza jinsi ya kutumia image kwenye App ya flutter.
