Flutter, masaüstü uygulamaları geliştirmek için hangi…

Masaüstünde uyumlu tasarım için Flutter aşağıdaki imkanları sunar:

LayoutBuilder: Üst widget'in mevcut boyutlarına bağlı olarak farklı widget'lar oluşturmayı sağlar.

// LayoutBuilder örneği
LayoutBuilder(
  builder: (BuildContext context, BoxConstraints constraints) {
    if (constraints.maxWidth > 600) {
      return Center(child: Text('Büyük ekran'));
    } else {
      return Center(child: Text('Küçük ekran'));
    }
  },
)

MediaQuery: Cihazın ekran boyutu ve yön bilgilerine erişim sağlar, böylece uyumlu düzenler oluşturulabilir.

// MediaQuery örneği
double screenWidth = MediaQuery.of(context).size.width;
if (screenWidth > 800) {
  // Geniş ekran düzeni
} else {
  // Dar ekran düzeni
}

Uyumlu düzen widget'ları: Flutter, ListView, GridView, CustomScrollView, ExpansionTile gibi doğal olarak uyumlu widget'lar sunar.

// Uyarlanabilir GridView örneği
GridView.count(
  crossAxisCount: (MediaQuery.of(context).size.width / 150).floor(),
  children: List.generate(20, (index) {
    return Card(child: Center(child: Text('Item $index')));
  }),
)

Flexible ve Expanded: Row ve Column içinde uyumlu düzenler oluşturmak için kullanılır, widget'ların kullanılabilir alanı orantısal veya sabit boyutlarda kaplamasını sağlar.

// Flexible ve Expanded örneği
Row(
  children: <Widget>[
    Expanded(
      flex: 2, // Kullanılabilir alanın 2/3'ünü kaplar
      child: Container(color: Colors.red),
    ),
    Flexible(
      flex: 1, // Kullanılabilir alanın 1/3'ünü kaplar (en az minWidth kadar)
      child: Container(color: Colors.blue),
    ),
  ],
)

Uyumlu Material Design bileşenleri: Flutter'daki Material Design widget'ları, farklı form faktörleri için yerleşik uyumluluğa sahiptir.

// Navigasyon için Drawer örneği
Scaffold(
  appBar: AppBar(title: Text('Uygulama')),
  drawer: Drawer(
    child: ListView(
      children: const <Widget>[
        DrawerHeader(
          decoration: BoxDecoration(
            color: Colors.blue,
          ),
          child: Text('Menü'),
        ),
        ListTile(
          title: Text('Madde 1'),
        ),
      ],
    ),
  ),
  body: Center(child: Text('İçerik')),
)

Breakpoints (kırılma noktaları): Ekran genişliğine göre farklı düzenler arasında geçiş yapmak için kullanılır, genellikle MediaQuery veya LayoutBuilder ile uygulanır.

// Breakpoints kullanımı örneği
if (MediaQuery.of(context).size.width < 600) {
  // Mobil düzen
} else if (MediaQuery.of(context).size.width < 1200) {
  // Tablet düzeni
} else {
  // Masaüstü düzeni
}

Kaydırma davranışını ayarlama: Masaüstü için kaydırma davranışını özelleştirmeye imkan tanır (örneğin, fare tekerleği desteği).

// ScrollBehavior özelleştirme örneği
class MyCustomScrollBehavior extends ScrollBehavior {
  @override
  Set<PointerDeviceKind> get dragDevices => {
    PointerDeviceKind.touch,
    PointerDeviceKind.mouse,
  };
}

Uygulama:

// ListView'e uygulama
ScrollConfiguration(
  behavior: MyCustomScrollBehavior(),
  child: ListView(...),
)

Bu imkanlar, farklı pencere boyutlarına ve cihazlara uyum sağlayan ortak bir kod tabanı oluşturmanıza olanak tanır.

Flutter, masaüstü uygulamaları geliştirmek için hangi uyarlanabilirlik özelliklerini sunar?