Add widget on ListView.builder Item widget using Positioned widget

Question

I wants to add a widget above the Listview item widget but it shows only up to the screen size.On Scrolling ListView stack items is not visible.

Here is my code:

Stack(
  children: <Widget>[
          Positioned.fill(
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: ListView.builder(
                itemCount: 100,
                itemBuilder: (context,index){
                  return Text(index.toString());
                },

              ),
            ),
          ),


         ///In my case Emulator screen height is 600
          Positioned(
              top: 550,
              left: 100,
              child: Container(child: Text('Widget 1'),color: Colors.blue,)),

          Positioned(
              top: 650,
              left: 100,
              child: Container(child: Text('Widget 2'),color: Colors.blue,))
  ],
)

On running this code only visible Widget 1 label. Widget 2 label is not shown on scrolling listview and the Widget 1 label is also stuck in the same place. I want to show the widget 2 label and also scroll widget 1 label on scrolling of listview.

Answer 1

You can achieve what you want by using a ScrollController. This will allow you to get the scroll offset and apply is to the Positionned widget.

Here is a working example based on your code:

import 'dart:math';

import 'package:flutter/material.dart';

main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  ScrollController _scrollController = ScrollController();

  @override
  void initState() {
    _scrollController.addListener(() {
      setState(() {
        print(_scrollController.offset);
      });
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Drawing Paths',
      home: Scaffold(
        body: Stack(
          children: <Widget>[
            Positioned.fill(
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: ListView.builder(
                  controller: _scrollController,
                  itemCount: 100,
                  itemBuilder: (context, index) {
                    return Text(index.toString());
                  },
                ),
              ),
            ),

            ///In my case Emulator screen height is 600
            Positioned(
                top: 550 - (_scrollController.hasClients ? _scrollController.offset : 0.0),
                left: 100,
                child: Container(
                  child: Text('Widget 1'),
                  color: Colors.blue,
                )),

            Positioned(
                top: 650 - (_scrollController.hasClients ? _scrollController.offset : 0.0),
                left: 100,
                child: Container(
                  child: Text('Widget 2'),
                  color: Colors.blue,
                ))
          ],
        ),
      ),
    );
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }
}