Navigation Menu



image

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



Nicheki WhatsApp kwa maswali





           

Je! umeipenda hii post?
Ndio            Hapana            Save post

Rajabu Tarehe 2024-05-10 14:53:23 Topic: Flutter Main: Masomo File: Download PDF     Share On Facebook or Whatsapp Imesomwa mara 432


Sponsored links
👉1 kitabu cha Simulizi     👉2 Simulizi za Hadithi Audio     👉3 Sira ya Mtume Muhammad (s.a.w)     👉4 Kitabu cha Afya     👉5 Kitau cha Fiqh     👉6 Madrasa kiganjani    

Post zifazofanana:-

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 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 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 16: Jinsi ya kuweka drawer menu
Katika somo hili utakwenda kujifunza jisni ya kuweka drawer menu kwenye app ya flutter. 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 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...

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 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 17: Jinsi ya kubadili app icon
Katika somo hili utakwenda kujifunza jinsi ya kubadili app icon kwenye app ya Android na iphone kwenye flutter. 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 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 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...