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(),
          new MyObservableWidget(key: key),
          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 != 1.0) {
            setState(() {
              fabOpacity = 1.0;
            });
          }
        } else {
          if (fabOpacity == 1.0) {
            setState(() {
              fabOpacity = 0.0;
            });
          }
        }
        return false;
      },
    ),
    floatingActionButton: new Opacity(
      opacity: fabOpacity,
      child: Align(
        alignment: Alignment.bottomCenter,
        child: new FloatingActionButton.extended(
          label: Text('sticky buy button'),
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(4.0)),
          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 RaisedButton(
      onPressed: () {

      },
      color: Colors.lightGreenAccent,
      child: Text('This is my buy button', style: TextStyle(color: Colors.blue),),
    );
  }
}

class ContainerWithBorder extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Container(
      decoration: new BoxDecoration(border: new Border.all(), color: Colors.grey),
    );
  }
}