CODEWITHSUNDEEP
flutter
buttonsrtoys
buttonsrtoys

Reputation: 2771

Positioned Widget overlapping my CustomScrollView

I have a CustomScrollView that I need a fixed text entry field at the bottom. A post here suggestion a Stack with a Positioned Widget which worked great:

Scaffold(
  appBar: appBarBuilder == null ? null : appBarBuilder(context),
  body: RefreshIndicator(
    onRefresh: onRefresh,
    child: Stack(
      children: <Widget>[
        CustomScrollView(
          controller: controller,
          slivers: <Widget>[
            if (showImage)
              SliverAppBar(
                expandedHeight: showImage ? 100 : 50,
                title: showImage ? image : null,
                centerTitle: true,
                floating: true,
                pinned: false,
              ),
            sliverList,
          ],
        ),
        Positioned(
          bottom: 0,
          left: 0,
          right: 0,
          child: TextFormField(),
        ),
      ],
    ),
  ),
);

Except that the positioned widget overlaps my CustomScrollView. I could add a white background, but I'd rather the CustomScrollView stop short of my TextFormField. How do I do that? Below is the current rendering:

enter image description here

Upvotes: 1

Views: 936

Answers (1)

CopsOnRoad
CopsOnRoad

Reputation: 267444

Screenshot:

enter image description here

I'm sharing with you a simple implementation of a Column with ListView (replace it with your CustomScrollView) and a TextField at the bottom. When you click on the TextField, the keyboard automatically slides up the ListView and all your contents remain visible.

Code:

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Column(
      children: [
        Expanded(
          child: ListView.builder( // <-- Replace it with your CustomScrollView
            itemCount: 20,
            itemBuilder: (_, i) => ListTile(title: Text('Item $i')),
          ),
        ),
        Padding(
          padding: const EdgeInsets.all(20),
          child: TextField(decoration: InputDecoration(hintText: 'Enter a message')),
        )
      ],
    ),
  );
}

Upvotes: 2

Related Questions