صفوف داخل الأعمدة

جزء من قسم تطبيقك الأول في رحلة Flutter على Coddy. الدرس 24 من 32.

يمكن أن يكون Row أحد أبناء Column. هكذا تحصل الشاشة على أسطر تضم عدة عناصر:

Column(
  mainAxisSize: MainAxisSize.min,
  children: [
    Text('Pancakes'),
    Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Text('20 min'),
        SizedBox(width: 12),
        Text('Easy'),
      ],
    ),
  ],
)

يجعل mainAxisSize: MainAxisSize.min الصف أو العمود بحجم أبنائه فقط، بدلًا من شغل كل المساحة المتاحة له. وهنا يُبقي العنصرين في منتصف الشاشة.

التحدي

سهل

حوّل هذا إلى ترويسة ملف شخصي صغيرة:

أبقِ Ada Lovelace في السطر الأول
ضع London و1815 جنبًا إلى جنب أسفله، داخل Row

جرّب بنفسك

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Text('Ada Lovelace', style: TextStyle(fontSize: 28)),
              Text('London'),
              Text('1815'),
            ],
          ),
        ),
      ),
    );
  }
}