Flutter widget size depend from another
Solution 1
A widget cannot depend on the size of another widget. It can, on the other hand, depends on constraints.
To do so, you can use LayoutBuilder
to obtain the constraints and build widgets accordingly:
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Hello World")),
body: LayoutBuilder(
builder: (context, constraints) {
if (constraints.biggest.width > 100) {
return Text('Hello');
}
return Container();
},
),
);
}
Solution 2
You can deduce the Listview
size by subtraction the height
of the AppBar
for the total screen height
. You can get AppBar
height by defining it before assignment:
class _MyHomePageState extends State<MyHomePage> {
AppBar myBar = AppBar(title: Text(widget.title),);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: myBar,
)
Then Your Listview
height would be :
var _listHeight = MediaQuery.of(context).size.height - myBar.prefferedSize.height ;
And each letter size would be :
var _letterHeight = height/27 ;
You should make your letters' sizes less than the above size to provide some spacing between them.
OOM
Updated on December 09, 2022Comments
-
OOM over 1 year
I'm currently trying to make a custom widget in flutter. A simple "A to Z scroller" on right of a list of elements to jump on indexes. My problem is that actually i need to use the size of the list widget to determinate the size of the font for the letters.
I added the list as child of a custom class to got it's height from context. I tryed to get the size with the context.size.heigth in the "build" method but i got an error because the widget is not build. Then i tryed to exec an async method like i read here : Stack overflow post
The only location where i can got the context.size.height without error is in the onVerticalDragUpdate of my gesture detector.
There is my actual code:
class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: new AtoZSlider(child: _builList()), ); } } Widget _builList() { //test list return ListView.builder( padding: EdgeInsets.all(8.0), itemExtent: 20.0, itemCount: 1000, itemBuilder: (BuildContext context, int index) { return Text('entry $index'); }, ); } class AtoZSlider extends StatefulWidget { final Widget child; AtoZSlider({this.child}); @override _AtoZSlider createState() => new _AtoZSlider(); } class _AtoZSlider extends State<AtoZSlider> { double _offsetContainer; double _heightscroller; bool _isHeightSetup; var _text; var _alphabet; @override void initState() { super.initState(); _offsetContainer = 0.0; _isHeightSetup = false; _heightscroller = 14.0; //default value that i want to calculate with context size _alphabet = [ '#', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z' ]; _text = _alphabet[0]; } @override Widget build(BuildContext context) { return Stack(alignment: Alignment.topRight, children: [ widget.child, GestureDetector( child: Container( child: Text(_text, style: new TextStyle(fontSize: _heightscroller),), height: _heightscroller, margin: EdgeInsets.only(top: _offsetContainer)), onVerticalDragUpdate: (DragUpdateDetails details) { setState(() { if ((_offsetContainer + details.delta.dy) >= 0 && (_offsetContainer + details.delta.dy) <= (context.size.height - _heightscroller)) { // to move my scroller on the vertical axis and not out of band using context.size.height _offsetContainer += details.delta.dy; } }); }, ) ]); } }
Is there some way to init my 'widget text font size' depending of the "list size height" ?
Thank you a lot for any kind of help.