1-) FLUTTER - Responsive uygulama geliştirme Tasarım Mobil ve Web Uyumlu ve Boyut Esnekliği Design
flutter web run
flutter run -d chrome --web-renderer html
buradan free lere gözat : https://www.flutterlibrary.com/framework/flutter
admin theme go router kullanılabilir : https://www.flutterlibrary.com/templates/responsive-admin-dashboard
1- cihazı tahmin etme
import 'package:flutter/material.dart';
|
2- kullanımı
if (!Responsive.isMobile(context)) gapW16,
|
body: Container(
constraints: BoxConstraints(
maxWidth: 200, // Maksimum genişlik sınırlaması
),
LayoutBuilder KULLANIMI
Flutter ile responsive tasarım yapmak için birkaç temel prensip ve widget kullanabilirsiniz. Responsive tasarım, uygulamanızın farklı ekran boyutlarına ve yönelimlerine uyum sağlamasını sağlar. İşte Flutter ile responsive tasarım yapmanın bazı yolları:
1. MediaQuery Kullanımı
MediaQuery widget'ı, cihazın ekran boyutlarını ve diğer fiziksel özelliklerini elde etmenizi sağlar. Aşağıdaki örnekte, ekran genişliğini kullanarak bir widget'ın boyutunu ayarlayabilirsiniz:
dart
Kodu kopyala
import 'package:flutter/material.dart';
class ResponsiveLayout extends StatelessWidget {
@override
Widget build(BuildContext context) {
var screenWidth = MediaQuery.of(context).size.width;
return Scaffold(
appBar: AppBar(title: Text('Responsive Layout')),
body: Center(
child: Container(
width: screenWidth * 0.8, // Ekran genişliğinin %80'i
height: 200,
color: Colors.blue,
),
),
);
}
}
2. LayoutBuilder Kullanımı
LayoutBuilder widget'ı, parent widget'ın boyutlarına erişmenizi sağlar ve buna göre farklı widget'lar gösterebilirsiniz:
dart
Kodu kopyala
import 'package:flutter/material.dart';
class ResponsiveLayout extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Responsive Layout')),
body: LayoutBuilder(
builder: (context, constraints) {
if (constraints.maxWidth < 600) {
return Column(
children: [
Text('Small Screen'),
Container(
height: 100,
color: Colors.red,
),
],
);
} else {
return Row(
children: [
Expanded(
child: Container(
height: 100,
color: Colors.red,
),
),
Expanded(
child: Container(
height: 100,
color: Colors.green,
),
),
],
);
}
},
),
);
}
}
3. Flexible ve Expanded Kullanımı
Flexible ve Expanded widget'ları, widget'ların esnekliğini ve ekran boyutlarına göre nasıl genişleyeceklerini kontrol etmenizi sağlar:
dart
Kodu kopyala
import 'package:flutter/material.dart';
class ResponsiveLayout extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Responsive Layout')),
body: Row(
children: [
Expanded(
flex: 2,
child: Container(
height: 100,
color: Colors.red,
),
),
Expanded(
flex: 1,
child: Container(
height: 100,
color: Colors.green,
),
),
],
),
);
}
}
4. OrientationBuilder Kullanımı
OrientationBuilder widget'ı, cihazın yönelimini kontrol eder ve farklı yönelimlere göre farklı düzenler sunar:
dart
Kodu kopyala
import 'package:flutter/material.dart';
class ResponsiveLayout extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Responsive Layout')),
body: OrientationBuilder(
builder: (context, orientation) {
if (orientation == Orientation.portrait) {
return Column(
children: [
Text('Portrait Mode'),
Container(
height: 100,
color: Colors.blue,
),
],
);
} else {
return Row(
children: [
Text('Landscape Mode'),
Container(
height: 100,
color: Colors.orange,
),
],
);
}
},
),
);
}
}
Bu teknikler ve widget'lar, Flutter ile responsive tasarımlar oluşturmanıza yardımcı olacaktır. Uygulamanızın kullanıcı deneyimini iyileştirmek için bu yöntemleri projelerinizde kullanabilirsiniz.