Flutter 在滚动 SingleChildScrollView 的同时更改堆栈中可拖动小部件的偏移量

Question

I have a stack of widgets in Flutter. The lowest stack is a large image that is contained inside SingleChildScrollView. I've set up a ScrollController so I know when the image has been horizontally scrolled in the view.

Next in the stack I have several Positioned widgets (these are draggable so that they can moved around independent of each other).

What I'd like to do is when the SingleChildScrollView is scrolled, I'd like to update the position of each of the positioned widgets higher up the stack.

I've considered Stream, rebuildAllChildren and ValueNotifier but all seem quite complex for what, on the face of it, should be quite a simple thing to achieve. I'm probably missing something very obvious somewhere!

Here's my code so far:

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';

class LayoutScreen extends StatefulWidget {
  LayoutScreen();

  @override
  _LayoutScreenState createState() => _LayoutScreenState();
}

class _LayoutScreenState extends State<LayoutScreen> {
  ScrollController _controller;
  Offset boxoneposition;
  BuildContext context;

  _scrollListener() {
    print(_controller.offset);
    boxoneposition=Offset(100.0, 100);
    setState(() {
      print(boxoneposition);
      // this was a test - the value of boxoneposition is updated, however the view isn't
    });
 }

  @override
  void initState() {
    _controller = ScrollController();
    _controller.addListener(_scrollListener);

    boxoneposition = Offset(0.0, 30);

    super.initState();
  }

  DragBox boxOne() {
    // Trying to set up outside of widget build
    return DragBox(boxoneposition, 'Box One Yep', Colors.blueAccent, 1);
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[

        SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          controller: _controller,
          child: Container(
            width: 1000,
            height: 1000,
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage('assets/images/logo.png'),
                fit: BoxFit.cover,
                repeat: ImageRepeat.noRepeat,
              ),
            ),
          ),
        ),
        //DragBox(boxoneposition, 'Box One', Colors.blueAccent, 1),
        boxOne(),
        DragBox(Offset(200.0, 50.0), 'Box Two', Colors.orange, 2),
        DragBox(Offset(300.0, 80.0), 'Box Three', Colors.lightGreen, 3),
      ],
    );
  }
}

class DragBox extends StatefulWidget {
  final Offset initPos;
  final String label;
  final Color itemColor;
  final int boxnumber;

  DragBox(this.initPos, this.label, this.itemColor, this.boxnumber);

  @override
  DragBoxState createState() => DragBoxState();
}

class DragBoxState extends State<DragBox> {
  Offset position = Offset(0.0, 0.0);
  String imagePath="";

  @override
  void initState() {
    super.initState();
    position = widget.initPos;
  }

  getBoxPic() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    setState(() {
      String key='picture'+widget.boxnumber.toString();
      imagePath=prefs.getString(key);
    });
    print(imagePath);
    return File(imagePath);
  }

  @override
  Widget build(BuildContext context) {
    return Positioned(
      left: position.dx,
      top: position.dy,
      child: Draggable(
        data: widget.itemColor,
        child: Container(
          width: 100.0,
          height: 100.0,
          color: widget.itemColor,
          child: Center(
            child: 
            Image.asset('assets/images/logo.png')
          ),
        ),
        onDragStarted: () {
          setState(() {
            print("Foobar");
          });
        },
        onDraggableCanceled: (velocity, offset) {
          setState(() {
            position = offset;
            if (widget.boxnumber==1) {
              print("Wibble");
            }
          });
        },
        feedback: Container(
          width: 120.0,
          height: 120.0,
          color: widget.itemColor.withOpacity(0.5),
          child: Center(
            child: Text(
              widget.label,
              style: TextStyle(
                color: Colors.white,
                decoration: TextDecoration.none,
                fontSize: 18.0,
              ),
            ),
          ),
        ),
      )
    );
  }
}

Any help greatly appreciated!

Answer 1

I was being a fool. Funny how walking away from something overnight and coming back to it clears the fog!

I sorted this out by simply placing an entire stack into the SingleChildScrollView. The scrollview is wider and horizontally scrollable and the rest of the elements in the stack correctly maintain their positons even if the scrollview is moved and they disappear off screen.

The solution was very simple. For completeness, here's the updated code:

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';

class LayoutScreen extends StatefulWidget {
  LayoutScreen();

  @override
  _LayoutScreenState createState() => _LayoutScreenState();
}

class _LayoutScreenState extends State<LayoutScreen> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Arrange your images'),
        backgroundColor: Colors.orange,
      ),
      body: SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: Stack(
          children: <Widget>[
            Container(
              width: 1000,
              height: 1000,
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: AssetImage('assets/images/background.jpg'),
                  fit: BoxFit.cover,
                  repeat: ImageRepeat.noRepeat,
                ),
              ),
            ),
            DragBox(Offset(100.0, 10.0), 'Box One', Colors.blueAccent, 1),
            DragBox(Offset(200.0, 50.0), 'Box Two', Colors.orange, 2),
            DragBox(Offset(300.0, 80.0), 'Box Three', Colors.lightGreen, 3),
          ]
        ),
      )
    );
  }
}

class DragBox extends StatefulWidget {
  final Offset initPos;
  final String label;
  final Color itemColor;
  final int boxnumber;

  DragBox(this.initPos, this.label, this.itemColor, this.boxnumber);

  @override
  DragBoxState createState() => DragBoxState();
}

class DragBoxState extends State<DragBox> {
  Offset position = Offset(0.0, 0.0);
  String imagePath="";

  @override
  void initState() {
    super.initState();
    position = widget.initPos;
  }

  getBoxPic() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    setState(() {
      String key='picture'+widget.boxnumber.toString();
      imagePath=prefs.getString(key);
    });
    print(imagePath);
    return File(imagePath);
  }
@override
  Widget build(BuildContext context) {
    return Positioned(
      left: position.dx,
      top: position.dy,
      child: Draggable(
        data: widget.itemColor,
        child: Container(
          width: 100.0,
          height: 100.0,
          color: widget.itemColor,
          child: Center(
            child: 
            Image.asset('assets/images/logo.png')
          ),
        ),
        onDragStarted: () {
          setState(() {
            print("Foobar");
          });
        },
        onDraggableCanceled: (velocity, offset) {
          setState(() {
            position = offset;
            if (widget.boxnumber==1) {
              print("Wibble");
            }
          });
        },
        feedback: Container(
          width: 120.0,
          height: 120.0,
          color: widget.itemColor.withOpacity(0.5),
          child: Center(
            child: Text(
              widget.label,
              style: TextStyle(
                color: Colors.white,
                decoration: TextDecoration.none,
                fontSize: 18.0,
              ),
            ),
          ),
        ),
      )
    );
  }
}