Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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,
      )

    );
  }
}
like image 660
Thapelo Radebe Avatar asked Apr 11 '18 01:04

Thapelo Radebe


People also ask

How do you add a row inside a column in flutter?

To create a row or column in Flutter, you add a list of children widgets to a Row or Column widget. In turn, each child can itself be a row or column, and so on. The following example shows how it is possible to nest rows or columns inside of rows or columns.


3 Answers

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.

like image 50
NiklasPor Avatar answered Oct 21 '22 08:10

NiklasPor


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
      ]),
like image 9
Nuts Avatar answered Oct 21 '22 08:10

Nuts


You can simply put your page view widget inside a container and give it specific height, width and your error will be resolve..

Like this ======>>>

Container(
      height: 150,
      width: 320,
      child: PageView(
        controller: pageViewController,
        scrollDirection: Axis.horizontal,
        children: [Image(image: AssetImage("assets/images/food.jpg"))],
      ),
    ),
like image 2
Lokendra singh Chauhan Avatar answered Oct 21 '22 08:10

Lokendra singh Chauhan