I want to create a canvas that the entire column is slideable. But the way I did (code below) in the listview.builder the scroll doesn't work. How could I resolve this? I need the full screen scroll to work.
I also tried using Expanded in the listview, it would work but the top text and bottom container are fixed, I don't want that.
I'm new to mobile development, kinda confused hahaha. The code:
class _CursosPageState extends State<CursosPage> {
int count = 4;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Container(
color: Colors.white,
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(height: 15),
Text(
'text text text',
style: TextStyle(fontSize: 20),
),
// Expanded(
// child:
ListView.builder(
shrinkWrap: true,
itemCount: count,
itemBuilder: (BuildContext context, int index) {
return Container(
margin: EdgeInsets.all(10),
height: 150,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(10),
),
);
},
),
// ),
Center(
child: Container(
height: 150,
width: 300,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(10),
),
),
)
],
),
),
),
);
}
}
CodePudding user response:
You don't need to use SingleChildScrollView
, You can use ListView as Toplevel widget.
class _CursosPageState extends State<CursosPage> {
int count = 4;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: ListView(
children: [
Container(
color: Colors.white,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(height: 15),
Text(
'text text text',
style: TextStyle(fontSize: 20),
),
for (int i = 0; i < count; i )
Container(
margin: EdgeInsets.all(10),
height: 150,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(10),
),
),
Center(
child: Container(
height: 150,
width: 300,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(10),
),
),
)
],
),
),
],
),
);
}
}
Or have fixed Text on top
class _CursosPageState extends State<CursosPage> {
int count = 4;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Container(
color: Colors.white,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(height: 15),
Text(
'text text text',
style: TextStyle(fontSize: 20),
),
Expanded(
child: ListView.builder(
shrinkWrap: true,
itemCount: count,
itemBuilder: (BuildContext context, int index) {
return Container(
margin: EdgeInsets.all(10),
height: 150,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(10),
),
);
},
),
),
Center(
child: Container(
height: 150,
width: 300,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(10),
),
),
)
],
),
),
);
}
}
Once you are flexible with listView you can use CustomScrollView for complex scenario
CodePudding user response:
If I understand you well, you want this:
int count = 4;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: ListView(
// crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
const SizedBox(height: 15),
const Text(
'text text text',
style: TextStyle(fontSize: 20),
),
ListView.builder(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
itemCount: count,
itemBuilder: (BuildContext context, int index) {
return Column(
children: <Widget>[
Container(
margin: const EdgeInsets.all(10),
height: 150,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(10),
),
),
],
);
},
),
Center(
child: Container(
height: 150,
width: 300,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(10),
),
),
)
],
),
);
}
Let me know if this works for you.