I have this flutter home.dart. The thing is that I can't scroll to down or up with the same home.dart. I want to make it scrollable. Here is the code. The first widget is working with scrolling but the last two aren't. Please help me. I have tried looking for the solution but all in vain.
import 'package:flutter/material.dart';
import 'package:nyimboo_app/screens/auth/unlogged_nav.dart';
class HomePage extends StatefulWidget {
const HomePage({ Key? key }) : super(key: key);
@override
State<HomePage> createState() => _HomePageState();
}
List toolsn = [
"Yesai", "Vlog", "Laka", "Vlog" , "Vlog"
];
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
Widget horizontalList1 = new Container(
margin: EdgeInsets.symmetric(vertical: 20.0),
height: 200.0,
child: new ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
Container(width: 150.0, color: Colors.red,),
SizedBox(width: 5.0,),
Container(width: 150.0, color: Colors.black,),
SizedBox(width: 5.0,),
Container(width: 150.0, color: Colors.teal,),
SizedBox(width: 5.0,),
Container(width: 150.0, color: Colors.black,),
SizedBox(width: 5.0,),
],
)
);
ListTile makeLessonListTile() => ListTile(
contentPadding:
EdgeInsets.symmetric(horizontal: 5.0, vertical: 10.0),
leading: SingleChildScrollView(
child: Container(
padding: EdgeInsets.only(right: 12.0),
decoration: new BoxDecoration(
border: new Border(
right: new BorderSide(width: 1.0, color: Colors.white24))),
child: IconButton(
onPressed: () {},
icon: Icon(Icons.close, color: Colors.white), // Hardcoded to be 'x'
),
),
),
title: Text(
"Yesai",
style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
),
subtitle: Row(
children: <Widget>[
Expanded(
flex: 1,
child: Container(
child: LinearProgressIndicator(
backgroundColor: Color.fromRGBO(209, 224, 224, 0.2),
//value: lesson.indicatorValue,
valueColor: AlwaysStoppedAnimation(Colors.green)),
)),
Expanded(
flex: 4,
child: Padding(
padding: EdgeInsets.only(left: 10.0),
child: Text("Level",
style: TextStyle(color: Colors.white))),
)
],
),
trailing:
Icon(Icons.keyboard_arrow_right, color: Colors.white, size: 30.0),
onTap: () {
},
);
Card makeLessonCard(toolsn) => Card(
elevation: 8.0,
margin: new EdgeInsets.symmetric(horizontal: 5.0, vertical: 5.0),
child: Container(
decoration: BoxDecoration(color: Color.fromRGBO(64, 75, 96, .9)),
child: makeLessonListTile(),
),
);
// the scaffold body
final makeLessonBody = Container(
child: ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: toolsn.length,
itemBuilder: (BuildContext context, int index) {
return makeLessonCard(toolsn[index]);
},
),
);
final List<Map> myProducts =
List.generate(10, (index) => {"id": index, "name": "Product $index"})
.toList();
var willo = Padding(
padding: const EdgeInsets.all(8.0),
// implement GridView.builder
child: GridView.builder(
shrinkWrap:true,
gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 400,
childAspectRatio: 2 / 2,
crossAxisSpacing: 20,
mainAxisSpacing: 20),
itemCount: myProducts.length,
itemBuilder: (BuildContext ctx, index) {
return Container(
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.amber,
borderRadius: BorderRadius.circular(15)),
child: Text(myProducts[index]["name"]),
);
}),
);
// ignore: prefer_const_constructors
return Scaffold(
backgroundColor: Color.fromARGB(255, 18, 18, 18),
appBar: UnloggedAppBar(title: "Nyimboo", widgets: [
IconButton(onPressed: (){}, icon: const Icon(Icons.upload)),
IconButton(onPressed: (){}, icon: const Icon(Icons.shopping_cart)),
IconButton(onPressed: (){}, icon: const Icon(Icons.notifications)),
IconButton(onPressed: (){}, icon: const Icon(Icons.person)),
],
),
body:
Padding(
padding: EdgeInsets.all(0.0),
child: ListView(
shrinkWrap: true,
scrollDirection: Axis.vertical,
children: <Widget>[
Text("Trending albums",
style: TextStyle(
color: Color.fromARGB(255, 176, 170, 170)
,fontSize: 20.0, fontWeight: FontWeight.bold),),
horizontalList1,
Text("Popular this week",
style: TextStyle(
color: Color.fromARGB(255, 173, 162, 162)
,fontSize: 20.0, fontWeight: FontWeight.bold),),
makeLessonBody,
Text("Discover",
style: TextStyle(
color: Color.fromARGB(255, 176, 170, 170)
,fontSize: 20.0, fontWeight: FontWeight.bold),),
//This is not scrolling
Container(child: willo)
],
),
));
}
}
Where it is not clear, you can ask me please. Thank you
CodePudding user response:
Add physics: NeverScrollableScrollPhysics()
to ListView.builder
options
// the scaffold body
final makeLessonBody = ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: toolsn.length,
physics: NeverScrollableScrollPhysics(),
itemBuilder: (BuildContext context, int index) {
return makeLessonCard(toolsn[index]);
},
);
CodePudding user response:
i think it caused by multiple ListView
. then the scrollcontroller not working.
in my case i usually add properties physics for the children,
body:
Padding(
padding: EdgeInsets.all(0.0),
child: ListView( // parent widget
shrinkWrap: true,
scrollDirection: Axis.vertical,
children: <Widget>[
...... other widget is here
]
and for the children , add ClampingScrollPhysics()
: Creates scroll physics that prevent the scroll offset from exceeding the bounds of the content.
final makeLessonBody = Container(
child: ListView.builder(
physics: const ClampingScrollPhysics(),
scrollDirection: Axis.vertical,
shrinkWrap: true,
Widget horizontalList1 = new Container(
margin: EdgeInsets.symmetric(vertical: 20.0),
height: 200.0,
child: new ListView(
physics: const ClampingScrollPhysics(),
also for the grid view
var willo = Padding(
padding: const EdgeInsets.all(8.0),
child: GridView.builder(
shrinkWrap:true,
physics: const ClampingScrollPhysics(),