Taşma Çözümü: Kaydırma

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

Ekranın sığdırabileceğinden daha fazla çocuğu olan bir Column, alt taraftan taşar. Telefonun yüksekliği sınırlıdır ve bir Column kendi kendine asla kaydırılmaz.

Onu bir SingleChildScrollView içine sar. Böylece sütun gerektiği kadar uzayabilir ve geri kalanını görmek için ekranı sürüklersin:

SingleChildScrollView(
  child: Column(
    children: [
      // istediğiniz kadar alt öğe
    ],
  ),
)

Ekrandan daha uzun bir sayfa için çözüm budur: ayarlar sayfası, form veya makale. Aynı türde çok sayıda öğeden oluşan uzun bir liste için, zaten bildiğin ListView aynı işi yapar.

Kaydırma görünümü tüm sütunun etrafını sarar. Her çocuğu kendi kaydırma görünümüne sarmak, sütunu yine önceki kadar uzun bırakır.

Görev

Kolay

Hafta alt taraftan taşıyor. Sayfayı kaydırılabilir hâle getir, böylece Sunday'e ulaşabilirsin.

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) {
    final days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text('This Week')),
        body: Padding(
          padding: const EdgeInsets.all(16),
          child: Column(
            children: [
              for (final day in days)
                Container(
                  height: 120,
                  margin: const EdgeInsets.only(bottom: 12),
                  decoration: BoxDecoration(
                    color: Colors.lightBlue.shade100,
                    borderRadius: BorderRadius.circular(12),
                  ),
                  child: Center(child: Text(day, style: const TextStyle(fontSize: 20))),
                ),
            ],
          ),
        ),
      ),
    );
  }
}