Reputation: 51
I have a question. At the beginning of the screen, that's how cards looks like:
There is big space between elements from ListView
and element at the top. When I scroll down the space is decreasing.
How can I remove this big gap at the beginning so that the gap will be equal to the gap when I scroll down ? I do not know from where it came from. The code:
import 'dart:convert';
import 'dart:io';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:.../constants/AppConstants.dart';
import 'package:.../ui/pages/home/page/Advertisement.dart';
import 'package:.../util/HttpActions.dart';
import 'Advertisement.dart';
import 'BottomAppBar.dart';
import 'FAB.dart';
class HomePage extends StatefulWidget {
final String jwt;
const HomePage(this.jwt);
@override
_HomePage createState() => _HomePage();
factory HomePage.fromBase64(String jwt) => HomePage(jwt);
}
class _HomePage extends State<HomePage> {
late final String jwt;
late Future<List<Items>> _listOfItems;
final searchTextController = TextEditingController();
@override
void initState() {
super.initState();
jwt = widget.jwt;
_listOfItems = fetchAdvertisements();
}
@override
Widget build(BuildContext context) => Scaffold(
body: Scaffold(
backgroundColor: const Color(0xFEF9F9FC),
floatingActionButtonLocation:
FloatingActionButtonLocation.centerDocked,
floatingActionButton: buildFAB(),
bottomNavigationBar: BuildBottomAppBar(),
body: Container(
padding: EdgeInsets.only(left: 25.0, right: 25, top: 20),
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: Column(
children: [
TextFormField(
controller: searchTextController,
decoration: InputDecoration(
border: OutlineInputBorder(),
hintText: 'Szukaj',
fillColor: Color(0xffd4d4d4),
filled: true),
),
FutureBuilder<List<Items>>(
future: _listOfItems,
builder: (context, snapshot) {
if (!snapshot.hasData) {
return Center(child: CircularProgressIndicator());
} else {
return Expanded(
child: Padding(
padding: const EdgeInsets.only(bottom: 30, top: 5),
child: ListView.separated(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: snapshot.data!.length,
itemBuilder: (BuildContext context, int index) =>
advertisementCard(snapshot.data![index], context),
separatorBuilder: (BuildContext context, int index) {
return SizedBox(
height: 10,
);
},
),
),
);
}
},
),
],
),
),
),
);
Future<List<Items>> fetchAdvertisements() async {
var response = await HttpActions.makeHttpGet(
{},
AppConstants.ADVERTISEMENTS_ENDPOINT,
{HttpHeaders.contentTypeHeader: HttpActions.APPLICATION_JSON_HEADER},
);
if (response.statusCode == 200) {
var advertisement = Advertisement.fromJson(
json.decode(utf8.decode(response.bodyBytes)),
);
return advertisement.items;
} else {
throw Exception('Failed to load advertisements');
}
}
Container advertisementCard(Items data, BuildContext context) {
return Container(
height: MediaQuery.of(context).size.height * 0.17,
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(9.0),
side: BorderSide(
color: Color(0xFE8BA9E2),
),
),
child: LayoutBuilder(
builder: (context, constraints) => Row(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Image.network(
'https://image.ceneostatic.pl/data/products/68753970/i-motorowka-yamaha-242-limited-s-model-2019-szamocin.jpg',
fit: BoxFit.cover,
width: constraints.maxWidth * 0.4 - (8.0 * 2),
height: constraints.maxHeight * 0.8,
),
),
SizedBox(
width: constraints.maxWidth * 0.6,
child: Padding(
padding: const EdgeInsets.all(4.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
data.title,
overflow: TextOverflow.ellipsis,
softWrap: true,
style: GoogleFonts.sourceSerifPro(
fontWeight: FontWeight.w700,
fontStyle: FontStyle.normal,
),
),
SizedBox(
height: constraints.maxHeight * .4,
),
Text(
"Miasto: " + data.city,
style: GoogleFonts.sourceSerifPro(),
),
Text(
"Pierwszy dzień: 20 zł",
style: GoogleFonts.sourceSerifPro(),
),
],
),
),
),
],
),
),
),
);
}
}
Upvotes: 0
Views: 304
Reputation: 676
You just need to set the Padding
to zero.
ListView.separated(
padding: EdgeInsets.zero, // <-- add this line
.......
Upvotes: 1