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(
title: Text('Padding Example'),
),
body: Center(
child: Container(
color: Colors.blue,
child: Padding(
padding: const EdgeInsets.only(
left: 10.0,
top: 20.0,
),
child: Container(
color: Colors.green,
width: 200,
height: 200,
child: const Center(
child: Text(
'Hello, World!',
style: TextStyle(
fontSize: 24,
color: Colors.white,
),
),
),
),
),
),
),
),
);
}
}
Mwisho:
Katika somo linalofuata tutakwenda kujifunza jinsi ya kutumia batani. Tutajifunza kuweka baani na kweka action zake.
