Is there a way to set the Render Order of Routes? - dart

Question

Basically, I want to render a ModalRoute that is dependent on some widget in the route below it.
To achieve that I am using a GlobalKey which I attach to a widget in the lower route:
/// in LOWER route (widget that is in lower route)
#override
Widget build(BuildContext context) {
return Container(
key: globalKey,
child: ..,
);
}
/// UPPER route (different class!)
/// called using a function on tap in the lower route widget
/// `showModalRoute(globalKey)`
#override
Widget buildPage(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation) {
final renderBox = globalKey.currentContext.findRenderObject() as RenderBox;
final Size size = renderBox.size;
return SizedBox(
width: size.width,
height: size.height,
child: ..,
);
}
I am trying to make this respond to orientation changes. The widget in the lower route changes size when the orientation changes.
The problem here is that the upper route seems to be built before the lower route. Maybe this is not the case, however, the size is always the previous size, i.e. I get the landscape size when rotating to potrait and vise versa as if the upper route was built before the lower route (my assumption). The same applies to the position. I basically get the previous RenderBox.
Is there any way for me to get the current position of my widget, i.e. via renderBox.localToGlobal(0, 0)? I imagine that I could achieve this by having the buildPage render after the GlobalKey has the new size.

Answer 1

Check this code tell me if it worked as you expected
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';
void main() => runApp(MyApp());
StreamController<MyWidgetStatus> firstRouteStatus =
StreamController.broadcast();
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Orination Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> with WidgetsBindingObserver {
GlobalKey _stateKey;
MyWidgetStatus _status;
double height;
double width;
#override
void initState() {
WidgetsBinding.instance.addObserver(this);
_stateKey = GlobalKey();
SchedulerBinding.instance.addPostFrameCallback(_calculatePositionOffset);
super.initState();
}
_calculatePositionOffset(_) {
_status = _getPositions(_stateKey);
firstRouteStatus.add(_status);
print("position = ${_status.position}");
}
MyWidgetStatus _getPositions(_key) {
final RenderBox renderBoxRed = _key.currentContext.findRenderObject();
final position = renderBoxRed.localToGlobal(Offset.zero);
final height = renderBoxRed.constraints.maxHeight;
final width = renderBoxRed.constraints.maxWidth;
return MyWidgetStatus(position: position, width: width, hight: height);
}
void didChangeMetrics() {
print("Metrics changed");
SchedulerBinding.instance.addPostFrameCallback(_calculatePositionOffset);
super.didChangeMetrics();
}
#override
void dispose() {
WidgetsBinding.instance.removeObserver(this);
super.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
child: Icon(Icons.navigate_next),
onPressed: () {
_settingModalBottomSheet(context);
}),
body: OrientationBuilder(
builder: (context, orientation) {
return Center(
child: LayoutBuilder(
builder: (context, constraints) => SizedBox(
key: _stateKey,
height: orientation == Orientation.portrait ? 100.0 : 50,
width: orientation == Orientation.portrait ? 50.0 : 100.0,
child: Container(
color: Colors.red,
),
),
),
);
},
),
);
}
void _settingModalBottomSheet(context) {
showModalBottomSheet(
context: context,
builder: (BuildContext bc) {
return Scaffold(
body: StreamBuilder(
stream: firstRouteStatus.stream,
builder: (context, AsyncSnapshot<MyWidgetStatus> snapshot) =>
snapshot.hasData
? Container(
child: Text("Position = ${snapshot.data.position}"),
)
: Text("No Data"),
),
);
});
}
}
class MyWidgetStatus {
final Offset position;
final double hight;
final double width;
MyWidgetStatus({
this.position,
this.hight,
this.width,
});
}
Edit: if you need the information to be rendered at the beginning you can use a BehaviorSubject instead of the native StreamController like
import 'package:rxdart/rxdart.dart';
StreamController<MyWidgetStatus> firstRouteStatus =
BehaviorSubject();
you also have to add the RxDart package in pubspec.yaml it is 0.22.0 at the time of writing this line.
rxdart: ^0.22.0