Widget ni nini?
Widget ni kipengele muhimu katika Flutter ambacho kinaunda sehemu ya interface ya mtumiaji yaani uso wa matumizii kwenye app yako.. Kimsingi, kila kitu ambacho unaona kwenye programu ya Flutter, kama vile vichupo, vitufe, maandishi, na zaidi, vyote ni widget. Widgets zinaweza kuwa vitu vya msingi kama vile vitufe na maandishi, au zinaweza kuwa muundo wa kina zaidi kama vile orodha au gridi.
Katika Flutter, kuna aina mbili za widgets: StatefulWidget na StatelessWidget.
StatelessWidget: Hii ni widget ambayo haitoi uwezo wa kubadilisha hali yake mara baada ya kujengwa. Kwa mfano, maandishi ambayo hayabadiliki baada ya kuundwa ni StatelessWidget. Kama tulivyoona hapo somo lililopita neno Bongoclass
Hapa kuna mifano kumi ya StatelessWidget katika Flutter:
- 1. Text: Widget ya maandishi inayotumiwa kuonyesha maandishi kwenye programu.
- 2. Icon: Widget inayotumiwa kuonyesha alama au ikoni ndogo kwenye programu.
- 3. Image: Widget inayotumiwa kuonyesha picha kwenye programu.
- 4. RaisedButton: Widget ya kibatani kilichoinuliwa ambacho kinatoa athari ya juu inapobonyezwa.
- 5. FlatButton: Widget ya kibatani cha gorofa ambacho hakina athari ya juu inapobonyezwa.
- 6. Container: Widget inayotumiwa kama sanduku la kujenga muundo wa kipekee kwa kuhifadhi vitu vingine.
- 7. Column: Widget inayoweka watoto (children) wake kwenye safu moja baada ya nyingine kwenye mwelekeo wa usawa.
- 8. Row: Widget inayoweka watoto (children) wake kwenye safu moja kando ya nyingine kwenye mwelekeo wa wima.
- 9. ListView: Widget inayoweka watoto (children) wake kwenye orodha ya kutazama safu moja baada ya nyingine.
- 10. GridView: Widget inayoweka watoto (childen) wake kwenye gridi ya kutazama safu na nguzo.
Hizi ni baadhi ya mifano ya StatelessWidget ambayo inaweza kutumika kujenga interface ya mtumiaji katika programu za Flutter.
StatefulWidget: Hii ni widget ambayo inaweza kubadilika au kubadilishwa baada ya kujengwa. Kwa mfano, kipengele ambacho kinaweza kubadili rangi au maudhui yake baada ya tukio fulani, kama vile kubofya kifungo, ni StatefulWidget. Mfano katika somo la pili tuliona app ambayo ukibofya batani namba zinajiongeza.
Hapa kuna mifano kumi ya StatefulWidget katika Flutter:
- 1. Checkbox: Widget ya checkbox inayowezesha mtumiaji kuchagua au kusafisha chaguo moja au zaidi kwenye orodha.
- 2. Slider: Widget ya slider inayoruhusu mtumiaji kuchagua thamani kutoka kwenye safu ya thamani.
- 3. TextField: Widget ya sanduku la maandishi inayowezesha mtumiaji kuingiza maandishi.
- 4. DropdownButton: Widget ya kitufe cha chini kinachofungua orodha ya chaguo wakati kinapobonyezwa.
- 5. BottomNavigationBar: Widget ya usambazaji wa chini ambayo hutoa vichupo vya urambazaji chini ya skrini.
- 6. TabBarView: Widget ya maoni ya vichupo inayojibu kwa kubadilisha vichupo vinavyohusishwa.
- 7. ExpansionPanelList: Widget ya orodha ya mapanuzi inayowawezesha watumiaji kupanua na kupunguza vikundi vya vipengele.
- 8. PageView: Widget ya maoni ya ukurasa ambayo inawezesha mtumiaji kusogeza kati ya kurasa tofauti kwa kugusa au kusogeza.
- 9. RefreshIndicator: Widget inayowawezesha watumiaji kusasisha yaliyomo kwa kuvuta chini kwenye skrini.
- 10. ToggleButtons: Widget ya vitufe vinavyoweza kubadilika ambayo inaruhusu mtumiaji kuchagua kati ya chaguzi tofauti.
Hizi ni baadhi ya mifano ya StatefulWidget ambayo inaweza kutumika kujenga interface ya mtumiaji yenye utendaji mzuri katika programu za Flutter.
Jinsi ya kuandika widget:
- Tunapoandika widget tunaanza na herufi kubwa mfano Scaffold()
- Tunaweka alama ya koma (,) mwishoni mwa kila widge.
- Usisahau kuweka alama ya semicolon (;) mwishoni mwa kila function mfano utaona kwenye runApp();
- Tunapoandika property tunaanza kwa herufi ndogo mfano home
- Mara nyingi tunaweka nukta pacha baada ya property mfano home:
child: Container(
height: 50.0,
),
- Nukta paca hutumika pale tunapotaka kutengeanisha peroperty na value yake. Sasa kama akuna value huna haja ya kuweka nukata pacha mfani
child: Container(
height,
),
- Kila property inakuwa na value yake, na kila widget inakuwa na value yake. Mfano
child: Container(
height: 50.0,
),
Hapo child ni property ambapo Container ni widget, pia widget container ni value ya property child. Na height ni property ya widget container ambapo 5.0 ni value ya property widget.
- Widget inaweza kubeba widget ntinginezo ndani. Hivyo hivyo property zinawez akubeba property nyingine ndani na widget nyingine ndani.
Hapo chini nimekuletea mfano wa widget,ambazo zipo katika aina zote mbili. Pia nimekuwekea widget zenye children. Tutakuja kujifunza zaidi tutakapokuwa tunasoma hizi widget moja moja.
Mfano wa app:
Hapa nakuletea app ambayo ina aina zote mbili za widget.
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Bongoclass'),
backgroundColor: Colors.blue,
),
body: Center(
child: Text("Mafunzo ya flutter"),
),
drawer: Drawer(),
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
),
),
),
);
}
Kuelewa na kutumia Widgets ni muhimu sana katika maendeleo ya programu za Flutter, kwani husaidia kujenga interface ya mtumiaji iliyoboreshwa na yenye utendaji mzuri.
Statefull na stateless widget kwenye app moja:
App inaweza kuwa na statefullwidget na statelesswidget. Sasa inatakiwa useme wakati unapotengeneza class za hizo widget. Useme kuwa widget hizo ni stateless ama statefull.
Mfano:1
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
home: Scaffold(
backgroundColor: Colors.blue,
),
),
);
}
Code hizo zitaprint app ambayo ina ukrasa mtupu ambao una background ya buluu. Sasa moja kwa moja hiyo ni ststelesswidget kwa kuhwa haihitajibabadiliko na wala haina mabadiliko yatakayotokea. Sasa tutajifunza kuandika stateless widget kwa kuubadili mfano huo.
Kwanza tutaanza app yetu na kutengeneza class, mfano tutaiita Mafunzo ili kutambuisha aina ya widget itakubidi ku exter hiyo class na aina ya widget. Mfano class Mafunzo extends StatelessWidget {} hapo nime extend na statelesswidget kw akuwa ndio aina ya widget ninayokwenda kutumia.
Kisha tuta override kwa method ya build() ambayo return type yake ni Widget. Kwenye parameter tutatumia BuildContext context hii hutumika kuelezea wapi unakwenda kuweka hizo widget. Ndani ya ke sasa kwenye hii function tutaweka hizo widget ambazo method yetu ita return. Kwa mfano unaweza ku return MaterialApp ili kuweza kutengeneza muonekan wa App. angalia code hapo chini:-
import 'package:flutter/material.dart';
void main() {
runApp(Mafunzo());
}
class Mafunzo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.blue,
),
);
}
}
Pia code hizo hapo juu unawez akuziandika kwwa kutumia class mbili. Kwanza class ya
Kwanza ita return widget ya Maeria app ili kutengeneza muonekano wa App. na class ya pili ita return maudhui ya app yetu. Kwa mfano hapo maudhui ni hiyo background color. Pia unawez akuweka text ama chochote unachotaka.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blue,
);
}
}
Mfano wa statefullwidget
Kitu ambacho kinaongezeka kwenye statefulwdget ni ku create create state. Tuna create state kw akutumia createState() pia utatengeneza class nyingine kwa ajili ya hiyo state ambayo umeitengeneza. Angalia code hizi:
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
home: Scaffold(
backgroundColor: Colors.blue,
),
),
);
}
Tunakweda kuzibadili kuwa stateful widget
Kwanza tutatengneza class yetu mfano tutaiita Mafunzo. Hapo tutaextend na statefullwidget ili kutambulisa kuwa sasa tunakwenda kutumia statefull widget. Tutafuata utaratibu ule ue wa ku build()
Kisha tutatengeneza class nyingine ambayo itakwenda u create yaani kutengeneza state za widget. Kisha ndipo tutatengeneza class kwa ajili ya ku print scafold.
import 'package:flutter/material.dart';
void main() {
runApp(Mafunzo());
}
class Mafunzo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Tehama(),
);
}
}
class Tehama extends StatefulWidget {
@override
_MafunzoTehama createState() => _MafunzoTehama();
}
class _MafunzoTehama extends State<Tehama> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blue,
);
}
}
Pia unaweza kuchanganya statelesswidget na satatefulwidget kulingana na matarajio ya app yako. Ngoja nikuletee mfano weu wa kwanza kabisa kwenye somo la 2 ambapo kulikuwa na batani ukibofya namba zinaongezeka. Bila shaka baadhi ya vitu mpaka sasa utakuwa na aidia navyo
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Stateful Widget Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
Mwisho:
Katika somo linalofuata tutakwenda kusoma widget ya scaffold tutakwenda kuona kazi zake na baadhi ya property ambazo zinaweza kukaa humo.
