Katika somo hili utakwend akujifunza kuhusu widget ya container pia tutajifunza jinsi widget hii inavyoweza kutumika na widget nyingine.
Widget ya Container ni moja ya vipengele muhimu katika maendeleo ya programu za Flutter. Inatumika kufunga na kupanga vitu vingine kwenye skrini. Container inaruhusu udhibiti mkubwa wa muonekano wa vitu vinavyojumuishwa ndani yake.
Container yenyewe inapangilia maudhui kwenye kufungu katika ukubwa maalumu unaohitaji, ama position maalumu unapotaka kikae
Property muhimu za Container:
alignment: Inadhibiti jinsi watoto wa Container wanavyopangwa ndani yake. Kwa mfano, Alignment.topLeft, Alignment.center, nk.
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('Tehama'),
backgroundColor: Colors.blue,
),
body: Center(
child: Container(
// Rangi ya background ya Container.
color: Colors.yellow,
// Upana wa Container.
width: 200,
// Urefu wa Container.
height: 200,
// Inadhibiti nafasi kuzunguka Container.
margin: EdgeInsets.all(20),
// Inadhibiti nafasi ndani ya Container.
padding: EdgeInsets.all(10),
// Widget ambao utapangwa ndani ya Container.
child: const Center(
child: Text(
'Hii ni Container!',
style: TextStyle(fontSize: 20),
),
),
),
),
),
);
}
}
Mambo ya kuzingatia:
Container haiscroll hivyo kama text zako ni nyingi na unahitaji ku scroll utahitajika kutumia widget nyingine.
Widgets zinazoweza kutumika kama watoto wa Container:
Kwa kuchanganya propertyna watoto hawa wa Container, unaweza kuunda miundo mbalimbali na mitindo ya UI katika programu zako za Flutter.
Jinsi ambavyo container inaweza kutumika na widget nyingine:
import 'package:flutter/material.dart';
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('Container with Row Example'),
backgroundColor: Colors.blue,
),
body: Center(
child: Container(
// Rangi ya background ya Container.
color: Colors.yellow,
// Upana wa Container.
width: 300,
// Urefu wa Container.
height: 100,
// Widget ambao utapangwa ndani ya Container.
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
color: Colors.red,
height: 100,
width: 100,
child: const Text(
'Text 1 ',
style: TextStyle(color: Colors.blue), // Rangi ya kwanza
),
">...
Je! umeipenda hii post?
Rajabu
Sponsored links
Flutter somo la 9: Jinsi ya kutumia widget ya Row
Flutter somo la 17: Jinsi ya kubadili app icon
FLUTTER somo la 19: jinsi ya kubadili app id ama bundle identifier na configuration nyingine
FLUTTER somo la 20: Jinsi ya ku sign App ya android kwenye flutter
Flutter somo la 16: Jinsi ya kuweka drawer menu
Flutter somo la 8: Jinsi ya kutumia widget ya column
Flutter somo la 15: Jinsi ya kuweka icon kwenye App ya flutter
Flutter somo la 10: Jinsi ya kutumia widget ya container
Flutter somo la 12: widget ya padding
Flutter somo la 13: widget ya batani
Flutter somo la 5: widget ni nini na zinafanya nini kwenye flutter
Flutter: somo la 4: Jinsi ya kuandika code za App ya flutter, hatuwa kwa hatuwa
Kama unahitaji kuuliza maswali Bofya hapa
Ndio Hapana Save post
Tarehe 2024-05-10 14:53:23 Download PDF
Share On
Facebook
or
Whatsapp
Imesomwa mara 343
👉1 kitabu cha Simulizi
👉2 Kitabu cha Afya
👉3 Kitau cha Fiqh
👉4 Madrasa kiganjani
Post zifazofanana:-
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...
Katika somo hili utakwenda kujifunza jinsi ya kubadili app icon kwenye app ya Android na iphone kwenye flutter. Soma Zaidi...
Katika somo hili utajifunza jisni ya kubadili package name ama app id kwenye Android app na Bundle Identifier kwenye iOS app na taarifa nyinginezo. Soma Zaidi...
Somo hili litakufundisha hatuwa kwa hatuwa jinsi ya ku sign app ya android kwenye flutter Soma Zaidi...
Katika somo hili utakwenda kujifunza jisni ya kuweka drawer menu kwenye app ya flutter. Soma Zaidi...
Katika somo hili utakweda kujifunza kuhsu widget ya column. Widget hii ni moja katika widget zilizo muhimu sana kuzifaham. Soma Zaidi...
Katika somo hili utakwenda kujifunza jinsi ya kutumia icon yaani kuweka icon kwenye App ya flutter. Soma Zaidi...
Katika somo hili utakwend akujifunza kuhusu widget ya container pia tutajifunza jinsi widget hii inavyoweza kutumika na widget nyingine. Soma Zaidi...
Katika somo hili utakweda kujifunza jinsi ya kutumia widget ya padding kwenye App yako. Soma Zaidi...
Katika somo hili uatakwenda kujifunz ajinsi ya kutumia batani na kuweka maumbo mbalimbali ya batani. Soma Zaidi...
Katika somo hili uatwkeda kujifunza zaidi kuhusu widget, maana yake, aia zake na kazi zake kwneye flutter. Soma Zaidi...
Katika somo hili utakwenda kujifunza sasa jinsi ya kuandika code za app yetu kwenye flutter framework. Soma Zaidi...