Flutter ile Modern UI Tasarımı ve Performans Optimizasyonu

Flutter, Google'ın modern UI geliştirme framework'ü, güçlü widget sistemi ve performans özellikleriyle öne çıkıyor. Bu yazıda, Flutter ile modern ve performanslı uygulamalar geliştirmenin inceliklerini ele alacağız.

İçindekiler

• Flutter Widget Sistemi
• Material Design ve Cupertino
• Custom Widget Geliştirme
• Performans Optimizasyonu

Flutter Widget Sistemi

Flutter'ın widget sistemi, her şeyin bir widget olduğu felsefesine dayanır. İşte temel widget kullanımı örneği:

import 'package:flutter/material.dart';

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(16.0),
      child: Column(
        children: [
          Text('Merhaba Flutter!'),
          SizedBox(height: 8.0),
          ElevatedButton(
            onPressed: () {},
            child: Text('Tıkla'),
          ),
        ],
      ),
    );
  }
}
        

Material Design ve Cupertino

Flutter, hem Material Design hem de Cupertino tasarım dillerini destekler:

// Material Design örneği
MaterialApp(
  home: Scaffold(
    appBar: AppBar(
      title: Text('Material App'),
    ),
    body: Center(
      child: MaterialButton(
        onPressed: () {},
        child: Text('Material Button'),
      ),
    ),
  ),
);

// Cupertino örneği
CupertinoApp(
  home: CupertinoPageScaffold(
    navigationBar: CupertinoNavigationBar(
      middle: Text('Cupertino App'),
    ),
    child: Center(
      child: CupertinoButton(
        onPressed: () {},
        child: Text('Cupertino Button'),
      ),
    ),
  ),
);
        

Custom Widget Geliştirme

Özel widget'lar geliştirerek uygulamanızı daha modüler hale getirebilirsiniz:

class CustomCard extends StatelessWidget {
  final String title;
  final String description;
  final VoidCallback onTap;

  const CustomCard({
    Key? key,
    required this.title,
    required this.description,
    required this.onTap,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Card(
      child: InkWell(
        onTap: onTap,
        child: Padding(
          padding: EdgeInsets.all(16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                title,
                style: Theme.of(context).textTheme.headline6,
              ),
              SizedBox(height: 8.0),
              Text(description),
            ],
          ),
        ),
      ),
    );
  }
}
        

Performans Optimizasyonu

Flutter uygulamalarında performansı artırmak için kullanabileceğiniz bazı teknikler:

// const constructor kullanımı
const MyWidget({Key? key}) : super(key: key);

// ListView.builder ile lazy loading
ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text(items[index]),
    );
  },
);

// RepaintBoundary ile gereksiz yeniden çizimleri önleme
RepaintBoundary(
  child: MyExpensiveWidget(),
);