CODEWITHSUNDEEP
flutterflutter-layout
Charles Shiller
Charles Shiller

Reputation: 1048

How to arrange a border layout in flutter?

I'm trying to layout two widgets. The top one is a PhotoView and the bottom is a slider. I need the slider to take up as much room as it needs, and the rest to be taken up by the PhotoView.

I tried using a Column class to wrap everything.


 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: GestureDetector(
          onTapDown: (TapDownDetails details) {print("Tapped");}),
          child: Column(children: [
            Container(
                child: Center(
              child: Container(
                  margin: EdgeInsets.fromLTRB(10, 0, 10, 0),
                  child: Container(
                    child: hasPermission
                        ? PhotoView(
                            imageProvider:
                                FileImage(filename)),
                          )
                        : Text("Waiting"),
                  )),
            )),
            Slider(
              min: 0,
              max: 10,
              value: 5,
              onChanged: (double value) {
                print(value);
              },
            ),
          ])),
    );
  }

The problem is that it overflows on the bottom, saying that "BOTTOM OVERFLOWED BY infinity PIXELS".

I suspect that the reason is that PhotoView is unbounded, and so is column, but I need the PhotoView to be bounded by the limit of the view height - slider height.

Upvotes: 1

Views: 525

Answers (1)

Tomasz Noinski
Tomasz Noinski

Reputation: 497

It's not the slider which is unbounded. Wrap the top part (Container which indirectly contains PhotoView) in Expanded (https://docs.flutter.io/flutter/widgets/Expanded-class.html).

I'd recommend not going the route of computing heights and widths manually, as often the same effect can be achieved without it and then you get reacting all dynamic window geometry changes (like phone orientation changing) "for free".

Upvotes: 1

Related Questions