Question 78304 in Flutter Question posted in
The official Flutter documentation can be found here.

How to make whole screen scrollable in Flutter?

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?

Tags:

2

Answers


  1. 0

    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
  }
    Login or Signup to reply.
  2. 0

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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search