As You can see here the top part of the app i can scroll from there but the rest i cannot
*I have tried everything, i wrapped my app in every scrollable widget and still nothing and in my ListView widget i have added the attribute "shrinkWrap: true," and this the code to that dart page : *
// ignore_for_file: prefer_const_constructors
import 'package:flutter/material.dart';
import 'dart:convert';
import '../utils/color_utils.dart';
import '../CarNFTClass/CarNFT.dart';
// ignore: constant_identifier_names
const NESTED_JSON =
'[{"id":1,"VIN":"2HNYD2H31CH575252","name":"2016 Nissan Sentra S","URI":"https:\/\/i.ebayimg.com\/images\/g\/zGUAAOSw0IVigfHT\/s-l1600.jpg","price":3330000000000000000},{"id":2,"VIN":"1C3CDFBA9DD259342","name":"1970 Dodge Dart","URI":"https:\/\/i.ebayimg.com\/images\/g\/2-kAAOSwJV1ii6BX\/s-l1600.jpg","price":2450000000000000000},{"id":3,"VIN":"1FTCR10UXPTA58797","name":"2004 Ford Ranger","URI":"https:\/\/i.ebayimg.com\/images\/g\/xYYAAOSwIPpifKvR\/s-l1600.jpg","price":4750000000000000000},{"id":4,"VIN":"JTDBL40E399060155","name":"2009 Toyota Corolla","URI":"https:\/\/editorials.autotrader.ca\/media\/183691\/2020-toyota-corolla-nightshade-03-di.jpg?anchor=center&mode=crop&width=1920&height=1080&rnd=132394433045670000","price":810000000000000000},{"id":5,"VIN":"JYARJ06E15A054699","name":"2005 Yamaha YZF-R6","URI":"https:\/\/www.bennetts.co.uk\/-\/media\/bikesocial\/2018-august-images\/yamaha-yzf-r6-46-used-guide\/2005_yzf-r6_studio03.ashx?h=554&la=en&w=740&hash=5A4BA9A9702FC46183CFF34A3B6838CE7720E909","price":1390000000000000000},{"id":6,"VIN":"3N1CB51D66L571142","name":"2006 Nissan Sentra","URI":"https:\/\/i.ebayimg.com\/images\/g\/S8QAAOSwp25imTok\/s-l1600.jpg","price":1090000000000000000}]';
class ListCar extends StatefulWidget {
const ListCar({Key? key}) : super(key: key);
@override
State<ListCar> createState() => _ListCarState();
}
class _ListCarState extends State<ListCar> {
Future<List<Car>> getDataFromFakeServer() async {
return await Future.delayed(Duration(seconds: 2), () {
List<dynamic> data = jsonDecode(NESTED_JSON);
List<Car> cars = data.map((data) => Car.fromJson(data)).toList();
return cars;
});
}
@override
Widget build(BuildContext context) {
final width = MediaQuery.of(context).size.width;
final height = MediaQuery.of(context).size.height;
return ListView(children: [
SizedBox(
height: 1700,
child: Scaffold(
body: Column(
children: [
Container(
height: 230,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
bottomRight: Radius.circular(100),
),
color: Color(0xFF363f93),
),
child: Stack(
children: [
Positioned(
top: 80,
left: 0,
child: Container(
height: 100,
width: 300,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
bottomRight: Radius.circular(50),
topRight: Radius.circular(50),
)),
)),
Positioned(
top: 115,
left: 20,
child: Text(
"Cytekia Cars",
style:
TextStyle(fontSize: 20, color: Color(0xFF363f93)),
))
],
),
),
SizedBox(
height: height * 0.05,
),
FutureBuilder<List<Car>>(
future: getDataFromFakeServer(),
builder: (context, data) {
if (data.connectionState != ConnectionState.waiting &&
data.hasData) {
var carList = data.data;
print(carList?.isEmpty);
return ListView.builder(
shrinkWrap: true,
itemCount: carList?.length,
itemBuilder: (context, index) {
var carData = carList![index];
return Container(
height: 230,
child: Stack(
children: [
Positioned(
top: 35,
left: 20,
child: Material(
child: Container(
height: 180,
width: width * 0.9,
decoration: BoxDecoration(
color: Colors.white,
borderRadius:
BorderRadius.circular(0.0),
boxShadow: [
BoxShadow(
color: Colors.grey
.withOpacity(0.5),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0,
3), // changes position of shadow
),
],
),
),
)),
Positioned(
top: 0,
left: 30,
child: Card(
elevation: 10.0,
shadowColor:
Colors.grey.withOpacity(0.5),
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(15.0),
),
child: Container(
height: 100,
width: 150,
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(10.0),
image: DecorationImage(
fit: BoxFit.fill,
image: NetworkImage(
"${carData.URI}"),
)),
),
)),
],
),
);
});
} else {
return Center(
child: CircularProgressIndicator(),
);
}
}),
],
),
),
),
]);
}
}
and this is my CarNFT.g.dart
// GENERATED CODE - DO NOT MODIFY BY HAND
part of 'CarNFT.dart';
// **************************************************************************
// JsonSerializableGenerator
// **************************************************************************
Car _$CarFromJson(Map<String, dynamic> json) => Car(
VIN: json['VIN'] as String,
name: json['name'] as String,
URI: json['URI'] as String,
price: (json['price'] as num).toDouble(),
id: json['id'] as int,
);
Map<String, dynamic> _$CarToJson(Car instance) => <String, dynamic>{
'id': instance.id,
'VIN': instance.VIN,
'name': instance.name,
'URI': instance.URI,
'price': instance.price,
};
and this is my CarNFT.dart
import 'package:json_annotation/json_annotation.dart';
part 'CarNFT.g.dart';
@JsonSerializable(explicitToJson: true)
class Car {
late int id;
String VIN, name, URI;
double price;
Car(
{required this.VIN,
required this.name,
required this.URI,
required this.price,
required this.id});
factory Car.fromJson(Map<String, dynamic> data) => _$CarFromJson(data);
Map<String, dynamic> toJson() => _$CarToJson(this);
}
CodePudding user response：
You can't have ListView inside another ListView unless you make the inner one unscrollable, because the app now has two lists inside each other and both are scrollable so he don't know how to handle both scrolls.
You can disable the scroll in a ListView By doing this
return ListView.builder(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemCount: carList?.length,
itemBuilder: (context, index) {},
);
CodePudding user response：
Have you tried to wrap your container with SingleChildScrollView? Something like this: Img
You probably have, but just in case. Otherwise, I've copied and tested your whole container after ListView builder, but it seems to be working fine.
Maybe if you could provide more details from your Car class, then I can try to reproduce it on my setup.