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

Tafadhali login au jisajili uendelee kusoma makala hii