Memperbaiki Luapan: Menggulir

Termasuk bagian Layout yang Menyesuaikan dalam perjalanan Flutter di Coddy. Pelajaran 7 dari 30.

Column yang memiliki lebih banyak child daripada yang dapat ditampung layar akan meluap di bagian bawah. Tinggi ponsel terbatas, dan Column tidak menggulir sendiri.

Bungkus dengan SingleChildScrollView. Dengan begitu, kolom dapat setinggi yang dibutuhkan, lalu kamu dapat menyeret layar untuk melihat sisanya:

SingleChildScrollView(
  child: Column(
    children: [
      // sebanyak mungkin children sesuai keinginanmu
    ],
  ),
)

Ini solusi untuk halaman yang lebih panjang daripada layar: halaman pengaturan, formulir, artikel. Untuk daftar panjang berisi item sejenis, ListView yang sudah kamu kenal melakukan hal yang sama.

Tampilan gulir membungkus seluruh kolom. Membungkus setiap child dengan tampilan gulir tersendiri membuat kolom tetap setinggi sebelumnya.

Tantangan

Mudah

Daftar hari dalam seminggu meluap di bagian bawah. Buat halaman bisa digulir agar kamu dapat mencapai Sunday.

Coba sendiri

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))),
                ),
            ],
          ),
        ),
      ),
    );
  }
}