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!),
),
);
},
),
),
],
),
Related
So I'm trying to implement a flex listview similar to the google FlexLayoutManager to the horizontal axis with wrap, you can see an example in the wrap section
https://github.com/google/flexbox-layout/raw/main/assets/flex-wrap.gif
here is my code:
ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: categories.length,
padding: EdgeInsetsDirectional.only(start: 16, end: 12),
itemBuilder: (context, index) {
return InkWell(
onTap: (){
},
child: Container(
height: 24,
alignment: Alignment.center,
child: Text(
categories[index].name,
),
),
);
},
)
what I have to add to my listview to make the items wrap and move to the next row if they exceeded the screen width?
Not tested, but as I indicated in my comment, I'd use something like:
Wrap(
children: [
for (final c in categories)
InkWell(child: Text(c.name)),
]);
adding of course all your parameters, and the extra container.
As an alternative, you can use a GridView.builder instead of ListView.builder:
Creates a scrollable, 2D array of widgets that are created on demand.
result:
I have made my window very small and the children still wrap:
With the window maximized:
code:
GridView.builder(
gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 200,
childAspectRatio: 3 / 2,
crossAxisSpacing: 20,
mainAxisSpacing: 20),
itemCount: _categories.length,
padding: EdgeInsetsDirectional.only(start: 16, end: 12),
itemBuilder: (context, index) {
return InkWell(
onTap: () {},
child: Container(
height: 24,
alignment: Alignment.center,
child: Text(
categories[index].name,
),
),
);
},
)
[enter image description here][1]
Inside My column, there is a stack, a carousel slider,a gridview builder. I want to scroll all of them together. I tried to use singlechildscrollview as you can see in the code below. Please Someone help me how can I scroll those things together.
[1]: https://i.stack.imgur.com/FYexC.png` enter code here`
Scaffold(
backgroundColor: Colors.orange,
// Color(0xFFFFF176),
body: SingleChildScrollView(
child: Column(
children: [
Expanded(
child: Stack(
alignment: Alignment.bottomCenter,
children: [
CarouselSlider(
items: slideImage
.map((image) =>
Builder(builder: (BuildContext context) {
return Container(
height: 200,
width: 500,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(40),
image: DecorationImage(
image: AssetImage(image),
fit: BoxFit.fill),
),
);
}))
.toList(),
options: CarouselOptions(
onPageChanged: (index, reason) {
setState(() {
activeIndex = index;
});
},
height: 300,
viewportFraction: 1,
autoPlay: true,
),
),
Padding(
padding: const EdgeInsets.all(10.0),
child: AnimatedSmoothIndicator(
activeIndex: activeIndex, count: slideImage.length),
),
],
),
),
SizedBox(
height: 10,
),
Expanded(
child: GridView.builder(
shrinkWrap: true,
// physics: NeverScrollableScrollPhysics(),
itemCount: menuImage.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: 0.8,
crossAxisSpacing: 8,
mainAxisSpacing: 8,
),
itemBuilder: (context, index) => Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
),
color: Color(0xFFFFFDE7),
elevation: 10,
child: GridTile(
child: Column(
children: [
Image.asset(
menuImage[index],
fit: BoxFit.fill,
),
Text(
title[index],
style: TextStyle(fontSize: 18),
),
],
),
),
),
),
),
],
),
),
);
}
}
It would be best if you gave height to the column you are using singlechildeScrollview.
Wrap column widget in container or sizedbox widget and give it height.
column widget has children widget GridView.builder that is wrapped in expanded so gridview.builder will try to take all available height in the column which will be infinite because it's not defined and you will get column covering screen taking infinite screen height in short blank screen.
In flutter, Column will take height as much as it can, SingleChildScrollView child dont have height (infinite). Combine together, Flutter don't know how to render them correctly and causing error.
To solve it, try to determine the height of Column by widgget like SizedBox or determine the mainSize.min.
Another way to solve it is wrap Column by IntrinsicHeight but not recommend cause it heavy.
If it takes too much height. so give height to the column.
like this..
SingleChildScrollView(
child: SizedBox(
height: 500,
child: Column(
children: const [...],
),
),
)
your expanded widget is taking whole space of column try removing it or replacing it with Sizedbox.
I need ripple effect when tap image like facebook my day. Use Ink.image for grid view image not work in my code. I want to ripple when on tap action trigger on my image but my code only work for pressing. Also add the Material widget to the parent of Ink.image widget. Please solve me.
This is my code.
Expanded(
child: GridView.builder(
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2),
controller: _scrollController,
padding: EdgeInsets.all(8.0),
itemCount: _agentsList.length,
shrinkWrap: true,
physics: ClampingScrollPhysics(),
itemBuilder: (BuildContext context, int index) {
return Stack(
children: [
Container(
margin: EdgeInsets.all(margin),
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(19.0)),
child: Material(
clipBehavior:Clip.hardEdge,
child: Ink.image(
image: CachedNetworkImageProvider(
_agentsList[index].agentPhoto,
),
fit: BoxFit.cover,
child: InkWell(
splashFactory:InkSplash.splashFactory,
onTap: () {
widget.viewType =
Agent.current != null
? "hello"
: "";
Navigator.of(context)
.pushNamed('/ProfileView',
arguments: {
"agent":
_agentsList[index]
});
},
),
)
),
),
),
],
);
}))
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 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
],
),