CODEWITHSUNDEEP
flutterdartflutter-layout
UndercoverCoder
UndercoverCoder

Reputation: 1013

How can I have 2 Widgets in a column, where 1 of them is a scrollable Column?

So I have two widgets in a column, one is a Container (top widget) and the other is a Column (bottom widget that should be scrollable), but the Column isn't being viewed as scrollable as shown in the image below:

Result snippet

Here's the Container and Column in code:

<Widget>[
    topBar, // Container
    Container(
      color: Colors.transparent,
      child: SingleChildScrollView(
        child: Column( // Column in container
          children: <Widget>[
            Text(
              "Test",
              style: TextStyle(fontSize: 50),
            ),
            Text(
              "Test",
              style: TextStyle(fontSize: 50),
            ),
            Text(
              "Test",
              style: TextStyle(fontSize: 50),
            ),
            // Insert Other Text Widgets below            
          ],
        ),
      ),
    )
  ]

Where topBar is:

Container(
    margin: EdgeInsets.all(0),
    padding: EdgeInsets.fromLTRB(20, 0, 20, 0),
    child: Text(
      'Top Container',
      style: TextStyle(
          color: Colors.white,
          fontWeight: FontWeight.bold,
          fontSize: 25.0
      ),
    ),
);

I've tried using ListView as mentioned in similar questions, but it does the same thing.

I suspect that it's because it's trying to go beyond the parent container, which isn't scrollable but I don't know how to get past that.

UPDATE

Just to clarify, what I'm trying to do is have a ScrollView with a fixed top bar, I don't want the bar to scroll too.

On Android it's just a case of creating two layouts, one with a ScrollView inside. But I'm guessing Flutter does things differently, and I can't seem to wrap my head around it.

Upvotes: 0

Views: 928

Answers (1)

Sven
Sven

Reputation: 3414

If you wrap your second Column in an Expanded it will try to occupy as much space as possible and then the overflowing elements in that Column will scroll. This should fix your problem. Example:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: HomePage());
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Widget topBar = Container(
      margin: EdgeInsets.all(0),
      padding: EdgeInsets.fromLTRB(20, 0, 20, 0),
      child: Text(
        'Top Container',
        style: TextStyle(
            color: Colors.white, fontWeight: FontWeight.bold, fontSize: 25.0),
      ),
    );
    return Scaffold(
      body: Column(
        children: <Widget>[
          topBar, // Container

          Expanded( // <- Add this

            child: Container(
              color: Colors.transparent,
              child: SingleChildScrollView(
                child: Column(
                  // Column in container
                  children: <Widget>[
                    for (int i = 0; i < 30; i++)
                      Text(
                        "Test",
                        style: TextStyle(fontSize: 50),
                      ),
                  ],
                ),
              ),
            ),
          )
        ],
      ),
    );
  }
}

Upvotes: 3

Related Questions