Reputation: 1014
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.
Upvotes: 0
Views: 959
Reputation: 3594
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();
}
}
Upvotes: 1