How to scroll page in flutter

后端 未结 9 1209
情话喂你
情话喂你 2021-01-30 20:05

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          


        
9条回答
  •  醉话见心
    2021-01-30 20:20

    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: [               
                  Expanded(
                    child: new CustomScrollView(
                      scrollDirection: Axis.vertical,
                      shrinkWrap: false,
                      slivers: [
                        new SliverPadding(
                          padding: const EdgeInsets.symmetric(vertical: 0.0),
                          sliver: new SliverList(
                            delegate: new SliverChildBuilderDelegate(
                              (context, index) => 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.

提交回复
热议问题