how can i scroll up and down on my flutter app

Question

Widget tree

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

Answer 1

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

Answer 2

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.

• MohamedDhia BENAMAR: the thing i also tested it and went fine (the container after listview builder) on its own but it began falling apart after adding all those other widgets