A PageView needs the parent to have a defined height. How can I accommodate the parent height to the PageView content?

user_5357758 0
Viewed 1013

Basically I'm trying to implement a PageView, as I understand I must define a height in the parent of thePageView to work. In the gif you can see that if I don't define the height an error appears in its parent, but if I define a height the error disappears.

enter image description here

The Text("hola") elements in my actual code will be dynamically generated, so I can't define a fixed height. In fact you can see that if I put a height, another error appears because the height of the content of the PageView is greater than what I defined. (MediaQuery.of(context).size.height)

How can i solve this problem?

this is my code:

  import 'package:flutter/material.dart';

  void main() {
    runApp(MyApp());
  }

  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      print("main");
      return MaterialApp(title: 'Provider Example', initialRoute: '/', routes: {
        '/': (context) => Home(),
        'home': (context) => Home(),
      });
    }
  }

  class Home extends StatelessWidget {
    Home() {
      print("home");
    }

    @override
    Widget build(BuildContext context) {
      return Scaffold(
          backgroundColor: Colors.white,
          appBar: AppBar(
            title: const Text('home'),
          ),
          body: Stack(overflow: Overflow.visible, children: <Widget>[
            Positioned.fill(
                top: 40,
                child: Align(
                  alignment: Alignment.topCenter,
                  child: SingleChildScrollView(
                    child: Column(
                      children: <Widget>[
                        Text("text1"),
                        Text("text2",
                            style: Theme.of(context).textTheme.bodyText2),
                        Container(
                            height: MediaQuery.of(context).size.height,
                            margin: EdgeInsets.symmetric(
                                vertical: 50, horizontal: 20),
                            child: PageView(
                                physics: NeverScrollableScrollPhysics(),
                                children: [
                                  Container(
                                    color: Colors.yellow,
                                    child: Column(
                                      children: <Widget>[
                                        Text("hola"),
                                        Text("hola"),
                                        Text("hola"),
                                        Text("hola"),
                                        Text("hola"),
                                        Text("hola"),
                                        Text("hola"),
                                        Text("hola"),
                                        Text("hola"),
                                        Text("hola"),
                                        Text("hola"),
                                        Text("hola"),
                                        Text("hola"),
                                        Text("hola"),
                                        Text("hola"),
                                        Text("hola"),
                                        Text("hola"),
                                        Text("hola"),
                                        Text("hola"),
                                        Text("hola"),
                                        Text("hola"),
                                        Text("hola"),
                                        Text("hola"),
                                        Text("hola"),
                                        Text("hola"),
                                        Text("hola"),
                                        Text("hola"),
                                        Text("hola"),
                                        Text("hola"),
                                        Text("hola"),
                                        Text("hola"),
                                        Text("hola"),
                                        Text("hola"),
                                        Text("hola"),
                                        Text("hola"),
                                        Text("hola"),
                                        Text("hola"),
                                        Text("hola"),
                                        Text("hola"),
                                        Text("hola"),
                                        Text("hola"),
                                        Text("hola"),
                                        Text("hola"),
                                        Text("hola"),
                                        Text("hola"),
                                        Text("hola"),
                                        Text("hola"),
                                        Text("hola"),
                                        Text("hola"),
                                        Text("hola"),
                                        Text("hola"),
                                        Text("hola"),
                                        Text("hola"),
                                        Text("hola"),
                                        Text("hola"),
                                        Text("hola"),
                                        Text("hola"),
                                        Text("hola"),
                                        Text("hola"),
                                        Text("hola"),
                                        Text("hola"),
                                        Text("hola"),
                                        Text("hola"),
                                        Text("hola"),
                                        Text("hola"),
                                        Text("hola"),
                                      ],
                                    ),
                                  ),
                                  Container(color: Colors.blue)
                                ])),
                      ],
                    ),
                  ),
                )),
          ]));
    }
  }
flutter
3 Answers

Try changing your expanded widget into a SingleChildScrollView()

user_135903480

Remove the SingleChildScrollView and use the code below with Expanded: 

Column(
  children: <Widget>[
    Text("text1"),
    Text("text2", style: Theme.of(context).textTheme.bodyText2),
    Expanded(
      child: Container(
        //height: MediaQuery.of(context).size.height * 1.6,
        margin:
            EdgeInsets.symmetric(vertical: 50, horizontal: 20),
        child: PageView(
          physics: NeverScrollableScrollPhysics(),
          children: [
            Container(
              color: Colors.yellow,
              child: ListView(          //ListView to scroll the content
                children: <Widget>[
                  Column(              //just to center the widgets inside the ListView
                    children: <Widget>[
                      Text("hola"),
                      Text("hola"),
                      Text("hola"),
                      Text("hola"),
                      Text("hola"),
                      Text("hola"),
                      Text("hola"),
                      Text("hola"),
                      Text("hola"),
                      Text("hola"),
                      Text("hola"),
                      Text("hola"),
                      Text("hola"),
                      Text("hola"),
                      Text("hola"),
                      Text("hola"),
                      Text("hola"),
                      Text("hola"),
                      Text("hola"),
                      Text("hola"),
                      Text("hola"),
                      Text("hola"),
                      Text("hola"),
                      Text("hola"),
                      Text("hola"),
                      Text("hola"),
                      Text("hola"),
                      Text("hola"),
                      Text("hola"),
                      Text("hola"),
                      Text("hola"),
                      Text("hola"),
                      Text("hola"),
                      Text("hola"),
                      Text("hola"),
                      Text("hola"),
                      Text("hola"),
                      Text("hola"),
                      Text("hola"),
                      Text("hola"),
                      Text("hola"),
                      Text("hola"),
                      Text("hola"),
                      Text("hola"),
                      Text("hola"),
                      Text("hola"),
                      Text("hola"),
                      Text("hola"),
                      Text("hola"),
                      Text("hola"),
                      Text("hola"),
                      Text("hola"),
                      Text("hola"),
                      Text("hola"),
                      Text("hola"),
                      Text("hola"),
                      Text("hola"),
                      Text("hola"),
                      Text("hola"),
                      Text("hola"),
                      Text("hola"),
                      Text("hola"),
                      Text("hola"),
                      Text("hola"),
                      Text("hola"),
                      Text("hola"),
                    ],
                  )
                ],
              ),
            ),
            Container(color: Colors.blue),
          ],
        ),
      ),
    ),
  ],
),
user_119867100

The main problem is that you need to wrap your PageView in a parent with a size or it will be expanded in a infinity way, so you can wrap that widget inside a LimitedBox or a ConstrainedBox, for example try the next:

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: const Text('home'),
      ),
      body: Stack(
        overflow: Overflow.visible,
        children: <Widget>[
          Positioned.fill(
            top: 40,
            child: Align(
              alignment: Alignment.topCenter,
              child: SingleChildScrollView(
                child: Column(
                  children: <Widget>[
                    Text("text1"),
                    Text("text2", style: Theme.of(context).textTheme.bodyText2),
                    Container(
                      margin: EdgeInsets.symmetric(
                        vertical: 50,
                        horizontal: 20,
                      ),
                      child: ConstrainedBox(
                        //Add a constrained box to wrap your widget
                        constraints: BoxConstraints(
                          //Give it a max height you think you will use
                          maxHeight: MediaQuery.of(context).size.height * 2,
                        ),
                        child: PageView(
                          physics: NeverScrollableScrollPhysics(),
                          children: [
                            Container(
                              color: Colors.yellow,
                              child: Column(
                                //make your column occupy only the necessary space
                                mainAxisSize: MainAxisSize.min,
                                mainAxisAlignment:
                                    MainAxisAlignment.spaceAround,
                                children: <Widget>[
                                  Text("hola"),
                                  Text("hola"),
                                  Text("hola"),
                                  Text("hola"),
                                  Text("hola"),
                                  Text("hola"),
                                  Text("hola"),
                                  Text("hola"),
                                  Text("hola"),
                                  Text("hola"),
                                  Text("hola"),
                                  Text("hola"),
                                  Text("hola"),
                                  Text("hola"),
                                  Text("hola"),
                                  Text("hola"),
                                  Text("hola"),
                                  Text("hola"),
                                  Text("hola"),
                                  Text("hola"),
                                  Text("hola"),
                                  Text("hola"),
                                  Text("hola"),
                                  Text("hola"),
                                  Text("hola"),
                                  Text("hola"),
                                  Text("hola"),
                                  Text("hola"),
                                  Text("hola"),
                                  Text("hola"),
                                  Text("hola"),
                                  Text("hola"),
                                  Text("hola"),
                                  Text("hola"),
                                  Text("hola"),
                                  Text("hola"),
                                  Text("hola"),
                                  Text("hola"),
                                  Text("hola"),
                                  Text("hola"),
                                  Text("hola"),
                                  Text("hola"),
                                  Text("hola"),
                                  Text("hola"),
                                  Text("hola"),
                                  Text("hola"),
                                  Text("hola"),
                                  Text("hola"),
                                  Text("hola"),
                                  Text("hola"),
                                  Text("hola"),
                                  Text("hola"),
                                  Text("hola"),
                                  Text("hola"),
                                  Text("hola"),
                                  Text("hola"),
                                  Text("hola"),
                                  Text("hola"),
                                  Text("hola"),
                                  Text("hola"),
                                  Text("hola"),
                                  Text("hola"),
                                  Text("hola"),
                                  Text("hola"),
                                  Text("hola"),
                                  Text("hola"),
                                ],
                              ),
                            ),
                            Container(color: Colors.blue)
                          ],
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

Hope it helps.

user_111512500
Related