Flutter somo la 12: widget ya padding

Kwenye Flutter, "padding" ni widget ambayo inatumika kuzunguka widget nyingine na kuongeza nafasi kati ya mipaka ya widget hiyo na yaliyo ndani yake. Hii ni muhimu sana kwa kurekebisha muundo wa programu yako na kufanya mambo kuonekana vizuri.

Unapofaset padding maana yake unaset je unataka text zako ama maudhui ya app yako yaanzie wapi kwenye screen kutoka kwenye ukuta wa screen. Na hapa tunazungumzia pande zote za screen.

Matumizi ya padding:

Katika padding tutatumia class ya  EdgeInsets ambayo ina property kama :- 

all hii utaset padding sawa kwa pande zote yaani juu, chni, kulia na kshoto. Mfano kama utataka ianzie pixel ya 8 kutoka kwenye ukuta wa screen basi itakuwa hivyo hivyo kwa pande zote. Mfano padding: EdgeInsets.all(16.0) hii itaset padding kuanzia pixel ya 16 kwa pande zote. Kipimo hapa ni dp yaani device pixel.

only hii itakulazimu kutaja padding kwa kila upande katika pande hizo nne. Pande zinajulikana kwa majina top yaani juu, bottom  yani chini,  left yaani kushoto na right yaani kulia. Mfano 

padding: EdgeInsets.only(

    top: 16.0,

    left: 24.0,

    right: 24.0,

    bottom: 16.0,

  )

symmetric hii hutumika kama unataka kuset kwa wima ama kwa mlalo. Wima ni vertical na mlalo ni horizontal. Mfano

padding: EdgeInsets.symmetric(

    vertical: 16.0,

    horizontal: 24.0,

  )

fromLTRB hii ni kama ya only inaset kutoka katika pande zote. L ni left, R ni right, T ni top na B ni botom. Utofauti mkubwa uliopo ni kuwa hapa kwenye fromLTRB tunaset kila moja kivyake, na ambayo hatuhitaji kuset utaiwekea 0. Lakini zile za oly utaset unazotaka ambayo hutaki kuset utaiwaca kabisa. Inamaana kwenye only unaweza kujaza pande mbili tu, lakini kwenye fromLTRB lazima ujaze zote nne, usioitaka utaweka 0.

padding: EdgeInsets.fromLTRB(

    10.0, // left

    20.0, // top

    30.0, // right

    40.0, // bottom

  ),

Zingatia kuwa kama ilivyo kwenye LTRB basi na kwenye kuweka value ni hivyo hivyo, ya kwanza ni left, ya pili ni top, ya tatu ni right na ya nne ni bottom.

import 'package:flutter/material.dart';

void main() {

 runApp(MyApp());

}

class MyApp extends StatelessWidget {

 @override

 Widget build(BuildContext context) {

   return MaterialApp(

     home: Scaffold(

       appBar: AppBar(

         t...