Taşma Çözümü: Genişletme

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

Bir Row içindeki Text, tek ve uzun bir satır olmak ister. Satır, Row'dan uzun olduğunda metin kaydırılabilecek olsa bile sağ taraftan taşar.

Metin kaydırılmaz çünkü Row, her alt öğenin istediği genişlikte olmasına izin verir. Metni Expanded içine alın; böylece bir genişlik kazanır: diğer alt öğelerin bıraktığı alan kadar. Genişliği olan bir metin daha fazla satıra kaydırılır.

Row(
  children: [
    const Icon(Icons.info),
    const Expanded(
      child: Text('A long sentence that now wraps instead of spilling out.'),
    ),
  ],
)

Bu, sağ taraftaki taşma için ilk çözümdür: küçülmesi gereken alt öğeye bir Expanded verin. Simge gibi zaten küçük olan bir bileşeni sarmalamak, uzun metin için hiçbir şeyi değiştirmez.

Görev

Kolay

Teslimat adresi sağ kenardan taşıyor. Ok satırın sağ kenarında kalırken adresin daha fazla satıra kaydırılmasını sağlayın.

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('Delivery')),
        body: Padding(
          padding: const EdgeInsets.all(16),
          child: Column(
            children: [
              Row(
                children: [
                  const Icon(Icons.location_on, color: Colors.red),
                  const SizedBox(width: 8),
                  const Text(
                    '221B Baker Street, Marylebone, London NW1 6XE, United Kingdom',
                  ),
                  const Icon(Icons.chevron_right),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}