flutter developers. I am trying to figure out following design in flutter mobile. I am not understanding how can I search or can I apply this kind design.
You see the item getting fade on top and bottom area?
Please give me some idea for doing this kind of design on flutter mobile?
The fade on top and bottom area can be achieved using a linear gradient where you have a solid color and transparent one, and then you place it on top of you scrollable content using a stack and IgnorePointer widget to allow the gesture events to be sent :
Here is an example of how to apply it at the top area:
class GradientWrapper extends StatelessWidget {
final Widget child;
final Color startColor;
final Alignment begin;
final Alignment end;
const GradientWrapper({
Key? key,
required this.child,
required this.startColor,
this.begin = Alignment.topCenter,
this.end = Alignment.bottomCenter,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Stack(
children: [
child,
IgnorePointer(
child: Container(
height: 200,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: begin,
end: end,
stops: [0.0, 0.5, 1.0],
colors: [
startColor,
startColor,
startColor.withOpacity(0.0),
],
),
),
),
),
],
);
}
}
And then apply it on your ListView or any other widget like this:
return GradientWrapper(
startColor: Colors.white,
child: SizedBox(
height: 300,
child: ListView(
itemExtent: 50,
children: items.map((item) {
return Center(
child: Text(
item,
style: const TextStyle(
fontSize: 24,
color: Colors.black,
),
),
);
}).toList(),
),
),
);