Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to scroll page in flutter

My code for a page is like this. i need to scroll part below appbar.

@override   Widget build(BuildContext context) {     return new Scaffold(       appBar: new AppBar(... ),       body: new Stack(         children: <Widget>[           new Container(             decoration: BoxDecoration(                 image: DecorationImage(...),           new Column(children: [             new Container(...),             new Container(...... ),             new Padding(               child: SizedBox(                 child: RaisedButton(..),             ),             new Divider(),             new Column(               children: <Widget>[                 new Container(                   child: new Row(                     children: <Widget>[                       new Expanded(                         child: new Text(  ),                       ),                       new IconButton(                         icon: IconButton(..),                         onPressed: () {                           _changed(true, "type");                         },                       ),                     ],                   ),                 ),                 visibilityPropertyType                     ? new Container(                         margin: EdgeInsets.all(24.0),                         child: new Column(                           children: <Widget>[                             new Row(                               children: <Widget>[                                 new Expanded(... ),                                 new RaisedButton(..)                               ],                             ),                             new Padding(                               padding: const EdgeInsets.only(top: 10.0),                               child: new Row(                                 mainAxisAlignment:                                     MainAxisAlignment.spaceEvenly,                                 children: <Widget>[                                   new Column(                                     children: <Widget>[                                       new Row(                                           children: <Widget>[.. ]),                                       new Row(                                         children: <Widget>[]),                                       new Row(                                         children: <Widget>[]),                                       new Row(                                         children: <Widget>[],                                   ),                                   new Column(                                     children: <Widget>[                                       new Row(                                         children: <Widget>[],                                       ),                                     ],                                   ),                                 ],                               ),                             ),                           ],                         ))                     : new Container(),               ],             ),             new Divider(               color: Colors.white,             )           ])         ],       ),     );   } 

I need to make body part scrollable. How can i implement that scroll. If there is any custom scroll method existing. i have tried Scrollable and SingleChildScrollView but does not meet up with my needs. When i used SinglechildScrollView it occurs an error BoxConstraints forces an infinite height. if i removed LayoutBuilder it causes A RenderFlex overflowed by 22 pixels on the bottom error

like image 794
Vineeth Mohan Avatar asked Aug 09 '18 10:08

Vineeth Mohan


People also ask

How do you scroll to position in Flutter?

All you have to do is set Global Keys for your widgets and call Scrollable. ensureVisible on the key of your widget you want to scroll to. For this to work your ListView should be a finite List of objects. If you are using ListView.

How do you scroll to the top in Flutter?

scrollToTopDuration - Duration it takes for the page to scroll to the top on prompt button press. scrollToTopCurve - Animation Curve for scrolling to the top.

How do I scroll a view in flutter?

For a view to scroll, we will need to add enough information on a page, so that there is something to scroll up and down. I will do this with Flutter Container widgets. I will first put on a page a few container widgets until they do not fit, and the page needs to scroll to accommodate the information.

How to fix overflow error in flutter?

At the bottom of the page, you will see an error showing an Overflow. This is because information does not fit on a page. To fix that we will need to use one of the Scrolling widgets in Flutter so that the content on the page can be scrolled. Let’s do that. There are different scrolling widgets in Flutter that we can use.

How to make a scrolling screen in WordPress?

This is the next simple method to make a scrolling screen. In List View, you can add any widget as the children of List View. ‘ListTile’ is the main widget inside the list view for creating default list item. ? Where ‘Divider ()’ used for create a divider lines between lists.

How to make a scrolling screen using singlechildscrollview widget?

SingleChildScrollView This is the simplest method to make a scrolling screen. Just put the content as a child of the this SingleChildScrollView widget. ? Not that, this widget supports only one child.


2 Answers

Wrap your widget tree inside a SingleChildScrollView

 body: SingleChildScrollView( child: Stack(     children: <Widget>[       new Container(         decoration: BoxDecoration(             image: DecorationImage(...),       new Column(children: [         new Container(...),         new Container(...... ),         new Padding(           child: SizedBox(             child: RaisedButton(..),         ), .... ...  ); // Single child scroll view 

Remember, SingleChildScrollView can only have one direct widget (Just like ScrollView in Android)

like image 113
Jaswant Singh Avatar answered Oct 25 '22 16:10

Jaswant Singh


Thanks guys for help. From your suggestions i reached a solution like this.

new LayoutBuilder(         builder:             (BuildContext context, BoxConstraints viewportConstraints) {           return SingleChildScrollView(             child: ConstrainedBox(               constraints:                   BoxConstraints(minHeight: viewportConstraints.maxHeight),               child: Column(children: [              // remaining stuffs               ]),             ),           );         },       ) 
like image 36
Vineeth Mohan Avatar answered Oct 25 '22 16:10

Vineeth Mohan