العرض والارتفاع

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

حدّد لـ Container قيمة width: وقيمة height:، وسيتوقف عن الالتفاف حول العنصر الفرعي. تُقاس الأحجام بالبكسل:

Container(
  width: 300,
  height: 50,
  color: Colors.orange,
  child: Text('Banner'),
)

يوضع العنصر الفرعي في الزاوية العلوية اليسرى من الصندوق. وحدات البكسل في Flutter بالحجم نفسه على كل هاتف، لذا يبدو الصندوق الذي يبلغ عرضه 300 بالبكسل متشابهًا تقريبًا على الهاتف الصغير والكبير.

التحدي

سهل

اجعل عرض المربع الأزرق 200 بكسل وارتفاعه 100 بكسل.

جرّب بنفسك

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: Container(
            color: Colors.lightBlue,
            child: Text('Box'),
          ),
        ),
      ),
    );
  }
}