LayoutBuilder Breakpoint’leri

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

Bir tablette, posta uygulaması menüyü iletilerin yanında gösterir. Telefonda yer olmadığından menü en üste taşınır. Yerleşimin değiştiği genişliğe kesme noktası denir.

LayoutBuilder, bir widget’ın ne kadar alana sahip olduğunu bildirir ve her boyut için farklı bir şey oluşturmanı sağlar:

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

builder, sahip olduğu alanı constraints içinde alarak Flutter’ın çağırdığı bir işlevdir. constraints.maxWidth, sonucun sahip olabileceği en büyük genişliktir. 600 pikselin altında bir Column; aksi hâlde bir Row döndürürsün. 390 piksellik bir telefonda sütunu, 1000 piksellik bir tablette satırı görürsün.

MediaQuery ekranın tamamını okur. LayoutBuilder ise tek bir widget’ın alanını okur; bu nedenle widget daha büyük bir sayfanın içindeki panel olduğunda da çalışmaya devam eder.

Görev

Orta

Menü ve içerik her zaman yan yana duruyor; bu da telefonda sıkışık oluyor. 600 pikselde bir kesme noktası kullanarak bir LayoutBuilder kullanın:

600'den dar: menü içeriğin üzerinde, bir Column içinde
600 veya daha geniş: şimdi olduğu gibi yan yana, bir Row içinde

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