How do I put a flutter PageView inside a Column or Row? I get the error below when I do

Question

This is the Error:

I/flutter (  736): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY  ╞═════════════════════════════════════════════════════════
I/flutter (  736): The following assertion was thrown during performResize():
I/flutter (  736): Horizontal viewport was given unbounded height.
I/flutter (  736): Viewports expand in the cross axis to fill their container and constrain their children to match
I/flutter (  736): their extent in the cross axis. In this case, a horizontal viewport was given an unlimited amount of
I/flutter (  736): vertical space in which to expand.

This is The Code:

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'PayMart',
      theme: new ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or press Run > Flutter Hot Reload in IntelliJ). Notice that the
        // counter didn't reset back to zero; the application is not restarted.
        primaryColor: Colors.blue,
        primaryColorDark:Colors.blueAccent ,
        accentColor: Colors.blue,
      ),
      home: new MyTabs(),
    );
  }
}

class MyTabs extends StatefulWidget{

  @override
  MyTabsState createState() => new MyTabsState();
}

class MyTabsState extends State<MyTabs> with SingleTickerProviderStateMixin {
  int _index;
  PageController _pageController;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _index = 0;
    _pageController = new PageController(initialPage: 0,viewportFraction: 1.0);
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("PayMart"),
        actions: <Widget>[
          new FlatButton(onPressed: null, child: new Text("R247.50",style: new TextStyle(color: Colors.white,decorationStyle: TextDecorationStyle.wavy),)),
          //new IconButton(icon: new Icon(null, color: Colors.white), onPressed: null),
         new IconButton(icon: new Icon(Icons.add_circle_outline,color: Colors.white), onPressed: null)
        ],
        centerTitle: false,
      ),


      drawer: new Drawer(
        // Add a ListView to the drawer. This ensures the user can scroll
        // through the options in the Drawer if there isn't enough vertical
        // space to fit everything.
        child: new ListView(
          // Important: Remove any padding from the ListView.
          padding: EdgeInsets.zero,
          children: <Widget>[
            new DrawerHeader(
              child: new Text('Drawer Header'),
              decoration: new BoxDecoration(
                color: Colors.blue,
              ),
            ),
            new ListTile(
              title: new Text('Item 1'),
              leading: new Icon(Icons.language),
              onTap: () {
                // Update the state of the app
                // ...
              },
            ),
            new ListTile(
              title: new Text('Item 2'),
              onTap: () {
                // Update the state of the app
                // ...
              },
            ),
          ],
        ),
      ),


      body: new Column(children: <Widget>[
     new PageView(children: <Widget>[
       new Container(child:
          new GridView.count(
                children: <Widget>[
                  new FlatButton(onPressed: null,
                      child: new Column( children: <Widget>[
                        new Icon(Icons.person,color: Colors.deepOrangeAccent,),
                        new Text("Hello"),
                      ],
                      )
                  ),
                  new FlatButton(onPressed: null,
                      child: new Column( children: <Widget>[
                        new Icon(Icons.person,color: Colors.tealAccent,),
                        new Text("Hello"),
                      ],
                      )
                  ),
                  new FlatButton(onPressed: null,
                      child: new Column( children: <Widget>[
                        new Icon(Icons.person,color: Colors.deepOrange,),
                        new Text("Hello"),
                      ],
                      )
                  ),
                  new FlatButton(onPressed: null,
                      child: new Column( children: <Widget>[
                        new Icon(Icons.person),
                        new Text("Hello"),
                      ],
                      )
                  ),
                  new FlatButton(onPressed: null,
                      child: new Column( children: <Widget>[
                        new Icon(Icons.person),
                        new Text("Hello"),
                      ],
                      )
                  ),
                  new FlatButton(onPressed: null,
                      child: new Column( children: <Widget>[
                        new Icon(Icons.person),
                        new Text("Hello"),
                      ],
                      )
                  ),
                  new FlatButton(onPressed: null,
                      child: new Column( children: <Widget>[
                        new Icon(Icons.person),
                        new Text("Hello"),
                      ],
                      )
                  ),
                  new FlatButton(onPressed: null,
                      child: new Column( children: <Widget>[
                        new Icon(Icons.person),
                        new Text("Hello"),
                      ],
                      )
                  ),
                ],
                crossAxisCount: 4,
                childAspectRatio: 1.5,
                padding: const EdgeInsets.all(4.0),
                mainAxisSpacing: 0.0,
                crossAxisSpacing: 4.0,
                shrinkWrap: true,
              )
       ),
        new Container(color: Colors.brown,),
        new Container(color: Colors.amber,),
        new Container(color: Colors.deepOrangeAccent,),
        new Container(color: Colors.purpleAccent,)
      ],
        controller: _pageController,
      ),
    ]),

      bottomNavigationBar: new Stack(
        children: <Widget>[
          new Positioned(child: new BottomNavigationBar(
          fixedColor: Colors.blueAccent,
          type: BottomNavigationBarType.fixed,
          currentIndex: _index,
          onTap: (int _index) {
          setState(() {
          this._index = _index;
          _pageController.animateToPage(_index,
              duration: new Duration(milliseconds: 300),
              curve: Curves.easeIn);
          });
          },
          items: <BottomNavigationBarItem>[
          new BottomNavigationBarItem(icon: new Icon(Icons.home), title: new Text("Home")),
          new BottomNavigationBarItem(icon: new Icon(Icons.access_alarm), title: new Text("Transactions")),
    new BottomNavigationBarItem(icon: new Icon(Icons.play_arrow), title: new Text("Pay")),
    new BottomNavigationBarItem(icon: new Icon(Icons.language), title: new Text("Requests")),
    new BottomNavigationBarItem(icon: new Icon(Icons.account_balance_wallet), title: new Text("Wallet"))
    ],
    ),),
          new Positioned.directional(
            child: new FloatingActionButton(
                onPressed: null,
              child:new Icon(Icons.filter_center_focus,size: 24.0,),
              mini: false,
            ),
            textDirection: TextDirection.ltr,
            bottom: 0.0,
          ),
          new Positioned.directional(
              textDirection: TextDirection.ltr,
              child: new Text("scan",style: new TextStyle(color: Colors.white,fontSize: 12.0),),
            bottom: 6.0,
          )
      ],
      alignment: Alignment.bottomCenter,
      )

    );
  }
}

Hatch

can you provide more details on your issue? – Buckner

This doesn't look like Java... what language is it? Please provide the correct tags. – Cercaria

Try remove the parameters: crossAxisCount: 4, childAspectRatio: 1.5, padding: const EdgeInsets.all(4.0), mainAxisSpacing: 0.0, crossAxisSpacing: 4.0, shrinkWrap: true, It seems not calculating size properly. – Unhandy

Looks like you probably got into github.com/flutter/flutter/issues/11273 – Bullpup

Answer 1

In your specific case, I would simply suggest removing the wrapping Column, as it only has a single child widget.

Anyway, to solve this problem without touching the wrapping Column you can surround your PageView with an Expanded or Flexible Widget. The PageView has an unknown height, because the height of it depends on its children. Therefore it can't be placed in a Column without wrapping it in one of the above widgets.

Besiege

It can also be wrapped in a Widget with height constraints. So yes, it can be placed in a Column without those two! For example with a Container with BoxConstraints. However, this might not fit the use case here. Still I thought it was important to mention. – Fluoro

Answer 2

Would also suggest doing something like this. If remaining children are not wrapped in the Expanded/Flexible with high flex number, Expanded with PageView is gonna take as much space as it can.

   Column(
      children: <Widget>[
        Expanded(
          flex: 1,
          child: PageView(children: <Widget>[
            Text('Page 1'),
            Text('Page 2'),
            Text('Page 3'),
          ]),
        ),
        Expanded(child: Text("Test"), flex: 10), #<- add this if you don't want it to be at the bottom of the page
      ]),

Intrench

Answer 3

add to NiklasPor answer, if you want to control the size of the page view use SizedBox()

Lecturer

Answer 4

Yes, the answer has already been given to you, so you can also use the Stack if you need to make a footer. As in my case, I have a title, a body and then a footer at the end ..

Scaffold(
    backgroundColor: PrimaryColor,
    body: Stack(
      children: <Widget>[
        PageView(
          controller: controller,
          children: <Widget>[
           "Your body widgets"
          ],
        ),
        Container(
          alignment: Alignment.bottomCenter,
          child: "Your widget"
        )
      ],
    ));

Calais