Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter widget size depend from another

Tags:

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.

To illustrate: enter image description here

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.

like image 642
OOM Avatar asked Mar 08 '19 15:03

OOM


1 Answers

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();
      },
    ),
  );
}
like image 159
Rémi Rousselet Avatar answered Sep 20 '22 02:09

Rémi Rousselet