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.
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!!!