How to scroll page in flutter

Question

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   lt Widget gt             new Container              decoration  BoxDecoration                  image  DecorationImage                 new Column children                new Container                   new Container                       new Padding                child  SizedBox                  child  RaisedButton                                 new Divider                new Column                children   lt Widget gt                   new Container                    child  new Row                      children   lt Widget gt                         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   lt Widget gt                               new Row                                children   lt Widget gt                                   new Expanded                                        new RaisedButton                                                                                                 new Padding                                padding  const EdgeInsets only top  10 0                                 child  new Row                                  mainAxisAlignment                                      MainAxisAlignment spaceEvenly                                  children   lt Widget gt                                     new Column                                      children   lt Widget gt                                         new Row                                            children   lt Widget gt                                               new Row                                          children   lt Widget gt                                            new Row                                          children   lt Widget gt                                            new Row                                          children   lt Widget gt                                                                            new Column                                      children   lt Widget gt                                         new Row                                          children   lt Widget gt                                                                                                                                                                                                                                                                                                           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

User · Accepted Answer

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)

User · Answer

you can scroll any part of content in two ways      you can use the list view directly or SingleChildScrollView  most of the time i use List view directly when ever there is a keybord intraction in that specific screen so that the content dont get overlap by the keyboard and more over scrolls to top      this trick will be helpful many a times

User · Answer

Use LayoutBuilder and Get the output you want Wrap the SingleChildScrollView with LayoutBuilder and implement the Builder function  we can use a LayoutBuilder to get the box contains or the amount of space available  LayoutBuilder      builder   BuildContext context  BoxConstraints constraints         return SingleChildScrollView          child  Stack            children   lt Widget gt               Container                height  constraints maxHeight                             topTitle context               middleView context               bottomView context

User · Answer

You can use this one and it s best practice  SingleChildScrollView    child  Column      children   lt Widget gt           Your Widgets         Your Widgets          Your Widgets

User · Answer

You can try CustomScrollView  Put your CustomScrollView inside Column Widget   Just for example -  class App extends StatelessWidget     App  Key key    super key  key       override   Widget build BuildContext context        return new Scaffold        appBar  AppBar            title  const Text  AppBar                   body  new Container            constraints  BoxConstraints expand              decoration  new BoxDecoration              image  new DecorationImage                alignment  Alignment topLeft                image  new AssetImage  images main-bg png                  fit  BoxFit cover                                       child  new Column              children   lt Widget gt                                Expanded                  child  new CustomScrollView                    scrollDirection  Axis vertical                    shrinkWrap  false                    slivers   lt Widget gt                       new SliverPadding                        padding  const EdgeInsets symmetric vertical  0 0                         sliver  new SliverList                          delegate  new SliverChildBuilderDelegate                             context  index    gt  new YourRowWidget                              childCount  5                                                                                                                                                                                  In above code I am displaying a list of items   total 5  in CustomScrollView  YourRowWidget widget gets rendered 5 times as list item  Generally you should render each row based on some data   You can remove decoration property of Container widget  it is just for providing background image

User · Answer

Look to this  may be help you   class ScrollView extends StatelessWidget      override   Widget build BuildContext context        return new LayoutBuilder        builder             BuildContext context  BoxConstraints viewportConstraints            return SingleChildScrollView            scrollDirection  Axis vertical            child  ConstrainedBox              constraints  BoxConstraints minHeight  viewportConstraints maxHeight               child  Column                  crossAxisAlignment  CrossAxisAlignment start                  children                      Text  Hello world                          You can add another children

User · Answer

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

User · Answer

Very easy if you are already using a statelessWidget checkOut my code class  MyThirdPage extends StatelessWidget      override   Widget build BuildContext context        return Scaffold        appBar  AppBar          title  Text  Understanding Material-Cards                   body  SingleChildScrollView            child  Column          children   lt Widget gt              buildStack               buildCard              SingleCard               inkwellCard

User · Answer

Two way to add Scroll in page  1  Using SingleChildScrollView           SingleChildScrollView            child  Column              children                  Container                      SizedBox                     Container                     Text                                              2  Using ListView    ListView is default provide Scroll no need to add extra widget for scrolling       ListView            children                Container                  SizedBox                  Container                   Text

[dart] How to scroll page in flutter

Examples related to dart

Examples related to scrollview

Examples related to flutter

Examples related to flutter-layout