Flutter somo la 5: widget ni nini na zinafanya nini kwenye flutter

Katika somo hili uatwkeda kujifunza zaidi kuhusu widget, maana yake, aia zake na kazi zake kwneye flutter.

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:

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:

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:

  1. Tunapoandika widget tunaanza na herufi kubwa mfano Scaffold()
  2. Tunaweka alama ya koma (,) mwishoni mwa kila widge.
  3. Usisahau kuweka alama ya semicolon (;) mwishoni mwa kila function mfano utaona kwenye runApp();
  4. Tunapoandika property tunaanza kwa  herufi ndogo mfano home
  5. Mara nyingi tunaweka nukta pacha baada ya property mfano home:

child: Container(

          height: 50.0,

        ),

  1. Nukta paca hutumika pale tunapotaka kutengeanisha peroperty na value yake. Sasa kama akuna value huna haja ya kuweka nukata pacha mfani 

child: Container(

  height,

),

  1. 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.

 

  1. 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. Sa">...



Je! umeipenda hii post?
Ndio            Hapana            Save post

Kama unahitaji kuuliza maswali Bofya hapa

Mwandhishi Tarehe 2024-02-18 Download PDF     Share On Facebook or Whatsapp Imesomwa mara 118


Download our Apps
👉1 kitabu cha Simulizi     👉2 Kitau cha Fiqh     👉3 Madrasa kiganjani     👉4 Kitabu cha Afya    

Post zifazofanana:-

Flutter: somo la 4: Jinsi ya kuandika code za App ya flutter, hatuwa kwa hatuwa
Katika somo hili utakwenda kujifunza sasa jinsi ya kuandika code za app yetu kwenye flutter framework. Soma Zaidi...

Flutter somo la 12: widget ya padding
Katika somo hili utakweda kujifunza jinsi ya kutumia widget ya padding kwenye App yako. Soma Zaidi...

Flutter somo la 5: widget ni nini na zinafanya nini kwenye flutter
Katika somo hili uatwkeda kujifunza zaidi kuhusu widget, maana yake, aia zake na kazi zake kwneye flutter. Soma Zaidi...

FLUTTER somo la 2: Jinsi ya kutengeneza App ya flutter
Katika somo hili utajifunza jinsi ya kutengeneza App yako ya kwanza ya Flutter hatuwa kwa hatuwa. Soma Zaidi...

Flutter somo la 1: Nini flutter na nini hasa inafanya
Katika somo hili utajifunza historia fupi ya flutter, kazi zake, nini hasa inafanya. pia utajifunza jinsi ya ku install flutter Soma Zaidi...

Flutter somo la 14: Jinsi ya kuweka picha
Katika somo hili utakwenda kujifunza kuhusu widget ya Image ambayo hutumika kuonyesha picha kwenye App. Soma Zaidi...

Flutter somo la 9: Jinsi ya kutumia widget ya Row
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. Soma Zaidi...

Flutter somo la 6: Scaffold widget, kazi zake na property zake
Katika somo hili utakwend akujifunza kuhusu scaffold widget. Hapa tutakwend kuona properties zake na baadhi ya mifano. Soma Zaidi...

Flutter: Somo la 3: Mambo muhimu kuhusu App ya flutter
Katika somo hili tutakwend akuyaona baadhi ya maeneo muhimu ya kuanzia kuyajuwa kwa ajili ya course ya flutter kwneye android studio. Soma Zaidi...

Flutter somo la 11: Matumizi ya text widget
Katika Flutter, Text Widget ni kipengele kinachotumiwa kuonyesha maandishi kwenye programu. Kwa kawaida, hutumiwa kama sehemu ya muundo wa UI ya programu za Flutter. Soma Zaidi...

Flutter somo la 7: jinsi ya kutumia Widget ya AppBar
Katika somo hili utakwend akujifunza kuhusu widget ya AppBar. Hata tutaona inavyofanya kazi na baadhi ya property zake. Soma Zaidi...

Flutter somo la 10: Jinsi ya kutumia widget ya container
Katika somo hili utakwend akujifunza kuhusu widget ya container pia tutajifunza jinsi widget hii inavyoweza kutumika na widget nyingine. Soma Zaidi...