Flutter - SingleChildScrollView fixed widget

Question

there is an ability to have a SingleChildScrollView into a Scaffold that have another widget over the SingleChildScrollView that does not need to be scrolled. For example I've a SingleChildScrollView and I need to add a fixed button into a specified position, but this button does not to be scrolled.

I try with a Stack widget but if I add a button widget before the SingleChildScrollView this is not be able to be clicked otherwise if I add the button after the SingleChildScrollView the scroll touch does not work.

Anyone have some problem?

Do you want the SingleChildScrollView and the Button to be stacked on top of each other, or do you want a part of your view to not scroll at all? Can you give an example of what you are trying to achieve? — J. S., Jan 16 '20 at 15:10
I need to have a Widget over the SingleChildScrollView blocked by scrolling. — Massimo Caroccia, Jan 16 '20 at 15:11

J. S. · Accepted Answer · 2020-01-16T16:40:36.563

9

Now that we understand what you want to achieve, it can be done with a Stack widget, a ListView and using an Align widget to position the Container that holds the widget you want to use as a title:

Stack(
  children: <Widget>[
    ListView.builder(
      itemCount: 20,
      itemBuilder: (context, index) {
        return Container(
          child: Text('item $index'),
          height: 40,
          color: Colors.blueGrey,
          margin: EdgeInsets.all(14),
        );
      }
    ),
    Align(
      alignment: Alignment.topCenter,
      child: Container(
        margin: EdgeInsets.only(top: 20),
        alignment: Alignment.center,
        height: 30,
        width: 300,
        color: Colors.blue,
        child: Text('This is a title')
      ),
    ),
  ],
)

Previous answers before finally understanding what the user wanted.

If I understood your issue correctly and you want within a view to have a fixed Widget at the top and a list of scrollable items below it, then a CustomScrollView with a SliverAppBar and a SliverList would be the solution for you. Please see the example below:

CustomScrollView(
  slivers: <Widget>[
    SliverAppBar(
      pinned: true,
      title: Center(child: Text('Title')),
    ),
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) {
          return Container(
            height: 40,
            margin: EdgeInsets.all(10),
            alignment: Alignment.center,
            color: Colors.teal[100 * (index % 9)],
            child: Text('grid item $index'),
          );
        },
        childCount: 20
      ),
    ),
  ],
)

If you want the fixed Widget to be at the bottom of the view, you can use the bottomNavigationBar property of the Scaffold`:

Scaffold(
  ...
  bottomNavigationBar: Container(
    alignment: Alignment.center,
    height: 50,
    child: Text('title')
  ),
)

edited Jan 16 '20 at 16:40

answered Jan 16 '20 at 15:26

J. S.

8,905
2
34
44

This is a good solution but the sliver list top start on bottom of SliverAppBar, I need that the SliverList top is 0 – Massimo Caroccia Jan 16 '20 at 15:48
@MassimoCaroccia Sorry, I don't understand what you mean with "I need that the SliverList top is 0". – J. S. Jan 16 '20 at 15:50
With you example (that I've tested) the SliverList is positioned below the SliverAppBar, I need that the sliver list is under the appbar – Massimo Caroccia Jan 16 '20 at 15:58
You can use the bottomNavigationBar for that. I've added the code on my answer. – J. S. Jan 16 '20 at 16:05
if you do use the bottomNavigationBar property, then you could use a normal ListView instead a CustomScrollView. – J. S. Jan 16 '20 at 16:19
mmmm...sorry I don't need that the widget to be bottom the list but the SliverList must be under (stacked) the SliverAppBar – Massimo Caroccia Jan 16 '20 at 16:26
You are confusing me now. That's what the first piece of code did. Are you saying you want to see the List scrolling under the other widget? – J. S. Jan 16 '20 at 16:30
Yes I need this – Massimo Caroccia Jan 16 '20 at 16:36
@MassimoCaroccia 3rd time's the charm. You can achieve what you want with a Stack. I've added it to the top of my response. If this finally is what you wanted, please remember to mark the answer as correct. It will help other users. – J. S. Jan 16 '20 at 16:41

score 2 · Answer 2 · edited Sep 07 '21 at 22:20

Scaffold(
  appBar: buildAppBar('Some cool appbar'),
  body: Column(
    children: [
      Expanded(
        child: SingleChildScrollView(
          child: Column(
            children: [
              PackageCard(),
              PackageCard(),
              PackageCard(),
            ],
          ),
        ),
      ),
      Container(
        child: Text('Your super cool Footer'),
        color: Colors.amber,
      )
    ],
  ),
);

score 0 · Answer 3 · answered Jan 16 '20 at 16:51

0

Joao thank you so much I make a screen of my app to explain you my problem. This is my app and as you see "My LOGO" is below the app bar:

The problem is that I need that my Logo is stacked under the text "This is my appbar"

answered Jan 16 '20 at 16:51

Massimo Caroccia

417
2
6
14

So this has nothing to do with the list. You want your text on top of an image in the AppBar? – J. S. Jan 16 '20 at 18:35
No man I need a widget over a SingleChildScrollView. But when I add into a stack a SingleChildScrollView something not work fine. If into the stack the buttino widget si over of the SingleChildScrollView I can touch only in the button and the SingleChildScrollView is locked by touching. Otherwise when the button is stacked under the SingleChildScrollView I cannot touch the button. For me this is a bug in Flutter – Massimo Caroccia Jan 17 '20 at 06:21

Flutter - SingleChildScrollView fixed widget

3 Answers3