العرض الكامل: double.infinity

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

يكون عرض الزر بقدر عرض تسميته. في صفحة تسجيل الدخول، غالبًا ما تريد أن يمتد عبر الصفحة، ليكون بعرض الحقول التي تعلوه.

أحِطه بعنصر SizedBox يكون عرضه double.infinity:

SizedBox(
  width: double.infinity,
  child: ElevatedButton(
    onPressed: () {},
    child: const Text('Continue'),
  ),
)

القيمة double.infinity هي عدد في Dart أكبر من أي عدد آخر. لا يمكن لأي صندوق أن يكون بهذا العرض، لذا يجعل Flutter عرضه بقدر ما يسمح به العنصر الأب: هنا، مساحة الصفحة داخل حوافها الداخلية. وعلى هاتف أعرض، يزداد عرض الزر معها.

استخدمها لاتجاه واحد في كل مرة. فارتفاع double.infinity داخل Column يعني طلب ارتفاع لا نهائي، وعندها يتوقف Flutter مع ظهور خطأ.

التحدي

سهل

اجعل زر Sign in بعرض حقل البريد الإلكتروني أعلاه، مع الحفاظ على ارتفاعه المعتاد.

جرّب بنفسك

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('Welcome back')),
        body: Padding(
          padding: const EdgeInsets.all(16),
          child: Column(
            children: [
              const TextField(
                decoration: InputDecoration(labelText: 'Email'),
              ),
              const SizedBox(height: 24),
              ElevatedButton(
                onPressed: () {},
                child: const Text('Sign in'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}