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 ditempatkan di atas. Lebar saat tata letak berubah disebut breakpoint.

LayoutBuilder memberi tahu kamu berapa banyak ruang yang dimiliki sebuah widget, dan memungkinkan kamu membuat tampilan yang 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 constraints. constraints.maxWidth adalah lebar maksimum hasilnya. Jika lebarnya kurang dari 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, sehingga tetap berfungsi saat widget tersebut berupa panel di dalam halaman yang lebih besar.

Tantangan

Sedang

Menu dan konten selalu 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')),
              ),
            ),
          ],
        ),
      ),
    );
  }
}