I have a Staggered GridView that is as given below. In every item of the grid I'm trying to place an Icon in it's center, overlaying on top of the image. I tried using a Stack but the Icon seems displaced.
This is my code:
Scaffold(
body: Align(
alignment: Alignment.topCenter,
child: StaggeredGridView.countBuilder(
crossAxisCount: 4,
itemCount: 8,
itemBuilder: (BuildContext context, int index) {
return Container(
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(6)),
child: Image.network(
'https://images.unsplash.com/photo-1534361960057-19889db9621e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
fit: BoxFit.fitHeight,
),
),
);
},
staggeredTileBuilder: (int index) =>
new StaggeredTile.count(2, index.isEven ? 2 : 3),
mainAxisSpacing: 4.0,
crossAxisSpacing: 4.0,
),
),
);
and this is what the result looks like:
And this is what I've been trying to achieve:
You used the correct widget Stack but maybe you missed something.
I wrapped the Container by Stack with fit: StackFit.expand, to fill all the space, and the Positioned will be in the center
So here the full code and it might help:
Scaffold(
body: Align(
alignment: Alignment.topCenter,
child: StaggeredGridView.countBuilder(
crossAxisCount: 4,
itemCount: 8,
itemBuilder: (BuildContext context, int index) {
return Stack(
fit: StackFit.expand,
children: [
Container(
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(6)),
child: Image.network(
'https://images.unsplash.com/photo-1534361960057-19889db9621e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
fit: BoxFit.fitHeight,
),
),
),
Positioned(child: Icon(Icons.play_arrow))
],
);
},
staggeredTileBuilder: (int index) =>
new StaggeredTile.count(2, index.isEven ? 2 : 3),
mainAxisSpacing: 4.0,
crossAxisSpacing: 4.0,
),
),
)
Use the Stack widget with an alignment property of center.
child: Stack(
alignment: Alignment.center,
children: <Widget>[
//Image
//Icon
],
),
Related
I used timelines package .It aligned in center by default. I want to align timelines from top left in Container but that doesnt work. Here is a code i have tried.
Container(
alignment: Alignment.topLeft,
child: FixedTimeline.tileBuilder(
builder: TimelineTileBuilder.fromStyle(
contentsAlign: ContentsAlign.basic,
connectorStyle: ConnectorStyle.solidLine,
indicatorStyle: IndicatorStyle.outlined,
contentsBuilder: (context, index) => Padding(
padding: const EdgeInsets.all(24.0),
child: Text('Timeline Event $index'),
),
itemCount: 3,
),
),
),
There is a option for what you want in Timelines package.
Please give a 'nodePosition' option to 'theme' parameter in tileBuilder.
The 'nodePosition' can have value from 0 to 1.0 double type.
Because default value is a 0.5, timeline will be located at center.
theme: TimelineTheme.of(context).copyWith(
nodePosition: 0,
),
Container(
alignment: Alignment.topLeft,
child: FixedTimeline.tileBuilder(
theme: TimelineTheme.of(context).copyWith(
nodePosition: 0,
),
builder: TimelineTileBuilder.fromStyle(
contentsAlign: ContentsAlign.basic,
connectorStyle: ConnectorStyle.solidLine,
indicatorStyle: IndicatorStyle.outlined,
contentsBuilder: (context, index) => Padding(
padding: const EdgeInsets.all(24.0),
child: Text('Timeline Event $index'),
),
itemCount: 3,
),
),
);
If you have used a column widget please add
crossAxisAlignment : CrossAxisAlignment.start
I'm afraid it's a limitation of the package that you're using, because it is designed to take all width available.
It looks like it helps a bit to wrap it in an IntrinsicWidth like this
Container(
alignment: Alignment.topLeft,
child: IntrinsicWidth(
child: FixedTimeline.tileBuilder(
builder: TimelineTileBuilder.fromStyle(
contentsAlign: ContentsAlign.basic,
connectorStyle: ConnectorStyle.solidLine,
indicatorStyle: IndicatorStyle.outlined,
contentsBuilder: (context, index) => Padding(
padding: const EdgeInsets.all(24.0),
child: Text('Timeline Event $index'),
),
itemCount: 3,
),
),
),
)
But that still leaves some space on the left side for opposite content (or using ContentsAlign.reverse)
You can align widget with below code if your widget taking more width than it's size in the screen
crossAxisAlignment : CrossAxisAlignment.start,
For example,
Column(
crossAxisAlignment : CrossAxisAlignment.start,
children : [
FixedTimeline.tileBuilder(
builder: TimelineTileBuilder.fromStyle(
contentsAlign: ContentsAlign.basic,
connectorStyle: ConnectorStyle.solidLine,
indicatorStyle: IndicatorStyle.outlined,
contentsBuilder: (context, index) => Padding(
padding: const EdgeInsets.all(24.0),
child: Text('Timeline Event $index'),
),
itemCount: 3,
),
),
]
)
is it possible to put the GridView into Carousel in flutter like this??
i don't understand about the carousel but i learn it and i get the Carousel more useful then grid-view if i follow my design?
this is my GridView Code
Container(
margin: EdgeInsets.all(2),
child: new StaggeredGridView.countBuilder(
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
crossAxisCount: 2,
crossAxisSpacing: 12,
mainAxisSpacing: 12,
itemCount: imageList.length,
itemBuilder: (context, index) {
return Container(
decoration: BoxDecoration(
color: Colors.transparent,
borderRadius:
BorderRadius.all(Radius.circular(12))),
child: ClipRRect(
borderRadius:
BorderRadius.all(Radius.circular(12)),
child: FadeInImage.memoryNetwork(
placeholder: kTransparentImage,
image: imageList[index],
fit: BoxFit.cover,
),
),
);
},
staggeredTileBuilder: (index) {
return new StaggeredTile.count(
1, index.isEven ? 1 : 2);
}),
)
Yes you can simply use StaggeredGridView inside CarouselSlider. About the UI you are trying to archive, the first image(index=0) will be the large one. If we try to simplify the UI by dividing the pattern, we can see there are three GridItem can think as single bloc, and to get the left one larger we need to use StaggeredTile.count(1, index % 3 == 0 ? 2 : 1);. In this case staggeredTileBuilder will be
staggeredTileBuilder: (index) {
return StaggeredTile.count(1, index % 3 == 0 ? 2 : 1);
}),
Widget
return Scaffold(
body: CarouselSlider(
items: [
Container(
margin: EdgeInsets.all(2),
child: StaggeredGridView.countBuilder(
// physics: NeverScrollableScrollPhysics(), // it can use scollable if upper widget dont cause any issue
shrinkWrap: true,
crossAxisCount: 2,
crossAxisSpacing: 12,
mainAxisSpacing: 12,
itemCount: imageList.length,
itemBuilder: (context, index) {
return Container(
decoration: const BoxDecoration(
color: Colors.transparent,
borderRadius: BorderRadius.all(Radius.circular(12))),
child: ClipRRect(
borderRadius:
const BorderRadius.all(Radius.circular(12)),
child: Container(
color: Colors.amber,
alignment: Alignment.center,
child: Text(index.toString()),
)
// FadeInImage.memoryNetwork(
// // placeholder: kTransparentImage,
// image: imageList[index],
// fit: BoxFit.cover,
// ),
),
);
},
staggeredTileBuilder: (index) {
return StaggeredTile.count(1, index % 3 == 0 ? 2 : 1);
}),
),
Container(
color: Colors.deepPurple,
),
Container(
color: Colors.deepOrange,
),
],
options: CarouselOptions(aspectRatio: 1, viewportFraction: 1),
),
);
I would say practice with Text Widget with viewing index to understand what and how widget is changing and set the logic inside staggeredTileBuilder to get the outcome. And about the imagePath you aren't passing string value on that, debug/print the path to verify it.
For more about
carousel_slider
flutter_staggered_grid_view
Staggered Grid View on yt you can find many by searching
I am new to Flutter. I just want to make a simple app which contains a horizontal carousel, 3 gridviews with 4 item each inside a scrollable area. How to make that? means which widgets?
Do I need to use SliverList or something else?
You can use the following code to make such an app.For carousels you will need a package named carousel_slider to create carousels in flutter and you can use gridView builder widget to get a grid view.It may show error if you just use gridview.builder so we wrap it with Flexible widget.
Column(
children: [
Container(
child: CarouselSlider.builder(
itemCount: {ur_array}.length,
options: CarouselOptions(
autoPlay: true,
aspectRatio: 4.0,
enlargeCenterPage: true,
),
itemBuilder: (context, index, i) {
return InkWell(
onTap: () {
},
child: ClipRRect(
borderRadius: BorderRadius.circular(15.0),
child: Container(
child: Center(
child: Image.network(
{imageurlyouwanttoshow},
fit: BoxFit.cover,
width: 1000)),
),
),
);
},
)),
Flexible(
child: GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 6.0,
mainAxisSpacing: 6.0),
itemCount: controller.datas.length,
itemBuilder: (context, i) {
return InkWell(
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(10.0)),
child: ImageCacheing(url: controller.datas[i].imgurl!),
),
);
},
),
),
],
),
I am writing a page in which there will be Istria events, which I could leaf through. The whole event looks the way I want it to. But the problem is that I want to add a header to this "History Event " container, in the center (which would remain in place when scrolling). I can't do it in any way, I will be grateful for your help
My Page:
My code:
Expanded(
child: Container(
alignment: Alignment.center,
decoration: BoxDecoration(border: Border.all(width: 2), borderRadius: BorderRadius.circular(25)),
child: Scrollbar(
child: new ListView(
shrinkWrap: true,
children: [
Container(
alignment: Alignment.bottomLeft,
child: FixedTimeline.tileBuilder(
theme: TimelineThemeData(
nodePosition: 0.23,
color: Colors.blueGrey,
indicatorTheme: IndicatorThemeData(
position: 2,
size: 20.0,
),
connectorTheme: ConnectorThemeData(
thickness: 2.5,
),
),
builder: TimelineTileBuilder.connectedFromStyle(
contentsAlign: ContentsAlign.basic,
oppositeContentsBuilder: (context, index) => Padding(
padding: const EdgeInsets.all(8.0),
child: Text('21.09.16 \ 14:48'),
),
contentsBuilder: (context, index) => Card(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text('история событий (тестовое событие)(тестовое событие)'),
),
),
connectorStyleBuilder: (context, index) => ConnectorStyle.solidLine,
indicatorStyleBuilder: (context, index) => IndicatorStyle.dot,
itemCount: 10,
),
)
),
],
)),
)
)
I want to do it like this
Positioned widget is what you are searching for.
https://api.flutter.dev/flutter/widgets/Positioned-class.html
I have a List in my Flutter app in which I am trying to resize the leading image to ressemble the List as shown below. I can't however understand how to fix the aspect ratio to have the height equal to the width and make the box a square.
This is my code for the ListView:
Expanded(
child: ListView.builder(
itemExtent: 100.0,
// padding: EdgeInsets.all(10.0),
itemCount: filteredUsers.length,
itemBuilder: (BuildContext context, int index) {
return ListTile(
leading: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(4.0)),
child: Image.network(
"https://d36tnp772eyphs.cloudfront.net/blogs/1/2018/02/Taj-Mahal.jpg",
),
),
title: Text("Taj Mahal"),
subtitle: Text("India"));
},
),
),
This is what it looks like:
And this is what I'm trying to achieve:
To create a square crop of the image on your ListTile, you can use the AspectRatio widget to define the child's aspect ratio as (1 / 1) to make a square, then set Image.network fit to BoxFit.cover.
ListView.builder(
itemCount: 20,
itemBuilder: (BuildContext context, int index) {
return ListTile(
leading: AspectRatio(
aspectRatio: 1,
child: ClipRRect(
borderRadius: const BorderRadius.all(Radius.circular(4.0)),
child: Image.network(
'https://d36tnp772eyphs.cloudfront.net/blogs/1/2018/02/Taj-Mahal.jpg',
fit: BoxFit.cover,
),
),
),
title: Text('Title $index'),
subtitle: Text('Subtitle $index'),
);
},
),