Develop Reference

Nested listview causing issue in Flutter

I want to have nested listview where there will be vertical listview inside a horizontal listview and that will be wrapped with SingleChildScrollView because I want to scroll all the vertical lists together.
So here's what I have done
Expanded(
child: Stack(
children: [
Container(
height: double.infinity,
width: double.infinity,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Theme.of(context).primaryColorDark,
Theme.of(context).primaryColorLight,
],
)),
),
SingleChildScrollView(
scrollDirection: Axis.vertical,
physics: const BouncingScrollPhysics(),
child: SizedBox(
height: 200.w,
child: ListView.builder(
scrollDirection: Axis.horizontal,
physics: const BouncingScrollPhysics(),
itemCount: 5,
itemBuilder: (context, index) {
return SizedBox(
height: double.infinity,
width: 24.w,
child: Column(
children: [
Container(
width: double.infinity,
padding: EdgeInsets.fromLTRB(
0.w, 3.w, 0, 3.w),
color: Colors.white,
child:
Center(child: Text("Header"))),
ListView.builder(
physics:
const NeverScrollableScrollPhysics(),
itemCount: 20,
shrinkWrap: true,
itemBuilder: (context, index) {
return GestureDetector(
onTap: () {},
child: Padding(
padding: EdgeInsets.fromLTRB(
0.w, 2.w, 0.w, 2.w),
child: Center(
child: Text(
"8:44",
style: TextStyle(
color: Colors.white,
fontSize: 14.sp)),
),
),
);
},
)
],
),
);
},
),
))
],
))
Desired output :
But in this if I don't put vertical listview in SizedBox and don't give fixed height then it causes an issue.
I want to have expanded or something like wrap_content for vertical inside listview so it takes the required space on it's own.
So what to do for this? Can someone help?
Thanks in advance.

have you tried
height: double.maxFinite,
in the SizedBox... this will le

Problem in body height in SlidingUpPanel flutter

Not all list are visible in body under SlideUpPanel
In list I am having 83 items but last 2~3 items are not visible
SlidingUpPanel(
minHeight: 50,
body: Container(
height: MediaQuery.of(context).size.height-100, //No effect
child: ListView.builder(
itemCount: dataBox.values.length,
itemBuilder: (context, i){
return ListTile(...);
}
)
),
panel: Container(
color: Colors.black,
),
)

If you go into the source code of SlidingUpPanel, you can see that it is using the screen size to set the width and height of the body:
// Inside SlidingUpPanel's build() method:
// ... other lines
child: Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: widget.body,
),
// ... other lines
This is why when you add an AppBar and other elements in the screen, it will reposition the body but the body's height is still equal to the screen height. One workaround is to use a Stack instead of setting the body of the SlidingUpPanel. Something like:
#override
build(context) {
var _collapsedHeight = 50.0;
return Stack(
children: [
Container(
// Set the padding to display above the panel
padding: EdgeInsets.only(bottom: _collapsedHeight),
child: ListView.builder(
itemCount: dataBox.values.length,
itemBuilder: (context, i){
return ListTile(...);
}
)
),
SlidingUpPanel(
minHeight: _collapsedHeight,
panel: Container(
color: Colors.black,
),
),
],
);
}

Use MediaQuery to Get the Size of the Screen then Apply this ,
height: MediaQuery.of(context).size.height*0.7;

Flutter Multiple Heroes That Share The Same Tag Within A Subtree

I am trying to have a hero animation from a post view screen to a full screen post view. As far as I can see, it seems quite normal(my code) and I don't really understand why I am getting this error...
I don't have any other Hero widgets in my code, so I cannot see why I should be getting this error...
Here is the error I am getting:
There are multiple heroes that share the same tag within a subtree.
Here is my code:
Stack(
alignment: Alignment.center,
children: <Widget>[
Hero(
tag: 'test',
child: Container(
height: MediaQuery.of(context).size.width,
child: Padding(
padding: const EdgeInsets.all(6.0),
child: Align(
alignment: Alignment.topRight,
child: Container(
decoration: BoxDecoration(
color: Colors.grey.shade400.withOpacity(0.5),
borderRadius: BorderRadius.circular(12.0),
),
width: 120,
height: 40,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: 3,
itemBuilder: (BuildContext context, int index) {
return _configureEmoji(index);
},
),
),
),
),
decoration: BoxDecoration(
image: DecorationImage(
image: CachedNetworkImageProvider(widget.post.imageURL),
fit: BoxFit.cover,
),
),
),
),
],
),
Here is where I want the hero animation to go to:
class FullScreenView extends StatelessWidget {
final String imageURL;
FullScreenView({this.imageURL});
#override
Widget build(BuildContext context) {
return Scaffold(
body: Hero(
tag: 'test',
child: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
image: DecorationImage(
image: CachedNetworkImageProvider(imageURL),
fit: BoxFit.cover,
),
),
),
),
);
}
}
Thanks a lot and I really appreciate your help!

Plausible reason
The Hero widget doesn't know which Hero you clicked on, so it uses the next screen's Hero tag as a reference to perform a screen search that will close by looking for the Hero with that same tag. If there is more than one Hero with the same tag then an error will be returned as it is not known which Hero should do the animation.
Solution
The solution I use is to identify each Hero using as a reference the content inside it and in the navigation I insert this id (tag) in the navigation push argument and then add this id in the Hero of the target screen.
The most plausible way for your project is to use the post id as the Hero tag, that when sending the post data to the next screen already use the post id on the screen's Hero.

Stack Widget Error when using SingleChildScrollView

I have this code as profile screen which I need it to be able to fill a text like "HELLO" on this code example. But when I put a lot of text in it, the screen become overflow.
The problem is everytime I put SingleChildScrollView to avoid the overflow, I got another error instead.
Please tell me how I can fix this problem.
#override
Widget build(BuildContext context) {
return Container(
child: SafeArea(
child: FutureBuilder<Profile>(
future: dataService.getHttp(),
builder: ...
),
),
);
}
Widget _buildView(detail) {
return Stack(
alignment: Alignment.center,
children: <Widget>[
Column(
children: <Widget>[
Container(
height: 200.0,
child: Center(
child: Image.network(
'https://i.imgur.com/2F3Al82.jpg',
fit: BoxFit.cover,
height: double.infinity,
width: double.infinity,
),
),
),
Padding(
padding: EdgeInsets.fromLTRB(0.0, 50.0, 0.0, 0.0),
),
Expanded(
child: Container(
color: Colors.white,
child: Column(
children: <Widget>[
Text('HELLO'),
]
),
)
),
],
),
Positioned(
top: 150.0,
child: Container(
height: 100.0,
width: 100.0,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: new DecorationImage(
fit: BoxFit.fill,
image: NetworkImage('https://i.imgur.com/2F3Al82.jpg'),
),
),
),
)
],
);
}
this is the error

You are getting this error because of the Expanded widget. SingleChildScrollView allows for infinite height and expanded will take up as much space as it can these two thing are incompatible if you remove the Expanded widget it should work. If you want some space around that container I suggest the Containers margin property.

Is it possible to fill ExpansionTile title with image in Flutter?

I want to create an expandable gallery, which has one image as a main image and upon clicking on it, I want to expand the gallery and show few images below the main image.
So, I have created a ListView, which has a builder that returns ListTileTheme, which I used for removing the contentPadding, with child - ExpansionTile, but I still have some padding left in the container.
Any idea how to completely fill the ExpansionTile? I've tried different approaches that I saw on the web, but no solution so far.
Here is my code:
Container _getGallery() {
Container container = new Container(
height: 500.0,
child: new ListView.builder(itemCount: 1, itemBuilder: (context, i)
{
ListTileTheme tileTheme = new ListTileTheme(
contentPadding: EdgeInsets.all(0.0),
child: ExpansionTile(
trailing: Container(
height: 0.0,
width: 0.0,
),
backgroundColor: Colors.transparent,
title: Image.asset("assets/images/onboarding2.png",
height: 200.0,
width: double.infinity,
alignment: Alignment.center,
fit: BoxFit.cover,
),
children: <Widget>[
new Column(
children: _buildExpandableContent(),
),
],
),
);
return tileTheme;
}),
);
return container;
}
Here you can see what I've achieved so far (1- not expanded, 2- expanded). I want to remove this white lines around the first image.

No, it's not possible. This widget uses ListTile, which adds 16px gap (_horizontalTitleGap constant) if there's trailing widget. The problem is that there's always a trailing widget in ExpansionTile, even if you pass null:
trailing: widget.trailing ?? RotationTransition(
turns: _iconTurns,
child: const Icon(Icons.expand_more),
),
The only dirty workaround I can suggest is to use scale transform to compensate this 16px gap:
title: LayoutBuilder(
builder: (context, constraints) {
final newScale = 1.0 + 16.0 / constraints.maxWidth;
return Container(
transform: Matrix4.identity()..scale(newScale),
child: Image.asset("assets/images/onboarding2.png",
height: 200.0,
width: double.infinity,
alignment: Alignment.center,
fit: BoxFit.cover,
),
);
}
),