I want to remove spacing inside my container and I cannot seem to get it right, I tried using height but it still does not work.
my code:
Widget build(BuildContext context) => SizedBox(
height: 440,
child: Container(
//grey color
color: CustomTheme().neutral100,
child: Padding(
padding: const EdgeInsets.fromLTRB(
xxLargePadding, xLargePadding, xxLargePadding, largePadding),
child: ListView.separated(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
itemBuilder: (_, index) => Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
officials[index].fullName,
style: TextStyle(
fontSize: 12, color: CustomTheme().neutral500),//white color
),
Text(
officials[index].type,
style: TextStyle(
fontSize: 12, color: CustomTheme().neutral400),
),
],
),
separatorBuilder: (_, index) => const Padding(
padding: EdgeInsets.symmetric(vertical: largePadding),
child: Divider(),
),
itemCount: officials.length),
),
),
);
The results looks like the screenshot below:
I want to remove the spacing at the top where I highlighted with red.
There seems to be something making that space, I just do not get it.
Your help will be highly appreciated.
This is because you are using padding inside the container, set 0 to top and bottom also set listview padding to 0:
Container(
//grey color
color: CustomTheme().neutral100,
child: Padding(
padding: const EdgeInsets.fromLTRB(xxLargePadding, 0, xxLargePadding, 0), // <--- change this
child: ListView.separated(
padding:EdgeInsets.zero, // <--- add this
...
)
a tip for your code for cleaner code, change your separatorBuilder to this:
separatorBuilder: (_, index) => Divider(
height: largePadding + 16,// largePadding + Divider's default height value
),
the padding property in the ListView takes by default an extra value, you need to set it to 0 like this:
ListView(
padding: const EdgeInsets.all(0),
// ...
Related
I want to set,
user can scroll and see the admins --- inside red marked container (look at the picture).
"Admins" Text don't want to scroll
Listtiles in ListView.Builder only scroll inside red area marked in picture (red area = Container)
my try here :
Container(
height: 300,
child: Column(
children: [
const CustomText(
align: TextAlign.start,
size: 20,
text: "Admins",
textColor: Colors.white,
fontWeight: FontWeight.w500,
),
ListView.builder(
physics: AlwaysScrollableScrollPhysics(),
scrollDirection: Axis.vertical,
itemCount: itlength,
shrinkWrap: true,
itemBuilder: (context, index) {
return Container(
padding: const EdgeInsets.symmetric(
horizontal: 5, vertical: 10),
child: ListTile(
title: Text(name),
subtitle:
Text(sub),
),
);
},
),
],
),
)
Wrapping your ListView with Expanded to take all the available space will fix it but make sure that the parent of the container is Column not a Scrolling widget.
This is my code for the horizontal scrollbar. how to style this according to given UI. where and how I should add styles on this code. the code is showing how I placed the scroll bar in my home. dart. need suggestions to add styles.
home.dart.
body: ListView(
children: [
buildSearchInput(),
Padding(
padding: const EdgeInsets.only(top: 40, left: 20, right: 20),
child: Column(
children: [
SizedBox(
height: kToolbarHeight,
child: ListView(
scrollDirection: Axis.horizontal,
children: List.generate(4, (index) => Text("item $index")),
),
),
],
),
)
,
You can use Container with StadiumBorder to decorate them and using ListView.separated to have space between items.
final List<String> data = ["item A", "Item Number 2", "new One"];
Widget itemW({
required String text,
required Color bgcolor,
required Color textColor,
}) {
return Container(
padding: const EdgeInsets.all(16),
alignment: Alignment.center,
decoration: ShapeDecoration(
shape: const StadiumBorder(),
color: bgcolor,
),
child: Text(
text,
style: TextStyle(color: textColor),
),
);
}
....
ListView.separated(
itemCount: data.length,
scrollDirection: Axis.horizontal,
itemBuilder: (context, index) =>
itemW(color: Colors.cyanAccent,
bgcolor: Colors.cyanAccent,
text: data[index]),
separatorBuilder: (context, index) {
return const SizedBox(
width: 10,
);
},
),
I am displaying an image in my code when the list is empty. I am using firebase to fetch data and store it in the list since there is no data stored yet so the list is empty initially. But it is not displaying the image on empty condition
Code:
// tab bar view her
Expanded(
child: TabBarView(
controller: _tabController,
children: [
Container(
padding: EdgeInsets.only(right: 32, left: 32),
child: Medicine(),
),
// second tab bar view widget
Container(
padding: EdgeInsets.only(right: 32, left: 32),
child: MedHistory(),
),
],
),
),
],
),
Widget Medicine() {
print("MedicineList ${med_list.length}");
if(med_list.isEmpty) {
noMedicine();
}else {
ListView.separated(
physics: NeverScrollableScrollPhysics(),
padding: EdgeInsets.symmetric(vertical: 11, horizontal: 20),
shrinkWrap: true,
primary: false,
itemBuilder: (context, index) {
return MedicinesList(
med_list[index].userSdate,
med_list[index].userReminder,
med_list[index].userEdate,
med_list[index].userFreq,
med_list[index].userDosage,
med_list[index].userMed,
med_list[index].key);
},
separatorBuilder: (_, __) => Container(),
itemCount: med_list.length);
}
}
Widget noMedicine() {
return Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Image.asset(("assets/images/Medicine-amico.png")),
SizedBox(
height: 20,
),
Text(
'Hurray! You don\'t have any pending medicines to take!',
style: TextStyle(
fontFamily: 'Montserrat',
fontWeight: FontWeight.w600,
fontSize: 14,
color: const Color(0x78000000),
height: 1.4285714285714286,
),
textAlign: TextAlign.center,
),
],
),
);
}
My screen should display this in case the list is empty:
Kindly help me out in solving the problem, Thank you
Can you try using med_list.isEmpty instead of med_list.length == 0 in your if check?
Edit: also make the list empty through List<MedicineList> med_list = []; or List<MedicineList> med_list = <MedicineList>[]; instead of List<MedicineList> med_list = List();.
Edit 2: The issue was that widgets were made using Widget name = {}. A widget has to be a class which extends either Stateless or Stateful. It also has to have an #override build(BuildContext context) {} fucntion. Please see comments for more details.
By using the condition of checking if list is empty or not inside TabView would make it and will display the image as well:
Expanded(
child: TabBarView(
controller: _tabController,
children: <Widget>[
med_list.length == 0
? noMedicine()
: ListView.separated(
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
primary: false,
itemBuilder: (context, index) {
return MedicinesList(
med_list[index].userSdate,
med_list[index].userReminder,
med_list[index].userEdate,
med_list[index].userFreq,
med_list[index].userDosage,
med_list[index].userMed,
med_list[index].key);
},
separatorBuilder: (_, __) => Container(),
itemCount: med_list.length,
),
// second tab bar view widget
Container(
padding: EdgeInsets.only(right: 32, left: 32),
child: MedHistory(),
),
],
),
),
I was able to implement the scrollable horizontal list view in flutter. But I need to put the scrollbar to be at the middle of the List. Right now is at the left which is the starting point of my list.
here is my current scrollable listview
Widget build(BuildContext context) {
return Container(
// padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 24.0),
margin: EdgeInsets.all(5.0),
height: MediaQuery.of(context).size.height * 0.25,
child: Scrollbar(
isAlwaysShown: true,
controller: _scrowllController,
thickness: 3.0,
child: ListView.builder(
controller: _scrowllController,
scrollDirection: Axis.horizontal,
itemCount: numbers.length,
itemBuilder: (context, index) {
return Container(
width: MediaQuery.of(context).size.width * 0.4,
child: Card(
color: Colors.blue,
margin: EdgeInsets.only(bottom:30.0, right: 10.0),
child: Container(
child: Center(
child: Text(
numbers[index].toString(),
style: TextStyle(color: Colors.white, fontSize: 36.0),
)),
),
),
);
},
),
),
);
}
here is what the code above showing
enter image description here
And this is what i want to be shown when you first open the app
enter image description here
Set the initialScrollOffset of your scrollController to be numbers.length / 2 * itemWidth
Also since your items are all the same width I recommend setting the itemExtent of the ListView since that has a big impact on performance
I'm having the same issue that is outlined here. I've tried all of the solutions provided and I'm still getting an error "RenderFlex overflowed by x pixels on the bottom". I don't have any widgets underneath the custom ListView Builder. I'm really at a loss here.
Widget build(BuildContext context) {
return new Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
new GradientAppBar("Twitter"),
new Container(
child: Flexible(
child: Column(
children: <Widget>[
Container(
padding: const EdgeInsets.only(top: 10.0, left: 10.0),
child: UserInfoHeader(userinfo)
),
PagewiseListView(
shrinkWrap: true,
scrollDirection: Axis.vertical,
physics: const AlwaysScrollableScrollPhysics(),
pageSize: 200,
itemBuilder: (context, TwitterCardContent entry, _) {
return TwitterCard(entry);
},
pageFuture: (pageIndex) {
return getStatuses(userinfo.screenName);
},
)
],
),
),
),
],
);
}
And here is the contents of each List item.
Widget build(BuildContext context) {
return new Card(
//elevation: 8.0,
margin: new EdgeInsets.symmetric(horizontal: 10.0, vertical: 10.0),
child: Container(
decoration: new BoxDecoration(
color: Colors.white,
borderRadius: new BorderRadius.circular(25.0)
),
child: ListTile(
contentPadding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
leading: Container(
padding: EdgeInsets.only(right: 12.0),
decoration: new BoxDecoration(
border: new Border(
right: new BorderSide(width: 1.0, color: Colors.white54)
)
),
child: notchecked,
),
title: Text(
statusCard.timeStampString,
style: Theme.TextStyles.buttonText,
),
subtitle: Text(
statusCard.text,
style: Theme.TextStyles.contentCardText,
),
trailing: delete,
),
),
);
}
Column widget doesn't scroll and you have that widget as your parent widget and PageListView as a child inside it.
Instead, replace your parent Column widget with ListView that should resolve renderflow exception.
Wrap your listview builder with expanded widget.
just to add an example to Dave's answer
Expanded(
child: ListView.builder(
shrinkWrap: true,
itemCount: 5,
itemBuilder: (context, index) {
return Container();
}
Problem is that your ListView is inside a Column which has fixed height and can't be scroll whereas listview scrolls. I am not sure but changing Column a listview itself or using Expanded/Flexible with Column could workOut.