Flutter Stack Widget inside ListView widget? - android

I am using the Stack widget in my app and it is working great but now I have a problem with wrapping this Stack widget inside ListView Widget.
I am getting error
RenderBox was not laid out: RenderPointerListener#20d10 relayoutBoundary=up7 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1979 pos 12: 'hasSize'
My Stack Widget is
Widget? stackW() {
return Stack(
alignment: Alignment.center,
children: <Widget>[
Positioned(
top: 70,
width: MediaQuery.of(context).size.width * .9,
height: 150,
child: Center(
child: Container(
width: MediaQuery.of(context).size.width * .9,
decoration: BoxDecoration(
color: Colors.grey[200],
borderRadius: BorderRadius.circular(15)),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text(
"Product Designer",
style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
),
const SizedBox(
height: 10,
),
],
),
),
),
),
Positioned(
top: 30,
left: MediaQuery.of(context).size.width / 2.5,
width: 80,
height: 80,
child: CircleAvatar(
backgroundColor: Colors.white,
child: CircleAvatar(
backgroundColor: Colors.green[100],
radius: 35,
child: const FaIcon(
FontAwesomeIcons.apple,
size: 30,
color: Colors.black,
),
),
),
),
],
);
}
When I am passing stackWidget directly in body then it is working fine but after wrapping inside ListView, it is creating problem.
so Please guide me to achieve my listview data with Stack Widget.
body: stackW()!, //working
body: ListView(
scrollDirection: Axis.vertical,
children: [
stackW()!,
],
),
``` //not working


Both widgets are getting infinite height, you can wrap stackW() with SizedBox widget.
body: LayoutBuilder(
builder: (context, constraints) => ListView(
scrollDirection: Axis.vertical,
children: [
SizedBox(
height: constraints.maxHeight,
width: constraints.maxWidth,
child: stackW()!,
)
],
),
),

Related

- How to fix it : Incorrect use of ParentDataWidget?

I am getting Error Incorrect use of ParentDataWidget.
And the lists not show the item in first time.
The ParentDataWidget Expanded(flex: 1) wants to apply ParentData of type FlexParentData to a RenderObject, which has been set up to accept ParentData of incompatible type ParentData.
Usually, this means that the Expanded widget has the wrong ancestor RenderObjectWidget. Typically, Expanded widgets are placed directly inside Flex widgets.
The offending Expanded is currently placed inside a ConstrainedBox widget.
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
actions: <Widget>[
IconButton(
icon: Icon(Icons.shopping_cart),
onPressed: () {},
)
],
backgroundColor: Colors.green,
),
drawer: Drawer(
child: AppDrawer(),
),
body: SingleChildScrollView(
child: ConstrainedBox(
constraints: BoxConstraints(),
child: Column(
children: <Widget>[
Container(
height: 200,
width: double.infinity,
child: HomeSlider(),
),
Padding(
padding: EdgeInsets.only(top: 14.0, left: 8.0, right: 8.0),
child: Text(
AppLocalizations.of(context)
.translate('leatest_producrs'),
style: TextStyle(
color: Theme.of(context).accentColor,
fontSize: 18,
fontWeight: FontWeight.w700)),
),
Container(
margin: EdgeInsets.symmetric(vertical: 8.0),
height: 200.0,
child: Expanded(
child: ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: cards.length,
itemBuilder: (BuildContext context, int index) => Card(
child: InkWell(
child: Column(
children: [
Flexible(
child: Container(
height: double.infinity,
width: 120,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
cards[index].productImg,
),
fit: BoxFit.fitHeight,
)),
),
),
Container(
width: 150,
padding: EdgeInsets.all(10),
child: Text(cards[index].productName,
style: new TextStyle(fontSize: 12),
softWrap: true),
),
],
),
onTap: () {
Fluttertoast.showToast(
msg: cards[index].productName,
toastLength: Toast.LENGTH_SHORT,
gravity: ToastGravity.BOTTOM,
timeInSecForIosWeb: 1,
backgroundColor: Colors.white70,
textColor: Colors.black,
fontSize: 16.0);
},
),
),
),
),
),
Container(
child: Padding(
padding: EdgeInsets.only(top: 6.0, left: 8.0, right: 8.0),
child: Image(
fit: BoxFit.cover,
image: AssetImage('assets/images/banner-1.jpg'),
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 8.0, left: 8.0, right: 8.0),
child: Text('Featured Products',
style: TextStyle(
color: Theme.of(context).accentColor,
fontSize: 18,
fontWeight: FontWeight.w700)),
),
Padding(
padding: const EdgeInsets.only(
right: 8.0, top: 8.0, left: 8.0),
child: RaisedButton(
color: Theme.of(context).primaryColor,
child: Text('View All',
style: TextStyle(color: Colors.white)),
onPressed: () {
Navigator.pushNamed(context, '/categorise');
}),
)
],
),
Container(
child: GridView.count(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
crossAxisCount: 2,
padding:
EdgeInsets.only(top: 8, left: 6, right: 6, bottom: 12),
children: List.generate(cards.length, (index) {
return Container(
child: Card(
clipBehavior: Clip.antiAlias,
child: InkWell(
onTap: () {
print('Card tapped.');
},
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Flexible(
child: Container(
height: double.infinity,
width: double.infinity,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
cards[index].productImg,
),
fit: BoxFit.fitHeight,
)),
),
),
ListTile(
title: Text(
cards[index].productName,
style: TextStyle(
fontWeight: FontWeight.w700,
fontSize: 12),
)),
],
),
),
),
);
}),
),
),
Container(
child: Padding(
padding: EdgeInsets.only(
top: 6.0, left: 8.0, right: 8.0, bottom: 10),
child: Image(
fit: BoxFit.cover,
image: AssetImage('assets/images/banner-2.jpg'),
),
),
)
],
),
),
));
Error Codes are
══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
The following assertion was thrown while applying parent data.:
Incorrect use of ParentDataWidget.
The ParentDataWidget Expanded(flex: 1) wants to apply ParentData of type FlexParentData to a
RenderObject, which has been set up to accept ParentData of incompatible type ParentData.
Usually, this means that the Expanded widget has the wrong ancestor RenderObjectWidget. Typically,
Expanded widgets are placed directly inside Flex widgets.
The offending Expanded is currently placed inside a ConstrainedBox widget.
The ownership chain for the RenderObject that received the incompatible parent data was:
RepaintBoundary ← NotificationListener<ScrollNotification> ← GlowingOverscrollIndicator ←
Scrollable ← ListView ← Expanded ← ConstrainedBox ← Padding ← Container ← Column ← ⋯
When the exception was thrown, this was the stack:
.
.
.
.
(elided 4 frames from class _RawReceivePortImpl, class _Timer, and dart:async-patch)
════════════════════════════════════════════════════════════════════════════════════════════════════
════════ Exception caught by widgets library ═══════════════════════════════════════════════════════
The following assertion was thrown while applying parent data.:
Incorrect use of ParentDataWidget.
The ParentDataWidget Expanded(flex: 1) wants to apply ParentData of type FlexParentData to a RenderObject, which has been set up to accept ParentData of incompatible type ParentData.
Usually, this means that the Expanded widget has the wrong ancestor RenderObjectWidget. Typically, Expanded widgets are placed directly inside Flex widgets.
The offending Expanded is currently placed inside a ConstrainedBox widget.
The ownership chain for the RenderObject that received the incompatible parent data was:
RepaintBoundary ← NotificationListener<ScrollNotification> ← GlowingOverscrollIndicator ← Scrollable ← ListView ← Expanded ← ConstrainedBox ← Padding ← Container ← Column ← ⋯
When the exception was thrown, this was the stack:
#0 RenderObjectElement._updateParentData.<anonymous closure> (package:flutter/src/widgets/framework.dart:5689:11)
#1 RenderObjectElement._updateParentData (package:flutter/src/widgets/framework.dart:5705:6)
#2 ParentDataElement._applyParentData.applyParentDataToChild (package:flutter/src/widgets/framework.dart:4939:15)
#3 ComponentElement.visitChildren (package:flutter/src/widgets/framework.dart:4600:14)
#4 ParentDataElement._applyParentData.applyParentDataToChild (package:flutter/src/widgets/framework.dart:4942:15)
...
════════════════════════════════════════════════════════════════════════════════════════════════════

You can copy paste run full code below
In your case, you do not need Expanded because you already set Container height to 200
code snippet
Container(
margin: EdgeInsets.symmetric(vertical: 8.0),
height: 200.0,
child: ListView.builder(
working demo
full code
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class CardItem {
String productImg;
String productName;
CardItem({this.productImg, this.productName});
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
List<CardItem> cards = [
CardItem(productImg: "https://picsum.photos/250?image=9", productName: "a"),
CardItem(
productImg: "https://picsum.photos/250?image=10", productName: "b"),
CardItem(
productImg: "https://picsum.photos/250?image=11", productName: "c"),
CardItem(
productImg: "https://picsum.photos/250?image=12", productName: "d"),
CardItem(
productImg: "https://picsum.photos/250?image=13", productName: "e"),
CardItem(
productImg: "https://picsum.photos/250?image=14", productName: "f"),
CardItem(
productImg: "https://picsum.photos/250?image=15", productName: "g"),
CardItem(
productImg: "https://picsum.photos/250?image=16", productName: "h")
];
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
actions: <Widget>[
IconButton(
icon: Icon(Icons.shopping_cart),
onPressed: () {},
)
],
backgroundColor: Colors.green,
),
/* drawer: Drawer(
child: AppDrawer(),
),*/
body: SingleChildScrollView(
child: ConstrainedBox(
constraints: BoxConstraints(),
child: Column(
children: <Widget>[
Container(
height: 200,
width: double.infinity,
child: Text("HomeSlider()"),
),
Padding(
padding: EdgeInsets.only(top: 14.0, left: 8.0, right: 8.0),
child: Text(
'leatest_producrs',
style: TextStyle(
color: Theme.of(context).accentColor,
fontSize: 18,
fontWeight: FontWeight.w700)),
),
Container(
margin: EdgeInsets.symmetric(vertical: 8.0),
height: 200.0,
child: ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: cards.length,
itemBuilder: (BuildContext context, int index) => Card(
child: InkWell(
child: Column(
children: [
Flexible(
child: Container(
height: double.infinity,
width: 120,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
cards[index].productImg,
),
fit: BoxFit.fitHeight,
)),
),
),
Container(
width: 150,
padding: EdgeInsets.all(10),
child: Text(cards[index].productName,
style: new TextStyle(fontSize: 12),
softWrap: true),
),
],
),
onTap: () {
},
),
),
),
),
Container(
child: Padding(
padding: EdgeInsets.only(top: 6.0, left: 8.0, right: 8.0),
child: Image(
fit: BoxFit.cover,
image: AssetImage('assets/images/banner-1.jpg'),
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 8.0, left: 8.0, right: 8.0),
child: Text('Featured Products',
style: TextStyle(
color: Theme.of(context).accentColor,
fontSize: 18,
fontWeight: FontWeight.w700)),
),
Padding(
padding: const EdgeInsets.only(
right: 8.0, top: 8.0, left: 8.0),
child: RaisedButton(
color: Theme.of(context).primaryColor,
child: Text('View All',
style: TextStyle(color: Colors.white)),
onPressed: () {
Navigator.pushNamed(context, '/categorise');
}),
)
],
),
Container(
child: GridView.count(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
crossAxisCount: 2,
padding:
EdgeInsets.only(top: 8, left: 6, right: 6, bottom: 12),
children: List.generate(cards.length, (index) {
return Container(
child: Card(
clipBehavior: Clip.antiAlias,
child: InkWell(
onTap: () {
print('Card tapped.');
},
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Flexible(
child: Container(
height: double.infinity,
width: double.infinity,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
cards[index].productImg,
),
fit: BoxFit.fitHeight,
)),
),
),
ListTile(
title: Text(
cards[index].productName,
style: TextStyle(
fontWeight: FontWeight.w700,
fontSize: 12),
)),
],
),
),
),
);
}),
),
),
Container(
child: Padding(
padding: EdgeInsets.only(
top: 6.0, left: 8.0, right: 8.0, bottom: 10),
child: Image(
fit: BoxFit.cover,
image: AssetImage('assets/images/banner-2.jpg'),
),
),
)
],
),
),
)
);
}
}

The Expanded widget has to be a direct child of a Column, Row or Flex. You have it wrapped in a Container. Try to swap the Container and Expanded widgets.

How to align profile tab in top in my home page with flutter?

I'm coding a layout like homepage from Linkedin, Twitter, etc (example here) with Flutter for Web, but the Profile Tab it's not fixing on top of layout. I need something like gravity property (Android), I tried usign Align class, CrossAxisAlignment, MainAxisAlignment but it didn't work. Also I tried to set a margin/padding subtracting the height of the context with container, but it didn't work either
return SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Padding(
padding: EdgeInsets.only(top: 30, left: 50, right: 50),
child: Row(children: [
Expanded(
flex: 1,
child: Column(
children: [
Container(
margin: EdgeInsets.only(right: 50),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(15),
),
child: Center(child: Text('Trend Stories')))
],
),
),
Expanded(
flex: 2,
child: Column(
children: [
Container(
margin: EdgeInsets.only(right: 50),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(15),
),
height: MediaQuery.of(context).size.height,
child: Center(child: Text('Trend Stories')))
],
),
),
Expanded(
flex: 1,
child: Column(
children: [
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(15),
),
height: MediaQuery.of(context).size.height,
child: Center(child: Text('Trend Stories')))
],
),
),
])));
code

How do I add a blur effect at the right edge horizontal ListView to show that there is more content

I would like a way for the user to see that they can scroll horizontally on my horizontal ListView
Thanks in advance
Edit:
Here is my code #wcyankees424
Container(
height: 50,
child: Stack(
children: <Widget>[
ListView.builder(
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemCount: cheat.buttons.length,
itemBuilder: (context, index) {
return ButtonListItem(cheat.buttons[index]);
}
),
Positioned(
top: 0,
right: 0,
width: 50,
height: MediaQuery.of(context).size.height,
child: ClipRRect(
child: BackdropFilter(
filter: ImageFilter.blur(
sigmaX: 0,
sigmaY: 99
),
child: Container(
color: Colors.black.withOpacity(0.1),
),
),
),
)
],
)
),
And here is a picture of how it looks now:

You can use ShaderMask with a gradient.
You can adjust inside the LinearGradient the stops and the colors to change the effect.
Maybe change Colors.white to Colors.trasnparent
Please try this code, to see some effect.
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: ShaderMask(
shaderCallback: (Rect bounds) {
return LinearGradient(
colors: [Colors.white, Colors.white.withOpacity(0.05)],
stops: [0.7, 1],
tileMode: TileMode.mirror,
).createShader(bounds);
},
child: Container(
height: 100,
child: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
Card(
color: Colors.red,
child: Center(child: Text("012345678910 - 0123")),
),
Card(
color: Colors.yellow,
child: Center(child: Text("012345678910 - 0123")),
),
Card(
color: Colors.blue,
child: Center(child: Text("012345678910 - 0123")),
),
],
),
),
),
),
);
}
These are the examples in images:

Is this the effect you wanted? Try this out let me know what you think.
Positioned(
top: 0,
right: 0,
width: 50,
height: MediaQuery.of(context).size.height,
child: ClipRRect(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 2.5, sigmaY: 2.5), //this determines the blur in the x and y directions best to keep to relitivly low numbers
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Colors.black.withOpacity(0),
Colors.black.withOpacity(
0.3), //This controls the darkness of the bar
],
// stops: [0, 1], if you want to adjust the gradiet this is where you would do it
),
),
),
),
),
),

Flutter | border radius not apply on Android

I want to find out why border radius wouldn't apply top half of the widget on Android.
Here is the image on Android
However on the web, it's working like image below.
Does anyone know why?
Code
Center(
child: Card(
elevation: 1.5,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(16.0))),
child: SizedBox(
width: 250.0,
height: 150.0,
child: Column(
children: <Widget>[
Container(
width: double.infinity,
height: 60.0,
color: Colors.pink[200].withOpacity(0.95),
child: Center(
child: Text('Felicity Jones'),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: Center(
child: Text('9:15'),
),
),
)
],
),
),
),
),

If you observe carefully by changing the opacity of the color for time being to:
color: Colors.pink[200].withOpacity(0.2),
You'll see that the top left and top right corners are cut-off and not filled by the color:
In order to avoid this, use Card widget's clipBehavior: Clip.antiAlias, property that covers all corners of the card with the given color. Here's the updated result:
Hope this answers your question.

You can try the following:
Center(
child:
Card(
elevation: 1.5,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(16.0))),
child: SizedBox(
width: 250.0,
height: 150.0,
child: Column(
children: <Widget>[
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.vertical(
top: new Radius.circular(16.0)
),
color: Colors.pink[200].withOpacity(0.95),
),
width: double.infinity,
height: 60.0,
child: Center(
child: Text('Felicity Jones'),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: Center(
child: Text('9:15'),
),
),
)
],
),
),
),
),
Note that the color was moved inside the BoxDecoration as it will fail to compile otherwise.
I kept the shape attribute so that the lower part of the card will be rounded as well. You could tinker with that and remove it, if necessary.

Edit: In your case like #Darshan mentioned you can just set clipBehavior: Clip.antiAlias in Card widget.
You can use also use ClipRRect to force the child to have the given border radius, if you don't have clipBehavior.
Center(
child: Card(
elevation: 1.5,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16.0),
),
child: ClipRRect(
borderRadius: BorderRadius.circular(16.0),
child: SizedBox(
width: 250.0,
height: 150.0,
child: Column(
children: <Widget>[
Container(
width: double.infinity,
height: 60.0,
color: Colors.pink[200].withOpacity(0.95),
child: Center(
child: Text('Felicity Jones'),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: Center(
child: Text('9:15'),
),
),
)
],
),
),
),
),
)

How to make Horizontal Scroll ListView inside the SingleChildScroll

I want to create a layout like this,
Image
I want to create a flutter app which can scroll vertically and also some content of the app should scroll horizontally as describe in the picture. I used ListView with scroll horizontal inside the SingleChildScrollView but it not work. It hide the content Horizontal listView content and the content below the ListView.
So How to make this layout
Code I used,
body: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 10),
child: CustomizedAppBar(),
),
SizedBox(
height: 30.0,
),
Padding(
padding: const EdgeInsets.only(left: 10,bottom: 5),
child: Text(
'Hello Jessica.',
style: kArtistNamePlayScreen,
),
),
Padding(
padding: const EdgeInsets.only(left: 10,bottom: 40),
child: Text(
'Recommendeddd',
style: kSongNamePlayScreen,
),
),
//TODO Insert Carousel Here
ListView(
children: <Widget>[
Container(
height: 150,
width: 230,
decoration: BoxDecoration(
color: Colors.grey[100],
borderRadius: BorderRadius.circular(20.0),
image: DecorationImage(
image: AssetImage('images/Panini_l.jpg'),
fit: BoxFit.cover,
),
boxShadow: [
new BoxShadow(
color: Colors.grey,
offset: Offset(1.5,1.5),
blurRadius: 3,
),
],
),
),
],
),
Text(
'Popular artists',
style: kSongNamePlayScreen,
),
Container(
child: Row(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(20.0),
child: Container(
width: 60,
height: 75,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(8)),
image: DecorationImage(
image: AssetImage('images/Panini_l.jpg'),
fit: BoxFit.cover,
)
),
),
)
],
),
),
SongList(
songListSongName: 'Beautiful People',
songListArtistName: 'Ed Sheeran',
songListAvatarImage: AssetImage('images/beautiful_people_l.jpg'),
heartClick: (){},
),
SongList(
songListSongName: 'Panini',
songListArtistName: 'Lil Nas X',
songListAvatarImage: AssetImage('images/Panini_l.jpg'),
heartClick: (){},
),
SongList(
songListSongName: 'Do You Sleep',
songListArtistName: 'Sam Samith',
songListAvatarImage: AssetImage('images/Do_you_sleep_l.jpg'),
heartClick: (){},
),
SongList(
songListSongName: 'Bad Guys',
songListArtistName: 'Billie Eilish',
songListAvatarImage: AssetImage('images/Bad_guys_l.jpg'),
heartClick: (){},
)
],
),
)

Instead of ListView, you can use SingleChildScrollView with Row as child. Then give the SingleChildScrollView the scrollDirection: Axis.horizontal Code:
//TODO Insert Carousel Here
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: <Widget>[
Container(
height: 150,
width: 230,
decoration: BoxDecoration(
color: Colors.grey[100],
borderRadius: BorderRadius.circular(20.0),
image: DecorationImage(
image: AssetImage('images/Panini_l.jpg'),
fit: BoxFit.cover,
),
boxShadow: [
new BoxShadow(
color: Colors.grey,
offset: Offset(1.5, 1.5),
blurRadius: 3,
),
],
),
),
],
),
),

You could use a ListView with horizontal scroll, it has to be wrapped inside a Container or SizedBox with a specific height.
Using ListView.builder could be more efficient, here is a quick example:
final _items = List.generate(20, (e) => e);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: SingleChildScrollView(
child: Column(
children: <Widget>[
Text("A"),
SizedBox(
height: 100.0,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: _items.length,
itemBuilder: (context, index) {
print('$index');
return SizedBox(
width: 150.0,
child: Center(child: Text('${_items[index]}')),
);
}),
),
Text("B"),
],
),
),
);
}
You could see the prints in the console, indicating the items are created only when they're scrolled onto the screen.

Categories

Resources