Flexible Çocuğunu Sarar

Coddy'nin Flutter Journey'sinin Her Ekrana Uyan Düzenler bölümünün bir parçası. Ders 3 / 30.

Expanded, çocuğun daha az alana ihtiyaç duysa bile kalan alanı doldurmasını sağlar. Expanded içine yerleştirilmiş bir sohbet balonu, tek kelimelik bir mesaj için satırın tamamı boyunca genişler.

Flexible, çocuğa en fazla aynı alanı verir ve daha küçük kalmasına olanak tanır:

Row(
  children: [
    const CircleAvatar(child: Text('A')),
    Flexible(
      child: Container(
        color: Colors.grey.shade300,
        child: const Text('Hello'),
      ),
    ),
  ],
)

Kısa bir mesaj küçük bir balon oluşturur. Uzun bir mesaj satırın kenarına ulaşana kadar büyür, ardından daha fazla satıra kaydırılır; çünkü Flexible, kalan alandan fazlasını kaplamasına asla izin vermez.

Çocuğun alanı doldurması gerekiyorsa Expanded, doldurmasına izin verilebiliyorsa Flexible kullanın.

Görev

Kolay

Hi! balonu ekranın tamamı boyunca uzanıyor. Her balon yalnızca mesajı kadar geniş olsun; uzun mesaj ise ekranın içinde satır kaydırmaya devam etsin.

Kendin dene

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('Chat')),
        body: Padding(
          padding: const EdgeInsets.all(16),
          child: Column(
            children: [
              Row(
                children: [
                  const CircleAvatar(child: Text('S')),
                  const SizedBox(width: 8),
                  Expanded(
                    child: Container(
                      padding: const EdgeInsets.all(12),
                      decoration: BoxDecoration(
                        color: Colors.grey.shade300,
                        borderRadius: BorderRadius.circular(16),
                      ),
                      child: const Text('Hi!'),
                    ),
                  ),
                ],
              ),
              const SizedBox(height: 12),
              Row(
                children: [
                  const CircleAvatar(child: Text('S')),
                  const SizedBox(width: 8),
                  Expanded(
                    child: Container(
                      padding: const EdgeInsets.all(12),
                      decoration: BoxDecoration(
                        color: Colors.grey.shade300,
                        borderRadius: BorderRadius.circular(16),
                      ),
                      child: const Text(
                        'Are you coming to the park later? We meet at the big tree by the lake.',
                      ),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}