Home > database >  How to make whole screen scrollable in Flutter?
How to make whole screen scrollable in Flutter?

Time:01-03

I have an issue with the whole screen scrolling in Flutter. Only the Expanded widget is able to scroll on-screen in my app but I want to make the whole screen scrollable. How can I do that? Here is my code e.g.

Widget build(BuildContext context) {
  return Scaffold(
    key: scaffoldKey,
    backgroundColor: Colors.white,
    appBar: AppBar(
      title: Text(
        'My App',
        style: AppTheme.of(context).title1,
      ),
      elevation: 0,
      backgroundColor: Colors.amber,
    ),
    body: Column(
      mainAxisSize: MainAxisSize.max,
      children: [
        Padding(
          padding: EdgeInsetsDirectional.fromSTEB(10, 20, 10, 0),
          child: Column(


        . // Padding repeats two more times
        . 
        .
        .

        Expanded(
            child: MyWidget(
                myProp1: value1,
                myProp2: value2,
                myProp3: value3,
                myProp4: value4,
                myProp5: value5,
                myProp6: value6
            ) // MyWidget
        ), // Expanded
      ],
    ), // Column
  ); // Scaffold
}       

I've tried to wrap Column with SingleChildScrollview widget but it didn't work for me. I guess I can not use Expanded widget in SingleChildScrollview. I also tried to use Container or etc. instead of Expanded and Column widgets but I couldn't solve this issue. Can anybody help me with it?

CodePudding user response:

There is no need to wrap MyWidget with Expanded. Just Change Column into ListView:

  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: Text(
          'My App',
        ),
        elevation: 0,
        backgroundColor: Colors.amber,
      ),
      body: ListView(
        children: [
          Padding(
              padding: EdgeInsetsDirectional.fromSTEB(10, 20, 10, 0),
              child: Column(
                children: [
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Container(
                      height: 500,
                      decoration: BoxDecoration(color: Colors.black),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Container(
                      height: 500,
                      decoration: BoxDecoration(color: Colors.black),
                    ),
                  )
                ],
              ))
        ],
      ), // Column
    ); // Scaffold
  }

CodePudding user response:

You also can use the SingleChildScroll view as Child of Expanded widget will work fine

  • Related