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

Page is not Scrolling Fully because of Expanded – Flutter

When I remove SingleChildScrollView and use the property physics: const NeverScrollableScrollPhysics(), The code works fine and the scrolling works, But by doing this I the scroll only works for this widget NewsItem which is at the end of the page and the scroll is actually working only for the NewsItem rather for the whole page which Is what I wanna acheive.

Here is the code,

body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 18.0),
          child: Column(
            children: [
            // .... Some Widgets that take the 70% of the screen 
              Expanded(
                // height: 500,
                child: ListView.builder(
                  physics: const NeverScrollableScrollPhysics(),
                  scrollDirection: Axis.vertical,
                  itemCount: 5,
                  itemBuilder: (ctx, idx) {
                    return const NewsItem(
                      image:
                          'https://media.giphy.com/media/fTn01fiFdTd5pL60ln/giphy.gif',
                      headline: "Joe was attacked again! Lmaooooo",
                      author: 'Jack Williams',
                    );
                  },
                ),
              ),
            ],
          ),
        ),
      ),

By wrapping the
NewsItem with the Expanded widget leaves no room for scroll unless I replace it with SizedBox But it only enables for me to scroll down the whole page where am seeing 3 of the NewsItem instead of 5 as written.

Tags:

2

Answers


  1. 0

    You can simply add the items that you want in your listview to the column, after all of your other widgets that take up 70% of the screen.

    final newsItems = [1,2,3,4,5]; // Just an example list

SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 18.0),
          child: Column(
            children: [
            // .... Some Widgets that take the 70% of the screen
            ...newsItems.map(item => const NewsItem(
                      image:
                          'https://media.giphy.com/media/fTn01fiFdTd5pL60ln/giphy.gif',
                      headline: "Joe was attacked again! Lmaooooo",
                      author: 'Jack Williams',
                    );
                ).toList(),
            ],
          ),
        ),
      ),

    newsItems is then simply the list of News Items you want to display.

    Login or Signup to reply.
  2. 0

    You can simplify things by using the spread operator ... to add a generated list of widgets:

    body: Padding(
  padding: const EdgeInsets.symmetric(horizontal: 18.0),
  child: ListView(
    children: [
      // .... Some Widgets that take the 70% of the screen
      // Use the spread operator to add a generated list of NewsItems with length 5
      ...List<Widget>.generate(
        5,
        (index) {
          // [index] is the position in the generated list (from 0 up to 4 in this case)
          return const NewsItem(
            image: 'https://media.giphy.com/media/fTn01fiFdTd5pL60ln/giphy.gif',
            headline: 'Joe was attacked again! Lmaooooo',
            author: 'Jack Williams',
          );
        },
      ),
    ],
  ),
),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search