I want to make use 4 listView Builder which scroll horizontally in a SingleChildScrollView but even after trying everything the page isn't scrolling vertically, can anyone help me with this.
Example :
#override
Widget build(BuildContext context) {
return FutureBuilder(
future: getLibrayCourse(),
builder: (context,snapshot){
if(snapshot.connectionState==ConnectionState.waiting){
return Center(child: CircularProgressIndicator());
}
return Container(
padding: EdgeInsets.all(20),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Free Video Courses",style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18
),),
SizedBox(height:10),
Container(
height: MediaQuery.of(context).size.height/4,
child: ListView.builder(
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemCount: 10,
itemBuilder: (context, index){
return Card(
child: Text("YOYO"),
);
}),
),
Text("Free Video Courses",style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18
),),
SizedBox(height:10),
Container(
height: MediaQuery.of(context).size.height/4,
child: ListView.builder(
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemCount: 10,
itemBuilder: (context, index){
return Card(
child: Text("YOYO"),
);
}),
),
Text("Free Video Courses",style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18
),),
SizedBox(height:10),
Container(
height: MediaQuery.of(context).size.height/4,
child: ListView.builder(
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemCount: 10,
itemBuilder: (context, index){
return Card(
child: Text("YOYO"),
);
}),
),
Text("Free Video Courses",style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18
),),
SizedBox(height:10),
Container(
height: MediaQuery.of(context).size.height/4,
child: ListView.builder(
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemCount: 10,
itemBuilder: (context, index){
return Card(
child: Text("YOYO"),
);
}),
),
],
),
);
},
);
}
If I use neverscrollable in my horizontal widget it will stop scrolling so that's an issue
I have tried adding Container height, using expanded etc still the problem persists
I copied and used your code and just moved the "column" to the "SingleChildScrollView". It worked for me, Both horizontal and vertical scrolling.
#override
Widget build(BuildContext context) {
return FutureBuilder(
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return Center(child: CircularProgressIndicator());
}
return Container(
padding: EdgeInsets.all(20),
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// your children
]
),
),
);
},
);
}
I hope it was useful for you.
Related
I want to get all the input field values from the listTilewidget on the button click how can I do this?
I have provided the image as well which is here...
we can easily do this with this javascript but is there any way to achieve this type of functionality?
I looked for the solution to this problem on the internet but did not find any solution for that problem.
FutureBuilder(
future: SupervisorAttendanceServices.getAttendancesDetailsList(
widget.attendanceId),
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (snapshot.hasData) {
var data = snapshot.data['hamal'];
return ListView.builder(
itemCount: data.length,
physics: const NeverScrollableScrollPhysics(),
shrinkWrap: true,
itemBuilder: (BuildContext context, int index) {
return Card(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(children: [
Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.start,
children: [
const SizedBox(
width: 10,
height: 50,
),
const Icon(FeatherIcons.user),
const SizedBox(
width: 20,
),
Text(
data[index]['worker_name'],
style: const TextStyle(fontSize: 18),
),
],
),
Row(
mainAxisAlignment:
MainAxisAlignment.start,
children: [
SizedBox(
width: 150,
height: 50,
child: TextFormField(
cursorHeight: 25,
controller: _mainWagesController,
// onChanged: _onChangeHandler,
// initialValue: _mainWagesController.text,
decoration: const InputDecoration(
border: OutlineInputBorder(),
hintText: "Wages",
prefixIcon: Icon(
Icons.wallet,
color: Colors.blue,
)),
)),
],
)
]),
),
);
});
} else if (snapshot.hasError) {
return const Center(
child: Text("Something went wrong !"),
);
} else {
return const Center(child: LinearProgressIndicator());
}
},
),
Hello so the problem i am having is the following code
return Scaffold(
body: Padding(
padding: EdgeInsets.all(20),
child: Row(
children: [
const SizedBox(width: 15),
Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(widget.routine.title!, style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20)),
SizedBox(height: 6),
Text(widget.routine.description!),
const Divider(
height: 10,
thickness: 2,
indent: 20,
endIndent: 0,
color: Colors.white,
),
FutureBuilder<List<RoutineTask>>(
future: _getRoutineTasks(widget.routine.id!),
builder: (BuildContext context, AsyncSnapshot<List<RoutineTask>> snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
if(snapshot.data == null) {
return Center(
child: Text("No Tasks!"),
);
} else if (snapshot.hasError) {
return Center(
child: Text("An Error has Occured: ${snapshot.error}"),
);
} else {
return ListView.separated(
reverse: false,
itemCount: snapshot.data!.length,
scrollDirection: Axis.vertical,
shrinkWrap: true,
separatorBuilder: (BuildContext context, index) => const Divider(),
itemBuilder: (BuildContext context, index) {
return Container(
height: MediaQuery.of(context).size.height * 0.45,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(25)
),
child: CheckboxListTile(
value: snapshot.data![index].isComplete,
onChanged: (bool? value) {
setState(() {
snapshot.data![index].isComplete = value;
});
},
),
);
},
);
}
} else {
return Center(child: CircularProgressIndicator(),);
}
}
)
],
),
],
)),
);
is Returning the error
'package:flutter/src/rendering/viewport.dart': Failed assertion: line 1869 pos 16: 'constraints.hasBoundedWidth': is not true.
and i have no idea how to fix it, been trying every possible combination i can come up with.
Edited: This works. Try to follow this tree structure.
return Scaffold(
body: Row(
children:[
Text('ROWWWWWWWWWWW'),
Expanded(
child: Column(
children:[
Text('COLUMN'),
Expanded(
child: ListView(
children:[
Text('LISTVIEW'),
],
),
),
]
),
)
],
),
);
I'm new on Flutter and I'm practicing trying to build UIs. I wanna achieve this:
I'm using flutter_rating_bar for rating stars but I can't understand how to add this widget inside a ListTile; I already have the user vote I just need to show it with stars.
return Container(
child: ListView.builder(
itemCount: 5,
shrinkWrap: true,
itemBuilder: (context, index) {
return Card(
child: ListTile(
leading: FlutterLogo(size: 72.0),
title: Text(title),
subtitle: Text(text),
trailing: Icon(Icons.more_vert),
isThreeLine: true,
),
);
}));
This is the code I'm using but when I try to add for example:
RatingBarIndicator(
rating: userRat,
itemBuilder: (context, index) => Icon(
Icons.star,
color: Colors.amber,
),
itemCount: 5,
itemSize: 50.0,
direction: Axis.vertical,
)
I receive the error:
Positional arguments must occur before named arguments. Try moving all
of the positional arguments before the named
arguments.dart(positional_after_named_argument)
I'm not also able to poistion the user image at bottom with user's name at right. Can anyone explain me why this error occurs and give me a code example to understand please?
try this, you have to replace the size value of your array in itemCount, and then customize this widget to suit you.
Container(
child: ListView.builder(
itemCount: 5,
shrinkWrap: true,
itemBuilder: (context, index) {
return Container(
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 20),
margin: EdgeInsets.symmetric(vertical: 1),
decoration: BoxDecoration(
color: Colors.grey[300],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Frame', style: TextStyle(color: Colors.grey[500])),
Text('Title'),
Padding(
padding: const EdgeInsets.symmetric(vertical: 10),
child: Row(
children: [
RatingBar.builder(
itemSize: 25,
initialRating: 3,
minRating: 1,
direction: Axis.horizontal,
allowHalfRating: true,
itemCount: 5,
itemPadding: EdgeInsets.symmetric(horizontal: 4.0),
itemBuilder: (context, _) => Icon(
Icons.star,
color: Colors.blue,
),
onRatingUpdate: (rating) {
print(rating);
},
),
SizedBox(width: 50),
Row(
children: [
Text('4.0', style: TextStyle(color: Colors.blue, fontWeight: FontWeight.bold),),
Text('/ 5.0', style: TextStyle(color: Colors.grey[500], fontWeight: FontWeight.bold),)
],
)
],
),
),
Text('Text...'),
Row(
children: [
Icon(Icons.person),
Text('Name')
],
)
],
),
);
},
),
);
I need 4 Scrollable Horizontal Listviews in a vertically scrollable column.
I have tried multiple things again and again but the vertical scrolling just doesn't seem to work.
This is the kind of layout I want.
Container(
padding: EdgeInsets.all(20),
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Align(
alignment: Alignment.bottomLeft,
child: Text("Some Text",style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18
),),
),
SizedBox(height:10),
Container(
height: MediaQuery.of(context).size.height/6.8,
child: ListView.builder(
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemCount: snapshot.data.length,
itemBuilder: (context, index){
return widget(
);
}),
),
Align(
alignment: Alignment.bottomLeft,
child: Text("Some Text",style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18
),),
),
SizedBox(height:10),
Container(
height: MediaQuery.of(context).size.height/6.8,
child: ListView.builder(
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemCount: snapshot.data.length,
itemBuilder: (context, index){
return widget(
);
}),
),Align(
alignment: Alignment.bottomLeft,
child: Text("Some Text",style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18
),),
),
SizedBox(height:10),
Container(
height: MediaQuery.of(context).size.height/6.8,
child: ListView.builder(
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemCount: snapshot.data.length,
itemBuilder: (context, index){
return widget(
);
}),
),Align(
alignment: Alignment.bottomLeft,
child: Text("Some Text",style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18
),),
),
SizedBox(height:10),
Container(
height: MediaQuery.of(context).size.height/6.8,
child: ListView.builder(
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemCount: snapshot.data.length,
itemBuilder: (context, index){
return widget(
);
}),
),Align(
alignment: Alignment.bottomLeft,
child: Text("Some Text",style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18
),),
),
SizedBox(height:10),
Container(
height: MediaQuery.of(context).size.height/6.8,
child: ListView.builder(
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemCount: snapshot.data.length,
itemBuilder: (context, index){
return widget(
);
}),
),
);
Can anyone tell me what I am doing wrong?
I have been stuck in this for a long time now.
The horizontal list does scroll but the vertical scroll is not working.
Try using SingleChildScrollView and Row instead of ListView
For example,
class Home extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("4 Horizontals"),
),
body: SafeArea(
child: SingleChildScrollView(
child: Column(
children: [
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: List.generate(10, (index) => getWid()),
),
),
SizedBox(height: 10),
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: List.generate(10, (index) => getWid()),
),
),
SizedBox(height: 10),
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: List.generate(10, (index) => getWid()),
),
),
SizedBox(height: 10),
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: List.generate(10, (index) => getWid()),
),
),
],
),
),
),
);
}
Widget getWid() {
return Container(
color: Colors.pink,
width: 200,
height: 200,
padding: EdgeInsets.all(10),
margin: EdgeInsets.all(5),
child: Center(
child: Text(
"Hello",
style: TextStyle(
color: Colors.white,
fontSize: 30
),
),
),
);
}
}
I wanted to recreate my List UI like the one in the following Pic:
As you can see the Leading Icon in the List tile has a vertical divider to its right side and it is intersected with the bottom divider, but I'm not able to achieve that look and I'm only able to recreate this UI.
Here is the Code I'm Using:
contentBuilder: (BuildContext context) {
return Container(
child: FutureBuilder(
future: _getFoodDetails(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
print(snapshot.data);
if (snapshot.data == null) {
return Container(child: Center(child: Text("Loading...")));
} else {
return Expanded(
child: ListView.separated(
itemCount: snapshot.data.length,
separatorBuilder: (context, index) {
return Divider();
},
itemBuilder: (BuildContext context, int index) {
return ListTile(
dense: false,
leading: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Icon(Icons.phone, color: Colors.blue),
VerticalDivider(),
],
),
title: Text(snapshot.data[index].foodTitle),
subtitle: Text(snapshot.data[index].foodQuantity),
onTap: () {},
trailing: Icon(Icons.keyboard_arrow_right,
color: Colors.yellow, size: 30.0),
);
},
),
);
}
},
),
);
}
Please suggest how can i Achieve the Desired UI Look with the Dividers proeprly intersecting with each other and remove the padding which im obtaining.
One of the solution that I can think of here is to wrap your row in IntrinsicHeight() if you are using VerticalDivider as separator in Row widget like the sample below:
IntrinsicHeight(
child: Row(
children: [
Text('Hello'),
VerticalDivider(
color: Colors.black,
thickness: 2,
),
Text('World'),
],
),
)
contentBuilder: (BuildContext context) {
return Container(
child: FutureBuilder(
future: _getFoodDetails(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
print(snapshot.data);
if (snapshot.data == null) {
return Container(child: Center(child: Text("Loading...")));
} else {
return Expanded(
child: ListView.separated(
itemCount: snapshot.data.length,
separatorBuilder: (context, index) {
return Divider();
},
itemBuilder: (BuildContext context, int index) {
return Container(
width: MediaQuery.of(context).size.width,
height: 80,
color: Colors.blue,
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
const Icon(Icons.phone, color: Colors.blue),
Container(
width: 1,
color: Colors.white,
),
const SizedBox(
width: 10,
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: const [
Text(snapshot.data[index].foodTitle),
Text(snapshot.data[index].foodQuantity),
],
),
const Spacer(),
const Icon(Icons.keyboard_arrow_right,
color: Colors.yellow, size: 30.0),
const SizedBox(
width: 10,
),
],
),
),))}}}));
hope this will help