In this example, I have shared how to know if a widget is visible within a viewport? I’ve written a basic example which shows this in action. I’ll describe the various elements below, but please be aware that:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 |
import 'package:flutter/material.dart'; import 'package:flutter/rendering.dart'; void main() => runApp(new MyApp()); class MyApp extends StatefulWidget { @override State<StatefulWidget> createState() => new MyAppState(); } class MyAppState extends State<MyApp> { GlobalKey<State> key = new GlobalKey(); double fabOpacity = 1.0; @override Widget build(BuildContext context) { return new MaterialApp( home: new Scaffold( appBar: new AppBar( title: new Text("Scrolling."), ), body: NotificationListener<ScrollNotification>( child: new ListView( itemExtent: 100.0, children: [ ContainerWithBorder(), ContainerWithBorder(), ContainerWithBorder(), ContainerWithBorder(), ContainerWithBorder(), ContainerWithBorder(), ContainerWithBorder(), ContainerWithBorder(), ContainerWithBorder(), ContainerWithBorder(), ContainerWithBorder(), new MyObservableWidget(key: key), ContainerWithBorder(), ContainerWithBorder(), ContainerWithBorder(), ContainerWithBorder(), ContainerWithBorder(), ContainerWithBorder(), ContainerWithBorder(), ContainerWithBorder() ], ), onNotification: (ScrollNotification scroll) { var currentContext = key.currentContext; if (currentContext == null) return false; var renderObject = currentContext.findRenderObject(); RenderAbstractViewport viewport = RenderAbstractViewport.of(renderObject); var offsetToRevealBottom = viewport.getOffsetToReveal(renderObject, 1.0); var offsetToRevealTop = viewport.getOffsetToReveal(renderObject, 0.0); if (offsetToRevealBottom.offset > scroll.metrics.pixels || scroll.metrics.pixels > offsetToRevealTop.offset) { if (fabOpacity != 0.0) { setState(() { fabOpacity = 0.0; }); } } else { if (fabOpacity == 0.0) { setState(() { fabOpacity = 1.0; }); } } return false; }, ), floatingActionButton: new Opacity( opacity: fabOpacity, child: new FloatingActionButton( onPressed: () { print("YAY"); }, ), ), ), ); } } class MyObservableWidget extends StatefulWidget { const MyObservableWidget({Key key}) : super(key: key); @override State<StatefulWidget> createState() => new MyObservableWidgetState(); } class MyObservableWidgetState extends State<MyObservableWidget> { @override Widget build(BuildContext context) { return new Container(height: 100.0, color: Colors.green); } } class ContainerWithBorder extends StatelessWidget { @override Widget build(BuildContext context) { return new Container( decoration: new BoxDecoration(border: new Border.all(), color: Colors.grey), ); } } |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.