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
),
">...
Jiunge nasi WhatsApp kupata update zetu
Umeionaje Makala hii.. ?
Katika somo hili utakwenda kujifunza jinsi ya kubadili app icon kwenye app ya Android na iphone kwenye flutter.
Soma Zaidi...Katika somo hili utakwenda kujifunzajinsi ya kubadilisha, jinala App yaani App name.
Soma Zaidi...Katika somo hili utakwenda kujifunza jisni ya kuweka drawer menu kwenye app ya flutter.
Soma Zaidi...Katika somo hili utakwenda kujifunza jinsi ya kutumia icon yaani kuweka icon kwenye App ya flutter.
Soma Zaidi...Katika somo hili tutakwend akuyaona baadhi ya maeneo muhimu ya kuanzia kuyajuwa kwa ajili ya course ya flutter kwneye android studio.
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...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 utakwend akujifunza kuhusu scaffold widget. Hapa tutakwend kuona properties zake na baadhi ya mifano.
Soma Zaidi...Katika somo hili utakweda kujifunza jinsi ya kutumia widget ya padding kwenye App yako.
Soma Zaidi...Katika somo hili utakwend akujifunza jinsi ya kutengeneza faili la apk kwa ajili ya ku share app yako, na faili la aab kwa ajili ya ku publih app yako.
Soma Zaidi...