So I'm trying to make a screen that has a Stack with scroll and I'm using AlignPositioned package to align the positioned widgets in stack I tried using expanded widgets LayoutBuilders I've just can not figure out how to make it dynamic ( https://pub.dev/packages/align_positioned )
There is a lot of city names down below and the screen only can be scrolled to 1-2 of them depending on the height of container. Here is my current code whenever I set a constant height to Container the UI doesn't throw an error but the screen is not completely scrollable
return SafeArea(
child: Scaffold(
body: SingleChildScrollView(
child: Container(
height: MediaQuery.of(context).size.height,
child: Stack(
children: <Widget>[
Positioned(
top: 0,
child: TopArc(), // The blue background circle
),
AlignPositioned(
dy: 40,
alignment: Alignment.topCenter,
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 16, vertical: 4),
child: AutoSizeText(
"Choose Your Location",
stepGranularity: 1,
maxLines: 1,
style: TextStyle(
fontSize: 38,
color: Colors.white,
// This is the maximum value then the AutoSizeText widget will shrink it until it can fit a single line.
fontWeight: FontWeight.bold,
),
),
),
),
AlignPositioned(
dy: 90,
alignment: Alignment.topCenter,
child: StreamBuilder<QuerySnapshot>(
stream: Firestore.instance
.collection('locations')
.snapshots(),
builder: (context, snapshot) {
if (snapshot.hasError) {
return CircularProgressIndicator();
}
if (!snapshot.hasData) {
return CircularProgressIndicator();
}
return ContentTile(
child: ListView.builder(
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
itemCount: snapshot.data.documents.length,
itemBuilder: (ctx, int i) {
final document = snapshot.data.documents[i];
return LocationExpansionTile(
document.documentID, document["cityName"]);
},
),
);
},
),
),
],
),
),
)),
);
Replace ListView.builder
with Column
widget and remove all AlignedPositioned instead use Positioned (if it's possible). Remove parent Container of Stack and add a Container with a height value. It'll help the stack to calculate it's size. You have to get the final size from your item's list. That was the way I could make your code run as you want.
var _itemsView = GlobalKey();
double _stackHeight;
@override
void initState() {
WidgetsBinding.instance.addPostFrameCallback((_) {
RenderBox stackRB =
_itemsView.currentContext.findRenderObject() as RenderBox;
setState(() {
_stackHeight = stackRB.size.height;
});
});
super.initState();
}
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: SingleChildScrollView(
child: Stack(
children: <Widget>[
Positioned(
...
),
Positioned(
...
),
Positioned(
key: _itemsView,
top: 90,
child: Column(
children: _data.map((i) {
final document = snapshot.data.documents[i];
return LocationExpansionTile(
item.documentID, item["cityName"]);
}),
),
),
Container(
height: _stackHeight + 90,
)
],
),
)),
);
}
我正在处理几乎相同的问题,如果您的 SingleChildScrollView 在定位小部件内,您将必须精确定位的顶部和底部,在我的情况下,我没有按底部,所以我无法滚动下
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.