How to create something like this I hardcode this and it's image slideshow `
ImageSlideshow(
children: [
MFeaturesCard1(mWidth: mWidth, mHeight: mHeight),
MFeaturesCard2(mWidth: mWidth, mHeight: Height),
],
),
when I swipe right it gives some thing like this and each children has 2 row each row has 3 features card so 1 children has 6 features card
1st children - 0-5,
2nd children - 6-11,
3rd children - 12-18 I want like this but I want to fetch this from API and generate this widget
this is how I fetch my features
Related
Let's say I have a list of widgets as follows :
List<Widget> widgets = [Row(1), Row(2), Row(3), ...... Row(30)];
Now I want to divide this list into multiple pages. Something like this :
PageView(
children: [
Page1(), // lets say this page contains rows 1 to 7
Page2(), // lets say this page contains rows 8 to 13
Page3(), // this contains the remaining rows 14 - 30
]
)
Now this would have been somewhat easy to solve if all the rows were of same height.
But in my case, the heights of the row can vary.
The issue is I have no idea about how many rows to fit in each page as flutter doesn't provide any good way to calculate the height of a widget.
Any suggestions on how to approach this problem will be appreciated.
If I understood your problem correctly, maybe you don't need separate pages.
I guess something like this would help:
var rowSet1 = [Row(), Row(), Row()];
var rowSet2 = [Row(), Row(), Row()];
var rowSet3 = [Row(), Row(), Row()];
var pageView = PageView(children: [
...rowSet1,
...rowSet2,
...rowSet3
]);
You can even split it into separate files, but just reference/import it and use in the file where you need it.
You can make a RowWrapper widget that would receive Row as a child, but it would be wrapped with a Container with fixed height or IntrinsicHeight (if you want to let the framework decide the height).
I have a column with 2 children. The first child has a fixed height, and the second child has dynamic content.
I want the first child to be at the head of the screen, and the second child to be in the vertical middle.
So i added an empty third child and made the first and third child Flexible so that they shared vertical space equally:
Column(
children: [
Flexible(
child: Column(
children: [_firstChild()],
),
),
_secondChild(),
Flexible(child: Container()),
],
)
This works when the content of the second child is short.
But if the second child gets tall, it clips the first child:
Isn't the Flexible supposed to distribute only the empty space when fit: FlexFit.loose? I tried both the fit possibilities. I've tried to put the first child inside a SizedBox and an Align
I've tried to make the third child a Spacer. Nothing has worked so far. The empty third child is taking half of the remaining vertical space.
EDIT:
When the second child's height is too much to make it vertically centered without clipping the first child, i want it to just behave like a default Column with MainAxisAlignment.start (like the first image)
What about this:
Stack(children:[
Center(child: SecondChild()),
Align(alignment: Alignment.topCenter, child: FirstChild()),
])
I am building an app for a game where you can track the upgrade level of armor. Each level has some materials necessary to upgrade. Ex:
Level 1 - 10 of Materials A
Level 2 - 5 of Materials B
Level 3 - 10 of Materials C
I have a page where there is a star rating widget that updates the level property of my armor, when the user changes. And by using a provider, my list of materials updates to only show the remaining ones.
So if my armor is on level 1, it shows:
Level 2 - 5 Materials B
Level 3 - 10 Materials C
And when my armor is on level 2 it shows:
Level 3 - 10 Materials C
What I want to do is to add an animation when that material leaves the screen instead of just hiding it.
This is the setup that I have to show a list of rows containing the information
Column(
children: armor.listOfUpgradeMaterials.map((material) {
return Container(
child: Column(children: [
MaterialByLevelRow(material),
Divider(
color: Theme.of(context).accentColor.withOpacity(0.5),
height: 0,
),
]),
);
}).toList())
Now in my MaterialByLevelRow widget I have an AnimatedContainer with
height: shouldDisplayRow ? 40 : 0,
Is that the best option? With that, several rows will be on the screen but with height zero, isn't that a bad practice?
What if I want to add a slide-in animation with changing the height, would that be possible?
Try using AnimatedList() widget.
Refer to this blog post for more help: https://medium.com/flutter-community/updating-data-in-an-animatedlist-in-flutter-9dbfb136e515
In a row widget, with the crossAxisAlignment: CrossAxisAlignment.center property, all the widgets inside of the row will be vertically centred inside the Row, as expected.
But how do I do if I want only one of them aligned for exmample to the start, something like the picture below:
I can think of some ways to do it, like adding a Column in the last widget, and play with the main axis aligment, Expanded...etc etc but seems like a lot of boilerplate code for such a simple output, ther might be out there a simpler and more elegant way to achieve this??
You can wrap widget 4 in a Container and set the height as widget 3 and add Alignment.topCenter
Ah, stumbled across this and found a solution.
Wrap widgets 3 and 4 in another Row and set the inner Row to CrossAxisAlignment.start.
Row(
children: [
LargeWidget('w1'),
LargeWidget('w2'),
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
LargeWidget('w3'),
SmallWidget('w4'),
],
),
],
);
This frees you from having to know the height of each widget.
I'm trying to build a "semi-responsive" widget. It has a fixed number of relatively large children that always fit on the screen horizontally (A, B and C) and a variable list of small children that not always fit horizontally together with A, B, and C. My idea is to have the widget look like the first picture when the screen is wide, and as a second when the screen is more narrow, and as a third when there's no space for smaller widgets at all. What I'm getting is the third only. As if Wrap always tries to put as many children horizontally as possible. I want it to minimize width instead.
My pseudocode:
Card(
child: Wrap(
children: [
Row(children: [A(), B(), C()]),
Wrap(children: [1(), 2(), 3(), 4(), 5()]),
]
),
);
Any idea how to "squeeze" Wrap vertically? Using standard layout widgets if possible.
You can archive that using the alignment property in the Wrap widget.
Card(
child: Wrap(
alignment: WrapAlignment.end,
children: [
Row(children: [A(), B(), C()]),
1(), 2(), 3(), 4(), 5(),
],),
);
check it out in dartpad gist