skip to Main Content

I’m making an application in Flutter but the items don’t fit on the screen, when I want to use ListView the position of the items get mixed up and it looks terrible, how can I edit these codes?

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(),
    ),
  );
}

I tried various listview methods, I tried column but I couldn’t get any result, I think I need to remove it from the stack tag but in this case I can’t get the design I want.

2

Answers


  1. Chosen as BEST ANSWER

    Ok guys i am solved this problem!!!

    Result: Remove stack and again edit is codes (widgets and item positions) and you do should wrap body with singlechildscrollview and finsh!!!


  2. this is answer

    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: SingleChildScrollView(
            child: 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'),
                          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,
                          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,
                                height: screenHeight * 0.1,
                                margin: EdgeInsets.symmetric(horizontal: 5.0),
                                decoration: BoxDecoration(
                                  color: Colors.white,
                                  borderRadius: BorderRadius.circular(12.0),
                                ),
                              );
                            },
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
        );
      }
    
      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(),
        ),
      );
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search