Breakpoint LayoutBuilder

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

Di tablet, aplikasi email menampilkan menu di samping pesan. Di ponsel, tidak ada cukup ruang, jadi menu berada di atas. Lebar saat tata letak berubah disebut breakpoint.

LayoutBuilder memberi tahu kamu berapa banyak ruang yang dimiliki widget, dan memungkinkanmu membuat tampilan berbeda untuk setiap ukuran:

LayoutBuilder(
  builder: (context, constraints) {
    if (constraints.maxWidth < 600) {
      return Column(children: [menu, content]); // ponsel
    }
    return Row(children: [menu, content]); // tablet
  },
)

builder adalah fungsi yang dipanggil Flutter dengan ruang yang tersedia, di dalam constraints. constraints.maxWidth adalah lebar maksimum hasilnya. Di bawah 600 piksel, kamu mengembalikan Column; jika tidak, Row. Di ponsel dengan lebar 390 piksel, kamu melihat kolom; di tablet dengan lebar 1000 piksel, kamu melihat baris.

MediaQuery membaca seluruh layar. LayoutBuilder membaca ruang untuk satu widget, jadi tetap berfungsi saat widget itu berupa panel di dalam halaman yang lebih besar.

Tantangan

Sedang

Menu dan konten selalu berada berdampingan, sehingga terasa sesak di ponsel. Gunakan LayoutBuilder dengan titik henti pada 600 piksel:

lebih sempit dari 600: menu berada di atas konten, dalam Column
600 atau lebih lebar: berdampingan, dalam Row, seperti sekarang

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('Mail')),
        body: Row(
          children: [
            Expanded(
              child: Container(
                color: Colors.teal.shade100,
                child: const Center(child: Text('Menu')),
              ),
            ),
            Expanded(
              flex: 2,
              child: Container(
                color: Colors.white,
                child: const Center(child: Text('Content')),
              ),
            ),
          ],
        ),
      ),
    );
  }
}