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>[

            &n">...



Je! umeipenda hii post?
Ndio            Hapana            Save post

Kama unahitaji kuuliza maswali Bofya hapa

Mwandhishi Tarehe 2024-02-28 Download PDF     Share On Facebook or Whatsapp Imesomwa mara 143


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

Post zifazofanana:-

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 12: widget ya padding
Katika somo hili utakweda kujifunza jinsi ya kutumia widget ya padding kwenye App yako. 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 8: Jinsi ya kutumia widget ya column
Katika somo hili utakweda kujifunza kuhsu widget ya column. Widget hii ni moja katika widget zilizo muhimu sana kuzifaham. 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...

Flutter somo la 13: widget ya batani
Katika somo hili uatakwenda kujifunz ajinsi ya kutumia batani na kuweka maumbo mbalimbali ya batani. 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 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 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 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 15: Jinsi ya kuweka icon kwenye App ya flutter
Katika somo hili utakwenda kujifunza jinsi ya kutumia icon yaani kuweka icon kwenye App ya flutter. Soma Zaidi...