Lebar Maksimum

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

Kartu dengan teks panjang akan melebar hingga selebar layar. Di ponsel, tampilannya baik-baik saja. Namun, di tablet, kartu yang sama membentang menjadi satu baris sepanjang seribu piksel, sehingga sulit dibaca.

ConstrainedBox menetapkan batas ukuran widget anaknya. maxWidth: adalah ukuran maksimum yang dapat dicapai:

ConstrainedBox(
  constraints: const BoxConstraints(maxWidth: 400),
  child: Container(...),
)

Di layar yang lebarnya kurang dari 400 piksel, kartu tetap menyusut agar muat. Di layar yang lebih lebar, ukurannya berhenti di 400, dan teks membungkus menjadi lebih banyak baris.

BoxConstraints juga menerima minWidth:, minHeight:, dan maxHeight:. Nilai minimum adalah ukuran terkecil widget anak, jadi batas ini tidak pernah mencegahnya bertambah besar.

Tantangan

Mudah

Buat kartu kutipan tetap mudah dibaca di layar lebar: biarkan lebarnya bertambah hingga maksimal 320 piksel.

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) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text('Quote of the Day')),
        body: Padding(
          padding: const EdgeInsets.all(16),
          child: Center(
            child: Container(
              padding: const EdgeInsets.all(24),
              decoration: BoxDecoration(
                color: Colors.amber.shade100,
                borderRadius: BorderRadius.circular(16),
              ),
              child: const Text(
                'The best way to learn to build apps is to build apps, one small screen at a time.',
                style: TextStyle(fontSize: 20),
              ),
            ),
          ),
        ),
      ),
    );
  }
}