Arkadaslar merhaba ben bir uygulama gelistiriyorum tasarimin anasayfasinda bir cok item var ama bunlar dogal olarak sigmiyor bende ListView veya turevi bir sey ekledigim zama sayfa corba gibi oluyor tam olarak sorun ne anlamiyorum yazdigim kodu ve ListView kullaninca cikan sonucu buraya birakiyorum.

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  late double screenWidth;
  late double screenHeight;

  @override
  Widget build(BuildContext context) {
    screenWidth = MediaQuery.of(context).size.width;
    screenHeight = MediaQuery.of(context).size.height;

    return Scaffold(
      body: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            colors: [
              Color.fromRGBO(0, 0, 0, 1.0),
              Color.fromRGBO(69, 60, 60, 1.0),
            ],
          ),
        ),
        child: Stack(
          children: [
            // Sol üst köşe - Logo
            Positioned(
              top: screenHeight * 0.04,
              left: screenWidth * 0.05,
              child: Container(
                width: screenWidth * 0.1,
                height: screenHeight * 0.1,
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: AssetImage('assets/logo.png'), // Logo resminin yolu
                    fit: BoxFit.cover,
                  ),
                ),
              ),
            ),
            // Sağ üst köşe - Arama Butonu
            Positioned(
              top: screenHeight * 0.05,
              right: screenWidth * 0.03,
              child: IconButton(
                icon: Icon(Icons.search),
                color: Colors.white,
                iconSize: screenWidth * 0.06,
                onPressed: () {
                  // Arama butonuna tıklandığında yapılacak işlemler
                },
              ),
            ),
            // Alt kenar - Butonlar
            Positioned(
              top: screenHeight * 0.14,
              left: screenWidth * 0.05,
              right: screenWidth * 0.4,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Expanded(child: buildButton("Kitaplar")),
                  SizedBox(
                    width: 10.0,
                  ),
                  Expanded(child: buildButton("Makaleler")),
                  SizedBox(
                    width: 10.0,
                  ),
                  Expanded(child: buildButton("Kategoriler")),
                ],
              ),
            ),
            // Resmin üzerindeki butonlar
            Center(
              child: Stack(
                children: [
                  Container(
                    width: screenWidth * 0.8,
                    height: screenHeight * 0.6, // Resmin yüksekliği
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(screenWidth * 0.04),
                      border:
                          Border.all(color: Color.fromRGBO(69, 60, 60, 1.0)),
                      image: DecorationImage(
                        image:
                            AssetImage('assets/pics/beyond good and evil.jpg'),
                        fit: BoxFit.cover,
                      ),
                    ),
                  ),
                  // Resmin üzerindeki butonlar
                  Positioned(
                    bottom: screenHeight * 0.02,
                    left: screenWidth * 0.10,
                    child: Container(
                      height: screenHeight * 0.05,
                      width: screenWidth * 0.25,
                      decoration: BoxDecoration(
                          borderRadius:
                              BorderRadius.circular(screenWidth * 0.02),
                          color: Colors.white),
                      child: Row(
                        children: [
                          IconButton(
                            icon: Icon(Icons.visibility),
                            iconSize: screenWidth * 0.04,
                            color: Colors.black,
                            onPressed: () {},
                          ),
                          Text(
                            'Oku',
                            style: TextStyle(
                                color: Colors.black,
                                fontSize: screenWidth * 0.04),
                          ),
                        ],
                      ),
                    ),
                  ),
                  SizedBox(
                    width: 10.0,
                  ),
                  Positioned(
                    bottom: screenHeight * 0.02,
                    left: screenWidth * 0.37,
                    child: Container(
                      height: screenHeight * 0.05,
                      width: screenWidth * 0.33,
                      decoration: BoxDecoration(
                          borderRadius:
                              BorderRadius.circular(screenWidth * 0.02),
                          color: Colors.white),
                      child: Row(
                        children: [
                          IconButton(
                            icon: Icon(Icons.add),
                            iconSize: screenWidth * 0.05,
                            color: Colors.black,
                            onPressed: () {},
                          ),
                          Text(
                            'Listem',
                            style: TextStyle(
                                color: Colors.black,
                                fontSize: screenWidth * 0.04),
                          ),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),
            // Beyaz kutuların listesi
            Positioned(
              bottom: screenHeight * 0.2 / 9,
              left: screenWidth * 0.05,
              right: screenWidth * 0.05,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    'Yeni Kitaplar:',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: screenWidth * 0.04,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  SizedBox(height: 8.0),
                  Container(
                    height: screenHeight * 0.2,
                    child: ListView.builder(
                      scrollDirection: Axis.horizontal,
                      itemCount: 10,
                      itemBuilder: (context, index) {
                        return Container(
                          width: screenWidth * 0.20, // Kutu uzunluğu
                          height: screenHeight * 0.1,
                          margin: EdgeInsets.symmetric(horizontal: 5.0),
                          decoration: BoxDecoration(
                            color: Colors.white,
                            borderRadius:
                                BorderRadius.circular(12.0), // Kutu kalınlığı
                          ),
                        );
                      },
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget buildButton(String text) {
    return Container(
      width: screenWidth * 0.2,
      height: screenHeight * 0.04,
      decoration: BoxDecoration(
        color: Colors.black,
        borderRadius: BorderRadius.circular(screenWidth * 0.05),
        border: Border.all(
          color: Colors.white,
        ),
      ),
      child: Center(
        child: Text(
          text,
          style: TextStyle(
            color: Colors.white,
            fontSize: screenWidth * 0.020,
          ),
        ),
      ),
    );
  }
}

void main() {
  runApp(
    MaterialApp(
      home: HomePage(),
    ),
  );
}

ListView kullaninca sonuc: [https://freeimage.host/i/image-2024-01-29-232538792.Jc4prD7](https://)

  • HseyinAkkaya replied to this.
    • Tekrardan merhabalar arkadaslar soruyu guncellemek icin yaziyorum, problemi cozdum ve benim gibi yasayanlar icin yaziyorum. oncelikle sayfanizda ki stackleri kaldirin cunku bu sorunun sebebi stack kullanimi, daha sonra stack icinde ki ogelerinizi tekrar konumlandirim ve diger parametreleri duzenleyin en sonunda body kismini SingleChildScrollView ile baslatin(sayfada ki her sey bu body parametresi icinde olacak) uygulamayi tekrar baslattiginizda sayfaniz temiz bir sekilde goruntulenecek.

    Tekrardan merhabalar arkadaslar soruyu guncellemek icin yaziyorum, problemi cozdum ve benim gibi yasayanlar icin yaziyorum. oncelikle sayfanizda ki stackleri kaldirin cunku bu sorunun sebebi stack kullanimi, daha sonra stack icinde ki ogelerinizi tekrar konumlandirim ve diger parametreleri duzenleyin en sonunda body kismini SingleChildScrollView ile baslatin(sayfada ki her sey bu body parametresi icinde olacak) uygulamayi tekrar baslattiginizda sayfaniz temiz bir sekilde goruntulenecek.

    mhalildemirci SingleChildScroolView deneyebilirsin. Stack ve positioned ve container’lar çok içe içe olduğu için muhtemelen üst üste çok biniyorlar. Tavisyem bir singlechildscroolview içinde bir column tanımlayıp içinde

    1. row içerisinde logo ve arama butonunu koy
    2. 2.row içinde “Resmin ve üzerindeki butonlar” kısmını yap
    3. 3.row’da “yeni kitaplar texti”
    4. rowda beyaz kutuları yap
      positioned ile tüm sayfayı tasarlaman gerçekten zor olur ve yeni item eklemek istediğinde yer açmak için posizyonlarla oynaman veya itemleri db’den çektiğinde item sayısı belli olmadığı için ekranı oluşturman zorlaşacaktır diye düşünüyorum. bir item diğerinin üstünde olsun istedğinde kullanabilirsin tabi. Ama altında yanında vs olsun istediğinde positioned yorabilir.
      Write a Reply...