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()),
);
},
),
),
],
),
);
Related
I am trying to create one Grid View page with Cards as list elements and the last of the cards are getting cut from the bottom. The following are relevant code snippets:
createListBody.dart
List<String> services = [
'Demo1',
'Demo2',
'Demo3',
'Demo4',
'Demo5',
'Demo6',
'Demo7',
'Demo8',
'Demo9',
'Demo10',
];
#override
Widget build(BuildContext context) {
return Container(
height: MediaQuery.of(context).size.height,
child: GridView.count(
crossAxisCount: 2,
crossAxisSpacing: 2.0,
mainAxisSpacing: 2.0,
children: services.map((String serviceName){
return Container(
child:Card(
color: Colors.grey[500],
elevation: 15,
semanticContainer: true,
shadowColor: palletFuchsia,
shape: CircleBorder(),
child: InkWell(
onTap: (){
print("Tapped "+serviceName);
},
child: Center(
child: Text(
serviceName,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 25
),
),
),
),
)
);
}).toList(),
),
);
}
listScreen.dart
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: palletWhiteDrawer,
drawer: Theme(
data: Theme.of(context).copyWith(
canvasColor: palletYellowDrawer,
),
child: CreatDrawerWidget(),
),
appBar: CreateAppBar(),
body:GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: () {
FocusScope.of(context).requestFocus(new FocusNode());
},
child: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
ServiceListBody()
],
)
),
),
);
}
Screenshot
I am completely new to flutter so, sorry if there is some silly mistake. But any help would be useful.
Thank you for your time!
Just for exploring, you can do height: MediaQuery.of(context).size.height *2, It shouldn't get cut anymore right?
Solution 1
Your telling your container a given height which is fix for the moment, no matter how many items you got inside your ListView.
You can for example use ConstrainedBox with shrinkWrap:true and manage your max height
ConstrainedBox(
constraints: BoxConstraints(maxHeight: 200, minHeight: 56.0),
child: ListView.builder(
shrinkWrap: true,
...
more info: https://api.flutter.dev/flutter/widgets/ConstrainedBox-class.html
Solution 2
use Slivers, they are dynamic.
For this you need to customize your structure a little bit. You wrap everything with a CustomScrollView(), SliverToBoxAdapter() for fixed elements and SliverList() for dynamic ones, makes it work like a charm.
Example using CustomScrollView and SliverToBoxAdapter:
return SafeArea(
child: CustomScrollView(
//scrollDirection: Axis.vertical,
physics: BouncingScrollPhysics(),
slivers: <Widget>[
// Place sliver widgets here
SliverToBoxAdapter(
child: Padding(
padding: const EdgeInsets.fromLTRB(25, 30, 25, 20),
child: SizedBox(
height: 299,
child: Column(children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
...
You can define the height with the SizedBox height. Also you can apply nice effects to your whole View on the CustomScrollView
Example Sliverlist:
SliverList(
delegate: SliverChildBuilderDelegate(
(ctx, index) => ChangeNotifierProvider.value(
value: list[index],
child: GestureDetector(
onTap: () {}),
childCount: list.length,
)),
Infos about slivers: https://medium.com/flutterdevs/explore-slivers-in-flutter-d44073bffdf6
The GridView Widget itself is Scrollable , So you don't have to wrap it with a Column and SingleChildScrollView Widget...
You can now simply scroll down if the Circles goes out of the screen
If you wish all the circles to fit in the screen.. You'll have to use
var mobileHeight = MediaQuery.of(context).size.height
And then the height of each circles will be mobileHeight divided by the no. of circles vertically.
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 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
I have a layout made of a Column, one of its elements being a row (so that it takes the full width of the screen). Inside that row, I have a wrap, which content is pretty big and that I want to put inside a SingleChildScrollView.
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Container(
padding: const EdgeInsets.all(kPaddingMainContainer),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Title', style: Theme.of(context).textTheme.title)
],
),
Padding(
padding: const EdgeInsets.only(top: 10),
),
Row(
children: <Widget>[
Expanded(
child: SingleChildScrollView(
child: Wrap(
alignment: WrapAlignment.center,
runSpacing: 20.0, // distance between rows
spacing: 30.0, // distance between chips
children: _getWidgets(),
),
),
),
],
),
],
),
),
),
);
}
With this code, I can't get the SingleChildScrollView to make the wrap scrollable. Instead, I got a RenderFlex overflowed error.
However, if I extract the wrap from the Row, as follow:
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Container(
padding: const EdgeInsets.all(kPaddingMainContainer),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Title', style: Theme.of(context).textTheme.title)
],
),
Padding(
padding: const EdgeInsets.only(top: 10),
),
Expanded(
child: SingleChildScrollView(
child: Wrap(
alignment: WrapAlignment.center,
runSpacing: 20.0, // distance between rows
spacing: 30.0, // distance between chips
children: _getWidgets(),
),
),
),
]),
),
),
);
}
Then, the scroll is working.
However, now the wrap doesn't expand to full width anymore, what I want.
How to use the SingleChildScrollView inside a Row ?
PS: I don't want to wrap the Column in a SingleChildScrollView as I want my title to stay fixed and only the wrap below to scroll.
I found a solution by wrapping the Wrap in a ConstrainedBox (instead of a row) for which the minWidth is the width of the screen.
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Container(
padding: const EdgeInsets.all(kPaddingMainContainer),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Title', style: Theme.of(context).textTheme.title)
],
),
Padding(
padding: const EdgeInsets.only(top: 10),
),
Expanded(
child: SingleChildScrollView(
child: ConstrainedBox(
constraints: BoxConstraints(
minWidth: MediaQuery.of(context).size.width,
),
child: Wrap(
alignment: WrapAlignment.center,
runSpacing: 20.0, // distance between rows
spacing: 30.0, // distance between chips
children: _getWidgets(),
),
),
),
),
]),
),
),
);
}
This fixed my issue and I can now scroll the Wrap widget only by tapping anywhere on the screen, while the first row with the title stays fixed.
I am having problem displaying results using ListView.Builder widget. When i placed it on the main.dart page no matter what i do, the page constantly coming up with render errors. Immediately i put it in a separate page, it displayed correctly without error. The page(main.dart) display perfectly without any error without the listView.builder.
My question is it possible or otherwise to display ListView.Builder alongside other widgets on the same page or must it be displayed on a separate page?
Any help will be appreciated.
body: TabBarView(
children: <Widget>[
SingleChildScrollView(
child: Column(
children: <Widget>[
Container(
// child: SingleChildScrollView(
// scrollDirection: Axis.vertical,
child:Container(
child: Column(
//crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
child:Expanded(
child: Image.asset("assets/images/1frenchToast.webp"),
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Text("Select Cuisine",style: TextStyle(color: Colors.black),),
GestureDetector(
child: DropdownButton(
//isDense: true,
style: TextStyle(fontSize: 14,color: Colors.black,),
value: dropDownSelectedItemState,
items: items,
onChanged: (String selectValue){
ClassHub().mySharedPreference("cuisineChoice", "set", selectValue);
ClassHub().getFoodCategory(selectValue).then((onValue){
if(onValue !=null){
setState(() {
foodCategory = onValue;
});
}
});
setState(() {
dropDownSelectedItemState = selectValue;
});
},
),
onLongPress: (){
},
),
],
),
// This is the portion causing issues
Column(
//mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
//myListView(),
Container(
child: ListView.builder(scrollDirection: Axis.vertical,
itemCount: foodCategory.length
itemBuilder: (context,index){
return ListTile(
title: Text(foodCategory[index].foodType),
);
},
),
),
]
),
Container(
//height: 20,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Container(
margin: EdgeInsets.only(top: 20,),
height: 60,
width: MediaQuery.of(context).size.width-20,
child: ListTile(
leading: CircleAvatar(
minRadius: 10,
maxRadius: 30,
//child:Image.asset("assets/images/Capture.JPG",height: 60,width: 60,),
//borderRadius: BorderRadius.circular(30),
backgroundImage: ExactAssetImage('assets/images/Capture.JPG'),
),
title: Text("Western Food Recipes"),
),
),
],
),
Container(
height: 10,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Container(
height: 60,
width: MediaQuery.of(context).size.width-20,
child:ListTile(
leading: Image.asset("assets/images/Capture.JPG"),
// borderRadius: BorderRadius.circular(30),
// ),
title: Text("African Food Recipes"),
),
),
],
),
Container(
height: 10,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Container(
height: 60,
width: MediaQuery.of(context).size.width-20,
child:ListTile(
leading: Image.asset("assets/images/Capture.JPG"),
// borderRadius: BorderRadius.circular(30),
// ),
title: Text("African Food Recipes"),
),
),
],
),
],
),
),
// ),
),
],
),
),
I want to be able to display ListView.Builder widget on the same page with other widgets without any render error. Is this possible or not?
What you need is shrinkWrap = true inside ListView.builder.
Else the children will wont know how much space to take in the scrollable widget.
you must have to pass the builder_context and use this is ListView.Builder function it might help you