Menu
CoddyTech
flag Ar iconالعربيةdown icon

عرض أقصى

جزء من قسم تصميم يتكيف مع الشاشة في رحلة Flutter على Coddy. الدرس 15 من 30.

تتمدّد البطاقة التي تحتوي على نص طويل لتملأ عرض الشاشة. يبدو ذلك مناسبًا على الهاتف؛ لكن البطاقة نفسها تتمدّد على الجهاز اللوحي إلى سطر واحد طوله ألف بكسل، ما يجعل قراءته صعبة.

يحدّد ConstrainedBox حجم العنصر الفرعي. ويمثّل maxWidth: الحد الأقصى الذي يمكن أن يتمدّد إليه:

ConstrainedBox(
  constraints: const BoxConstraints(maxWidth: 400),
  child: Container(...),
)

على شاشة يقل عرضها عن 400 بكسل، تظل البطاقة تتقلّص لتناسبها. أما على شاشة أعرض، فتتوقف عند 400، ويلتف النص على أسطر أكثر.

يقبل BoxConstraints أيضًا minWidth: وminHeight: وmaxHeight:. والحد الأدنى هو أصغر حجم يمكن أن يكون عليه العنصر الفرعي، لذا فهو لا يمنعه أبدًا من التمدّد.

challenge icon

التحدي

سهل

حافظ على سهولة قراءة بطاقة الاقتباس على الشاشات العريضة: اسمح لها بالاتساع إلى حد أقصى يبلغ 320 بكسل.

جرّب بنفسك

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(
        appBar: AppBar(title: const Text('Quote of the Day')),
        body: Padding(
          padding: const EdgeInsets.all(16),
          child: Center(
            child: Container(
              padding: const EdgeInsets.all(24),
              decoration: BoxDecoration(
                color: Colors.amber.shade100,
                borderRadius: BorderRadius.circular(16),
              ),
              child: const Text(
                'The best way to learn to build apps is to build apps, one small screen at a time.',
                style: TextStyle(fontSize: 20),
              ),
            ),
          ),
        ),
      ),
    );
  }
}
quiz iconاختبر نفسك

يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.

جميع دروس تصميم يتكيف مع الشاشة

تدرّب بنفسك: مترجم Flutter عبر الإنترنت