I used a ListView inside a Drawer Widget and Used ListView.Builder inside that ListView to print out menus. Now All Menus are Printed Perfectly But The Drawer is not Scrolling. How to make it scroll?
Widget build(BuildContext context) {
return Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader(
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('Guide to Make Money'),
],
),
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('images/header_photo.jpg'),
fit: BoxFit.cover),
),
),
Container(
height: double.maxFinite,
child: ListView.builder(
padding: EdgeInsets.only(top: 0.0),
itemBuilder: (context, index) {
final profession = professionList[index];
return Ink(
color: selectedLink == index ? Colors.blueGrey : null,
child: ListTile(
title: Text(profession.heading),
onTap: () {
setState(() {
selectedLink = index;
});
Navigator.pushNamed(context, profession.destinationRoute);
},
leading: index == 0
? Icon(
Icons.home,
)
: Icon(Icons.description),
),
);
},
itemCount: professionList.length,
),
),
],
),
);
}
I need to make it Scroll... Please Help
P.S: Hi, I'm new to Flutter and also Stack overflow.. I wanted to upload image as well but this website say's I need to have 10 reputation at least... So, I have just a Code for you.. I hope you can figure out and help me with this.
Try this, Column instead ListView, and Expanded instead Container(height: double.maxFinite
return Drawer(
child: Column(
children: <Widget>[
DrawerHeader(
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Text('Guide to Make Money'),
],
),
decoration: BoxDecoration(
color: Colors.white,
),
),
Expanded(
child: ListView.builder(
padding: EdgeInsets.only(top: 0.0),
itemCount: 22,
itemBuilder: (context, index) {
return Ink(
color: true ? Colors.blueGrey : null,
child: ListTile(
title: Text("profession.heading"),
onTap: () {},
leading: index == 0
? Icon(
Icons.home,
)
: Icon(Icons.description),
),
);
},
),
),
],
),
);
Container(
height: double.maxFinite,
child: ListView.builder(
itemCount: data == null ? 0 : data.length,
itemBuilder: (BuildContext context, i) {
return new ListTile(
title: new Text(data[i]["title"]),
);
}))
We can just add
physics: ClampingScrollPhysics(),
to the ListView.builder and it scrolls perfectly
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());
}
},
),
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')
],
)
],
),
);
},
),
);
my screen is not scrollable , and has limit height ( only scrollable in the limit height )
I do want to make my page on there for scrollable,
here is my current page now :
if you see in the gif above, my page is not scrollable and only stuck in the one box and scrollable inside, I do love to scroll able them for all page normally, should I use ListView here ?? but how can I make the pic and text for responsive like above ? but I do make the hight of text too close also, can I know how u tiny up the text on the list also ??
here is my code for that Widget
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
data['title'],
softWrap: true,
),
),
body: Container(
padding: EdgeInsets.all(MediaQuery.of(context).size.width * 0.05),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Expanded(
flex: 1,
child: Align(
alignment: Alignment.center,
child: Image.network('https://i.ibb.co/nrWqyMx/belgium.png'),
)
),
Expanded(
flex: 2,
child: Align(
alignment: Alignment.topLeft,
child: ListView.builder(
itemBuilder: (ctx, index) {
return Container(
height: MediaQuery.of(context).size.width * 0.14,
child: ListTile(
leading: Icon(Icons.radio_button_checked, size: 17),
title: Text(data['ingredients'][index], style: TextStyle(height: 1.3),),
)
);
},
itemCount: data['ingredients'].length,
),
)
)
],
),
),
);
}
link : flutter codepen
Scaffold(
appBar: AppBar(
title: Text(
'MyAppBar',
style:
TextStyle(color: Colors.cyan[100], fontWeight: FontWeight.bold),
),
),
body: ListView(
children: <Widget>[
Container(
child: Image.network
('https://i.ibb.co/nrWqyMx/belgium.png'),
),
ListView.builder(
physics: ScrollPhysics(),
shrinkWrap: true,
itemBuilder: (ctx, index) {
return Container(
height: MediaQuery.of(context).size.width * 0.14,
child: ListTile(
leading: Icon(Icons.radio_button_checked, size: 17),
title: Text("data['ingredients'][index]", style: TextStyle(height: 1.3),),
)
);
},
itemCount:25,
)
],
),
);
You will need put a ScrollView as a main container of your widget. Something like this:
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Container(
color: Colors.red,
child: SingleChildScrollView(
child: Column(
children: [
Text("Title"),
ListView.builder(
shrinkWrap: true,
itemCount: 3,
itemBuilder: (context, index) {
return Container(
height: 300,
width: double.infinity,
decoration: BoxDecoration(
color: Colors.blue,
border: Border.all(
color: Colors.black,
style: BorderStyle.solid
)
),
);
},
)
],
),
),
)
);
}
}
I need an AlertDialog with minHeight of 50. It contains a ListView. If the ListView exceeds the screen it should become scrollable. But I can't scroll for some reason. Can anyone explain to me why it's not working :)
AlertDialog(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
title: ... ,
content: ConstrainedBox(
constraints: new BoxConstraints(
minHeight: 50,
),
child: Column(
children: <Widget>[
Row(...),
Container(
child: ListView.builder(
shrinkWrap: true,
itemCount: list.length,
itemBuilder: (context, index) {
return GestureDetector(
onTap: () => _onTap(list[index]),
child: Row(
children: <Widget>[
Flexible(
flex: 1,
child: Checkbox(...),
),
Flexible(
flex: 3,
child: Text(list[index]),)
],
)
);
},
)
)
],
),
),
actions: <Widget>[
MaterialButton(
minWidth:100,
child: Text('Cancel'),
onPressed: (){
Navigator.of(context).pop();
}
),
MaterialButton(
minWidth:100,
elevation: 5.0,
color: Theme.of(context).accentColor,
child: Text('Save', style: TextStyle(color: Color(0xFFF6F5F5))),
onPressed: (){
}
)
],
);
Add mainAxisSize: MainAxisSize.min to your Column. Without it, your Column is at infinite height and contains all Listview items. That's why it does not scroll.
I have a ListView and I need an expanded vertical line on the left of it (See image below). I have achieved the following layout but it expands to infinite.
Here is the code for the above layout:
return Scaffold(
...
body: Column(
children: <Widget>[
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
margin: EdgeInsets.only(left: 4.0),
color: Colors.grey,
width: 4.0,
child: SizedBox.expand(),
),
Flexible(
child: StreamBuilder( // Creates the list view
stream: ...,
builder: ...,
),
),
],
),
],
),
};
Line goes to infinite because of SizedBox.expand() but how to fit into the screen. Any suggestions?
Or is there a way to get this same effect from ListView item (Doesn't have a fixed size).
Don't use Column as Parent if you only has one child, this is working for me:
return Container(
child: Row(
children: <Widget>[
Container(
margin: EdgeInsets.only(left: 4.0),
color: Colors.grey,
width: 4.0,
),
Expanded(
child: ListView.builder(
// Creates the list view
shrinkWrap: true,
itemCount: list.length,
itemBuilder: (context, index) {
return ListTile(
contentPadding: EdgeInsets.all(20.0),
title: Text(list[index].toString()),
);
},
),
),
],
),
);