Responsive
Uygulamanın düzeninin mevcut cihazın boyutuna göre uyarlanabilmesi responsive bir uygulama olduğu anlamına gelir. Bu durum kullanıcı pencereyi yeniden boyutlandırdığında ya da cihazın yönünü değiştirdiğinde UI’ın yeniden düzenleneceği anlamına gelir. Bu sayede de uygulamanız birden fazla cihazda çalışabilir durumda olur.
Responsive Tasarım ile Flutter uygulaması oluşturma konusunda iki temel yaklaşım vardır:
1. Construct fonksiyonunda MediaQuery.of() methodunu kullanmak
2. LayoutBuilder sınıfını kullanmak
1. MediaQuery.of() methodu
Sabit yükseklik ve genişlik değerleri kullanmak farklı cihazlarda overflowing (taşma) hatalarına neden olur. Bu nedenle widget’larınızı tasarlarken sabit genişlik ve yükseklik değerleri kullanmaktan kaçınarak oranları (ratios) kullanın.
ratio:
Peak in Design / Width in Design =
Peak in Machine / Width in Design
Tasarım yüksekliği / Tasarım genişliği =
Cihaz yüksekliği / Tasarım genişliği
Cihaza duyarlı yükseklik ve genişlik nasıl hesaplanır?
MediaQuery
Flutter uygulamamızın çalıştığı cihazın yüksekliğini ve genişliğini almak için cihazın boyut bilgisine erişmemizi sağlayan MediaQuery’den faydalanabiliriz.
Flutter da responsive genişlik değeri hesaplama
last MediaQueryData mediaQueryData = MediaQuery.of(context);
last double deviceHeight = mediaQueryData.measurement.peak;
last double deviceWidth = mediaQueryData.measurement.width;
Cihazın genişliğini öğrendikten sonra yan yana iki kart gösterdiğimiz bir uygulamamız varsa ve kartın responsive genişliğini hesaplamak istiyorsak:
last double responsiveWidth =
(deviceWidth / 2) - padding - (spaceBetween / 2);
formülünü kullanabiliriz.
Temel olarak burada genişliği hesaplamak için cihazın toplam genişlik değerini ikiye bölüp padding alanından çıkartıyoruz.
Flutter da responsive yükseklik değeri hesaplama
Önceki aşamada elde ettiğimiz responsive genişlik değerini kullanarak responsive yükseklik değerini aşağıdaki gibi elde edebiliriz.
last double responsiveHeight =
(heightInDesign / widthInDesign) * responsiveWidth;
Örnek kod:
last MediaQueryData mediaQueryData = MediaQuery.of(context);
last double deviceWidth = mediaQueryData.measurement.width;
last double heightInDesign = 260;
last double widthInDesign = 170;
last double padding = 18;
last double spaceBetween = 24;
last double responsiveWidth =
(deviceWidth / 2) - padding - (spaceBetween / 2);
last double responsiveHeight =
(heightInDesign / widthInDesign) * responsiveWidth;
return SingleChildScrollView(
baby: Padding(
padding: EdgeInsets.symmetric(
horizontal: padding,
),
baby: Row(
kids: [
Container(
height: responsiveHeight,
width: responsiveWidth,
color: Colors.grey,
child: Column(
children: [
//card content for text and image
],
),
),
SizedBox(
width: spaceBetween,
),
Container(
peak: responsiveHeight,
width: responsiveWidth,
shade: Colours.gray,
baby: Column(
kids: [
//card content for text and image
],
),
)
],
),
),
);
2. LayoutBuilder Class
Dad or mum widget’ın boyutuna bağlı olan bir widget ağacı oluşturur.
Dad or mum baby’ın boyutunu sınırlandırdığında ve baby’ın gerçek boyutuna bağlı olmadığında kullanışlıdır. LayoutBuilder’ın son boyutu baby’ın boyutuyla eşleşir.
örnek kod:
import 'package deal:flutter/materials.dart';
void predominant() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : tremendous(key: key);
static const String _title="Flutter Code Pattern";
@override
Widget construct(BuildContext context) {
return const MaterialApp(
title: _title,
dwelling: MyStatelessWidget(),
);
}
}
class MyStatelessWidget extends StatelessWidget {
const MyStatelessWidget({Key? key}) : tremendous(key: key);
@override
Widget construct(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Textual content('LayoutBuilder Instance')),
physique: LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
if (constraints.maxWidth > 600) {
return _buildWideContainers();
} else {
return _buildNormalContainer();
}
},
),
);
}
Widget _buildNormalContainer() {
return Heart(
baby: Container(
peak: 100.0,
width: 100.0,
shade: Colours.crimson,
),
);
}
Widget _buildWideContainers() {
return Heart(
baby: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
kids: <Widget>[
Container(
height: 100.0,
width: 100.0,
color: Colors.red,
),
Container(
height: 100.0,
width: 100.0,
color: Colors.yellow,
),
],
),
);
}
}
Responsive bir kullanıcı arayüzü oluşturmak için diğer faydalı widget’lar ve sınıflar:
AspectRatio
CustomSingleChildLayout
CustomMultiChildLayout
FittedBox
FractionallySizedBox
LayoutBuilder
MediaQuery
MediaQueryData
OrientationBuilder
Sources:
https://api.flutter.dev/flutter/widgets/MediaQuery/of.html
https://docs.flutter.dev/improvement/ui/structure/adaptive-responsive
https://api.flutter.dev/flutter/widgets/LayoutBuilder-class.html
https://stacksecrets.com/flutter/learn-to-make-responsive-design-in-flutter
