I am trying to implement a grid animation similar to what's shown in the gif below.
I know of AnimateList widget which does a similar thing for lists. However, I want to implement it for a GridView and AnimateList doesn't let me specify the column count per row.
Is there a package or plugin that let's me implement the desired animation on change of the underlying data structures's state, such as, on updated search/updated filter or sort criteria? Or how else do I implement this?
Check this package called shaky_animated_listview in pub.dev, it provides an animation called Shaking Grid which look like the following:
The above animation can be implemented easily like the following:
GridView.count(
crossAxisCount: 3,
// shrinkWrap: true,
children: List.generate(9, (i) => GridAnimatorWidget(
child: Padding(
padding: const EdgeInsets.all(4),
child: ClipRRect(
borderRadius: const BorderRadius.all(Radius.circular(10)),
child: Container(
color: Colors.grey,
),
),
),
),).toList()
)
Related
I was building a menu web app for a bussiness. I imported the images to project and tried to resize them on website but they didnt resize as i expected. I want them to stick eachother and when i zoom in or out i dont want them to move away from each other. but now when i zoom in-out, the distance between each other decreases and increases, they are not fixed.
I DONT WANT TO DİSABLE ZOOM IN/OUT. I WANT TO LEARN HOW TO CONFIGURE IMAGES ON WEBSİTE FOR ZOOMİNG NOT FOR THIS PROJECT BUT MAYBE FOR ANOTHER.
Issue video: https://drive.google.com/drive/u/0/folders/1ibH6EgHEFajeFD9cilcI6SeGIPVPKCQU
Scaffold(
backgroundColor: Color.fromARGB(255, 194, 164, 31),
body: GridView.count(
crossAxisCount: 1,
mainAxisSpacing: 10,
padding: EdgeInsets.all(10),
children: <Widget>[
Container(
child: Image.asset('assets/1.png'),
),
Container(
child: Image.asset('assets/2.png'),
),
Container(
child: Image.asset('assets/3.png'),
),
Container(
child: Image.asset('assets/4.png'),
),
],
),
);
The problem is GridView widget's layouting. I've used ListView instead of GridView and problem solved. Because ListView layouts each widget one after another and then you can put a distance between them. So use ListView...
I want to use badges package to display a badge on items in a Row but like in the screen below the next element is draw on top of the badge.
Row(
children: List.generate(
7,
(index) => Expanded(
child: Padding(
padding: const EdgeInsets.all(2),
child: Badge(
badgeContent: Text('a'),
child: Container(
color: Color((Random().nextDouble() * 0xFFFFFF).toInt()).withOpacity(1.0),
),
),
),
),
),
),
I expect the badge to be displayed on top of all the elements
Thanks for your help.
I think you can't obtain the effect you want with that package because the badge is rigorously connected to the child Container so it doesn't have control over others UI elements.
I think that you need to set a margin so each element has the necessary space to being showed.
I'm trying to expand the height of a given grid of cards, so they are able to fit some more information than they currently do. These cards are wrapped by a GridView.count() that is shrinked, since I'm going to put more things below this widget.
As for now, the cards look like these, in which you can see that one of them overflows the text at the bottom, which is an undesired behavior (especially when I want the cards to have some bottom padding):
Being this the case, I would like to know if it's possible to manually change the card's height. I'm maybe letting this concrete configuration stay and remove some info, since I like the fact that the cards currently maintain their 1x1 proportion, but for curiosity sake, I would like to discover how to do this.
I tried many things, such as wrapping the Card widget with a Container or a SizedBox and manually setting the height, but none of these approaches change anything.
I guess that the problem may be in the GridView itself. This is how it looks:
return FutureBuilder<List<Event>>(
future: new EventsService().getEventsForCoords(),
builder: (context, AsyncSnapshot<List<Event>> snapshot) {
if (snapshot.hasData) {
return GridView.count(
crossAxisCount: 2,
shrinkWrap: true,
children: generateProximityEventCards(snapshot.data));
} else {
return CircularProgressIndicator();
}
});
As you can guess, the generateProximityEventCards method is the one that prints the Card widgets at the end. This is how the method looks as for now:
List<Widget> generateProximityEventCards(List<Event> eventList) {
// Render each card
return eventList.map((Event ev) {
return Card(
semanticContainer: true,
clipBehavior: Clip.antiAliasWithSaveLayer,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
elevation: 5,
margin: EdgeInsets.all(7),
child: SizedBox(
height: 600,
child: Column(
children: <Widget>[
Image(
alignment: Alignment.topCenter,
fit: BoxFit.fitWidth,
image: ev.imageUrl,
height: 110,
width: 200,
),
Container(
child: Text(ev.name),
padding: EdgeInsets.only(left: 10, right: 10),
),
Container(
child: Text(ev.startDate.toString()),
padding: EdgeInsets.only(left: 10, right: 10),
),
Container(
child: Text(ev.address),
padding: EdgeInsets.only(left: 10, right: 10),
),
],
),
));
}).toList();
}
So, in conclussion: how can I change the height of the cards so they can hold more information?
Thanks!
GridView isn't really designed to have tiles of different size. A good option is to use the package flutter_staggered_grid_view.
Now your tile sizes can even be dynamic, check out the code for the gif above!
To automatically fit some variable length text somewhere you can use the package auto_size_text.
I'm trying to make an item go to the bottom of a list. I've tried using Expanded with a child of SizedBox. I've also tried the Align widget. It works with a Column, but not if the parent is a SingleChildScrollView.
What it should look like:
What it does look like:
Code (what it does look like):
return Scaffold(
backgroundColor: Color(0xFFE9E9E9),
body: ListView(
padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 16),
children: <Widget>[
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(16),
),
child: _SettingsList(tournamentId: tournamentId),
),
Expanded(child: const SizedBox()),
Align(
alignment: FractionalOffset.bottomCenter,
child: buildDeleteTournamentButton(),
),
],
),
);
I think the problem is that you are using the Expanded or Align widget as a child of the list view so it tries to put the widget directly below the other ones. To achieve the first design I would recommend one of this two ways:
Replace your ListView with a Stack and use Align to align your "Delete tournament"-Widget at the bottom.
Replace your ListView with a Column and wrap the Container in an Expanded. Place your "Delete tournament"-Widget as the second child of the Column.
I really hope I could help.
The problem is visible on the attached screenshot.
Code of a main widget:
Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Flexible(
child: Decor(
child: Container(),
),
flex: 1,
),
Flexible(
child: Decor(
child: Container(),
),
flex: 6,
)
],
);
Code of a Decor widget:
Container(
decoration: BoxDecoration(
color: COLOR,
),
margin: const EdgeInsets.symmetric(
horizontal: MEDIUM_PADDING,
),
padding: const EdgeInsets.all(MEDIUM_PADDING),
width: 300.0,
child: child,
);
Answering in advance "Why would you even need to do such a Decor Widget"? Both flexibles will be populated with data of some sort. Second flexible will be with a ListView inside and the first one will be a "Header" for what is inside a ListView. Data is retrieved from server every 10s, so the main widget is wrapped with a StreamBuilder.
Problem is that StreamBuilder cannot be shrinked to the size of its child, whereas ListView can, so I wrap both "Header" and a ListView in Decor so that grey background color doesn't take all available space on a screen which than produces black line seen on a screenshot?
So the question is: is there a way either to remove the black line between two widgets in a column?
Also, if you know magic of how to shrink StreamBuilder to the size of its child please answer here too.
Ok I know that this is not a very nice solution and more like workaround but I think the only way to get rid of the line is to set border color of the container in your Decor widget
Container(
decoration: BoxDecoration(
color: COLOR,
border: Border.all(width: 0, color: COLOR) //added line
),
margin: const EdgeInsets.symmetric(
horizontal: MEDIUM_PADDING,
),
padding: const EdgeInsets.all(MEDIUM_PADDING),
width: 300.0,
child: child,
);
First I thought setting border width to 0 will help it but that didn't work.. Color did