Hello,
I would like to make a text widget in a card invisible in the bottom part of the ListView, visible in the top quarter of the ListView and fade to gradual visibility in between. How do I do this with FlutterFlow?
I wasn't able to create a custom ListViews, is this possible to do?
I wasn't able to create a custom build method, is this possible to do?
I wasn't able to pass BuildContext to my custom method, is this possible to do?
Thanks,
Jozef
A simplified version of what I am looking for is this:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Dynamic Visibility ListView'),
),
body: DynamicVisibilityListView(),
),
);
}
}
class DynamicVisibilityListView extends StatefulWidget {
@override
DynamicVisibilityListViewState createState() => DynamicVisibilityListViewState();
}
class DynamicVisibilityListViewState extends State<DynamicVisibilityListView> {
@override
Widget build(BuildContext context) {
return NotificationListener<ScrollNotification>(
onNotification: (scrollNotification) {
setState(() {}); // Force a rebuild to update visibility of items
return true;
},
child: ListView.builder(
itemCount: 20,
itemBuilder: (BuildContext context, int index) {
return DynamicVisibilityListItem(index: index);
},
),
);
}
}
class DynamicVisibilityListItem extends StatelessWidget {
final int index;
DynamicVisibilityListItem({required this.index});
@override
Widget build(BuildContext context) {
const double ITEM_HEIGHT = 100.0;
const double FULL_OPACITY_POSITION = 0.15;
const double NO_OPACITY_POSITION = 0.30;
double viewportHeight = MediaQuery.of(context).size.height;
double scrollPosition = Scrollable.of(context)!.position.pixels;
var itemPositionOffset = ITEM_HEIGHT index;
var relativePosition = itemPositionOffset - scrollPosition;
double opacity = 0;
if (relativePosition < viewportHeight FULL_OPACITY_POSITION) {
opacity = 1;
} else if (relativePosition < viewportHeight NO_OPACITY_POSITION) {
var difference = viewportHeight NO_OPACITY_POSITION - relativePosition;
var range = viewportHeight * (NO_OPACITY_POSITION - FULL_OPACITY_POSITION);
opacity = difference / range;
}
return Card(
child: SizedBox(
height: ITEM_HEIGHT,
child: Center(
child: Opacity(
opacity: opacity,
child: Text('Item $index'),
),
),
),
);
}
}