Flutter’da Sizer paketi Kullanımı

Flutter’da Sizer paketi, farklı ekran boyutlarına uyum sağlamak için widget’ların boyutlarını, yazı tipi boyutlarını ve diğer ölçüleri dinamik olarak ayarlamak için kullanılır. Bu paket, responsive tasarım yapmayı kolaylaştırır ve farklı cihazlarda tutarlı bir kullanıcı deneyimi sağlar.

Sizer Paketini Projeye Ekleme

import ‘package:flutter/material.dart’;
import ‘package:sizer/sizer.dart’;

void main() {
runApp(MyApp());
}

Cum soluta nobis est eligendi

×

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Sizer(
builder: (context, orientation, deviceType) {
return MaterialApp(
title: ‘Flutter Demo’,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
},
);
}
}

class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(‘Sizer Example’),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
‘Hello, World!’,
style: TextStyle(fontSize: 20.0.sp), // Yazı tipi boyutu
),
SizedBox(height: 2.0.h), // Yükseklik
Container(
width: 80.0.w, // Genişlik
height: 10.0.h, // Yükseklik
color: Colors.blue,
),
],
),
),
);
}
}

Sizer ile Kullanılan Birimler

• .w: Ekran genişliğinin yüzdesi olarak boyutlandırma.
• .h: Ekran yüksekliğinin yüzdesi olarak boyutlandırma.
• .sp: Yazı tipi boyutunu ekran boyutuna göre ölçeklendirme.
• .r: Ekran boyutuna göre yarıçap (radius) ölçeklendirme.

Örnekler

• 10.0.w: Ekran genişliğinin %10’u kadar genişlik.
• 20.0.h: Ekran yüksekliğinin %20’si kadar yükseklik.
• 15.0.sp: Ekran boyutuna göre ölçeklendirilmiş yazı tipi boyutu.
• 5.0.r: Ekran boyutuna göre ölçeklendirilmiş yarıçap.

Responsive Tasarım

Sizer paketi, farklı cihazlarda ve ekran boyutlarında tutarlı bir tasarım sağlamak için oldukça kullanışlıdır. Özellikle, farklı cihazlarda widget’ların boyutlarını ve yazı tipi boyutlarını otomatik olarak ayarlamak için idealdir.

Bu paket, Flutter’da responsive tasarım yapmayı kolaylaştırır ve farklı cihazlarda uygulamanızın daha iyi görünmesini sağlar.

Bu yazıya tepkin ne?

0 Beğendim 0 Sevdim 0 Komik 0 Vay Be 0 Üzücü 0 Sinir