רוחב מלא: 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'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}