Widget with width and offset relative to parent - flutter

Question

I would like to render something that looks a bit like a scrollbar to indicate that I am on page 2/5. To do this, I would need a widget with the following:
The width is 20% width relative to the size of the parent
Top-left of the widget is offset by 40% relative to the size of the parent
I was able to accomplish the first point using a FractionallySizedBox but I'm not sure how to compose this to accomplish the offset. Thanks!
Here is a Flutter codepen illustrating what I have so far. I would like to offset this by 40% relative to the parent while still preserving the 20% width.
https://codepen.io/venkatd-the-bashful/pen/jOWYQXz
Snippet of the example below
class PagePositionDisplay extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SizedBox(
height: 30,
width: 300,
child: Container(
color: Colors.grey,
child: FractionallySizedBox(
alignment: Alignment.topLeft,
heightFactor: 1,
widthFactor: 0.2,
child: Container(
decoration: BoxDecoration(
shape: BoxShape.rectangle,
color: Colors.blue,
),
),
),
),
),
),
);
}
}

Answer 1

Try using Layout Builder with some row:
class PagePositionDisplay extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SizedBox(
height: 30,
width: 300,
child: Container(
color: Colors.grey,
child: LayoutBuilder(builder: (context, constraints) {
return Row(
children: <Widget>[
SizedBox(
// your offset percentage * total width
width: (2 / 5) * constraints.maxWidth,
),
Container(
// your 'scrollbar' percentage * total width
width: (1 / 5) * constraints.maxWidth,
decoration: BoxDecoration(
shape: BoxShape.rectangle,
color: Colors.blue,
),
),
],
);
}),
),
),
),
);
}
}