DEV Community 👩‍💻👨‍💻

Cover image for Flutter Responsive Tasarım
Gülsen Keskin
Gülsen Keskin

Posted on • Updated on

Flutter Responsive Tasarım

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. Build 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:

Height in Design / Width in Design = 
Height in Device / Width in Design

Tasarım yüksekliği / Tasarım genişliği = 
Cihaz yüksekliği / Tasarım genişliği

Enter fullscreen mode Exit fullscreen mode

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

final MediaQueryData mediaQueryData = MediaQuery.of(context);

final double deviceHeight = mediaQueryData.size.height;

final double deviceWidth = mediaQueryData.size.width;
Enter fullscreen mode Exit fullscreen mode

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:

final double responsiveWidth =
     (deviceWidth / 2) - padding - (spaceBetween / 2); 
Enter fullscreen mode Exit fullscreen mode

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.

final double responsiveHeight =
    (heightInDesign / widthInDesign) * responsiveWidth;
Enter fullscreen mode Exit fullscreen mode

Örnek kod:

final MediaQueryData mediaQueryData = MediaQuery.of(context);
final double deviceWidth = mediaQueryData.size.width;

final double heightInDesign = 260;
final double widthInDesign = 170;
final double padding = 18;
final double spaceBetween = 24;

final double responsiveWidth =
    (deviceWidth / 2) - padding - (spaceBetween / 2);

final double responsiveHeight =
    (heightInDesign / widthInDesign) * responsiveWidth;

return SingleChildScrollView(
  child: Padding(
    padding: EdgeInsets.symmetric(
      horizontal: padding,
    ),
    child: Row(
      children: [
        Container(
          height: responsiveHeight,
          width: responsiveWidth,
          color: Colors.grey,
          child: Column(
            children: [
              //card content for text and image
            ],
          ),
        ),
        SizedBox(
          width: spaceBetween,
        ),
        Container(
          height: responsiveHeight,
          width: responsiveWidth,
          color: Colors.grey,
          child: Column(
            children: [
              //card content for text and image
            ],
          ),
        )
      ],
    ),
  ),
);
Enter fullscreen mode Exit fullscreen mode

2. LayoutBuilder Class

Parent widget'ın boyutuna bağlı olan bir widget ağacı oluşturur.

Parent child'ın boyutunu sınırlandırdığında ve child'ın gerçek boyutuna bağlı olmadığında kullanışlıdır. LayoutBuilder'ın son boyutu child'ın boyutuyla eşleşir.

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blueGrey,
      body: LayoutBuilder(
        builder: (context, constraints) {
          return GridView.count(
            crossAxisCount: constraints.maxWidth < 800 ? 1 : 2,
            childAspectRatio: 1.7,
            padding: const EdgeInsets.all(16),
            crossAxisSpacing: 16,
            mainAxisSpacing: 16,
            children: const [
              Card(),
              Card(),
              Card(),
              Card(),
            ],
          );
        }
      ),
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

https://www.youtube.com/watch?v=9d0zUBHHY4o&t=4s

örnek kod:

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: MyStatelessWidget(),
    );
  }
}

class MyStatelessWidget extends StatelessWidget {
  const MyStatelessWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('LayoutBuilder Example')),
      body: LayoutBuilder(
        builder: (BuildContext context, BoxConstraints constraints) {
          if (constraints.maxWidth > 600) {
            return _buildWideContainers();
          } else {
            return _buildNormalContainer();
          }
        },
      ),
    );
  }

  Widget _buildNormalContainer() {
    return Center(
      child: Container(
        height: 100.0,
        width: 100.0,
        color: Colors.red,
      ),
    );
  }

  Widget _buildWideContainers() {
    return Center(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          Container(
            height: 100.0,
            width: 100.0,
            color: Colors.red,
          ),
          Container(
            height: 100.0,
            width: 100.0,
            color: Colors.yellow,
          ),
        ],
      ),
    );
  }
}

Enter fullscreen mode Exit fullscreen mode

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

Resources:
https://api.flutter.dev/flutter/widgets/MediaQuery/of.html
https://docs.flutter.dev/development/ui/layout/adaptive-responsive
https://api.flutter.dev/flutter/widgets/LayoutBuilder-class.html
https://stacksecrets.com/flutter/learn-to-make-responsive-design-in-flutter

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Good news! You can update to dark mode in your DEV settings.