कॉलम, पंक्तियों, स्पेसिंग और स्थान वितरण की मदद से स्क्रीन पर कई विजेट व्यवस्थित करें।
इस पाठ को Kodokon में खोलेंएक असली स्क्रीन शायद ही कभी एक ही विजेट दिखाती है: आपको उन्हें व्यवस्थित करना होता है। यही लेआउट विजेट का काम है। Column अपने चिल्ड्रन को ऊर्ध्वाधर रूप से, ऊपर से नीचे स्टैक करता है; Row उन्हें क्षैतिज रूप से, बाएँ से दाएँ संरेखित करता है। चूँकि वे कई चिल्ड्रन स्वीकार करते हैं, पैरामीटर को अब child नहीं बल्कि children कहा जाता है, और यह एक सूची प्राप्त करता है: वर्गाकार कोष्ठकों [ ] के बीच के विजेट, अल्पविरामों से अलग।
import 'package:flutter/material.dart';
Widget buildProfile() {
return const Column(
children: [
Icon(Icons.person, size: 48),
Text("Sonia Ben Ali"),
Text("Flutter Developer"),
],
);
}Row बिल्कुल इसी तरह काम करता है, लेकिन क्षैतिज रूप से। इसका मुख्य अक्ष चौड़ाई है: mainAxisAlignment पैरामीटर चुनता है कि चिल्ड्रन को उस अक्ष के साथ कैसे वितरित किया जाए (center उन्हें बीच में समूहित करने के लिए, spaceBetween उन्हें यथासंभव दूर फैलाने के लिए...)। और दो विजेट के बीच एक साधारण खाली जगह डालने के लिए, SizedBox का उपयोग करें: एक अदृश्य डिब्बा जिसकी चौड़ाई (width) या ऊँचाई (height) आप निर्धारित करते हैं।
import 'package:flutter/material.dart';
Widget buildRating() {
return const Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.star, color: Colors.amber),
SizedBox(width: 8),
Text("4.8 out of 5"),
],
);
}Padding अपने चाइल्ड के चारों ओर जगह जोड़ता है, ताकि सामग्री किनारों से न चिपके। जगह की मात्रा EdgeInsets से वर्णित की जाती है: EdgeInsets.all(16) चारों तरफ़ 16 पिक्सेल रखता है, EdgeInsets.only(left: 8) केवल बाईं ओर, और EdgeInsets.symmetric(horizontal: 12) बाईं और दाईं ओर एक साथ।
import 'package:flutter/material.dart';
Widget buildQuote() {
return const Padding(
padding: EdgeInsets.all(16),
child: Text("A text with some room around it"),
);
}एक आख़िरी टूल: Expanded। किसी Row या Column के चिल्ड्रन के बीच रखा गया, यह अपने चाइल्ड से बची हुई पूरी जगह लेने के लिए कहता है। नीचे दिए गए उदाहरण में, ग्रे डिब्बा अपनी 80 पिक्सेल चौड़ाई बनाए रखता है, और टील डिब्बा बची हुई चौड़ाई भरने के लिए फैल जाता है, स्क्रीन का आकार चाहे जो भी हो।
import 'package:flutter/material.dart';
Widget buildProgress() {
return Row(
children: [
Container(width: 80, height: 40, color: Colors.grey),
Expanded(
child: Container(height: 40, color: Colors.teal),
),
],
);
}