How can I wrap the height of the ListView.builder with a Container? - flutter

Question

I have a screen using ListView.builder.
I gave the background of the list a light color with Container and I gaved BorderRadius.circular it.
Like here. I want this background to wrap the list. Like this.
Curves must to be at the beginning and end of the list.
I've tried:
I gave a physics: NeverScrollableScrollPhysics() to the ListView.builder. I wrapped the first Container with a SingleChildScrollView. Although background continues below I must to give a height. But I don't know how long the list will be. So that method did not work.
What am I missing?
Full code below
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
canvasColor: Colors.green,
primaryColor: Colors.green,
accentColor: Colors.white,
),
home: ListScreen(),
);
}
}
class ListScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Hello"),
),
body: Padding(
padding: const EdgeInsets.all(16),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(22),
color: Colors.white38,
),
child: ListView.builder(
itemBuilder: (context, index) {
return Container(
child: Column(
children: [
InkWell(
onTap: () {},
child: Container(
height: MediaQuery.of(context).size.height / 7,
alignment: Alignment.center,
child: ListTile(
leading: Padding(
padding: const EdgeInsets.all(0),
child: Container(
child: ClipRRect(
borderRadius: BorderRadius.circular(6),
child: Image.network(
"https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg/330px-Ash_Tree_-_geograph.org.uk_-_590710.jpg",
fit: BoxFit.cover,
),
),
),
),
title: Text(
"${index + 1}. Tree",
),
),
),
),
Divider(
color: Colors.white,
height: 0,
),
],
),
);
},
itemCount: 12,
),
),
));
}
}

Answer 1

The way tried in the question was correct. It is only necessary to add shrinkWrap: true to the ListView.builder().
It will look like this:
SingleChildScrollView(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(22),
color: Colors.white38,
),
child: ListView.builder(
itemBuilder: (context, index) {
return Container(//builder);
},
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemCount: list.length,
),
),
),

Answer 2

The ListView widget is simply the stationary window on the screen that the child widgets scroll through. In order to achieve the desired effect, you need to use BorderRadius.only to round the correct corners of the first and last children of the ListView.

Answer 3

You are on the correct path here
I've tried: I gave a physics: NeverScrollableScrollPhysics() to the ListView.builder. I wrapped the first Container with a SingleChildScrollView. Although background continues below I must to give a height. But I don't know how long the list will be. So that method did not work.
in addition this this,
what you are missing here is using Expanded widget using expanding widget let the child expand as much as it want try this
Padding(
padding: const EdgeInsets.all(16),
child: Expanding(
child:Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(22),
color: Colors.white38,
),
child: ListView.builder(
// your ListView.builder code here with neverScrollablePhysics
),
),
))
remember to wrap this all a singleChildScrollView() and maybe use a Column() too