2-rasm. Widgetlar daraxti.
Shuningdek widgetlar foydalanilishiga ko’ra ikki turga bo’linadi.
3-rasm. Widget turlari
Flutterda Container widget quyidagicha tasvirlanadi:
JOURNAL OF NEW CENTURY INNOVATIONS
http://www.newjournal.org/
Volume–52_Issue-2_May_2024
161
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp();
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Container(
color: Colors.
blue
,
height: 300,
width: 300,
),
),
);
}
}
Bu yerda widget ko’rinadigan widget bo’lib, Container widgetini ichida Text
widget quyidagicha ifodalanadi:
home: Scaffold(
body: Container(
color: Colors.
blue
,
height: 300,
width: 300,
child: Center(
child: Text(
'Container1'
),
),
),
)
Bu yerda Container, Text widgetlari ko’-
rinadigan widget hisoblanib, Center widget esa
ko’rinmaydigan widget hisoblanadi[4-5].
Row widget bevosita ma’lumotlarni qator ko’rinishida chiqarish uchun
ishlatiladi.
JOURNAL OF NEW CENTURY INNOVATIONS
http://www.newjournal.org/
Volume–52_Issue-2_May_2024
162
body: Row(
children: [
Container(
color: Colors.
blue
,
height: 100,
width: 100,
child: Center(
child: Text(
'Container1'
),
),
),
Container(
color: Colors.
red
,
height: 100,
width: 100,
child: Center(
child: Text(
'Container2'
),
),
),
Container(
color: Colors.
yellow
,
height: 100,
width: 100,
child: Center(
child: Text(
'Container3'
),
),
),
],
),
Bu yerda foydalanilayotgan Row widgeti uchta Container widgetini bitta
qatorga chiqarish uchun ishlatildi[6,7].
Quyidagi mobil ilovani yaratishda CircleAvator, Icon va boshqa widgetlarni
ishlatiladi.
|
