Sam
Sam

Reputation: 63

How to make a widget stick to the top while also having a scroll view?

I have made a custom widget with a clippath and i want to use it as an appbar. I would also add icons to the clippath.

The page will have a singleviewscrollchild.

Any advice on how to make a widget stick to the top while also having a scroll view? The custom appbar should not be scrolled

Upvotes: 0

Views: 3287

Answers (2)

Sam
Sam

Reputation: 63

So i found a solution to it. Just make the Scaffold return a column. Then add your custom widget as a child. Then add an Expanded widget as a child after it. In the expanded widget you can add the SingleChildScrollView as a child.

 return Scaffold(
  backgroundColor: Color(0xfffafafa),
  body: Column(
    children: <Widget>[
      CustomAppbar(),
      Expanded(
        child: SingleChildScrollView(
          child: Column(
            children: <Widget>[
              Text("data", style: TextStyle(fontSize: 100),),
              Text("data", style: TextStyle(fontSize: 100),),
              Text("data", style: TextStyle(fontSize: 100),),
              Text("data", style: TextStyle(fontSize: 100),),
              Text("data", style: TextStyle(fontSize: 100),),
              Text("data", style: TextStyle(fontSize: 100),),
              Text("data", style: TextStyle(fontSize: 100),),

Upvotes: 4

Newaj
Newaj

Reputation: 4450

Try using Stack and Positioned widget. For example :

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Positioned(
          top: 0.0,
          child: CustomAppBar(),
        ),
        ScrollViewWidget(...)
      ],
    );
  }

Upvotes: 1

Related Questions