0

I have bottomsheet with ListView and a textField, I want the bottomSheet to scroll up when the keyboard appears, But it is not. Here is my code

Future<void> _bottomSheetMore(context, PostId postId, showLikes) async {
if (homeController.getShowModalBottomSheet) {
  return;
}
homeController.setModalBottomSheet(true);
await Future<void>.delayed(
  const Duration(milliseconds: 10),
  () => showModalBottomSheet<void>(
    context: context,
    isScrollControlled: true,
    builder: (_) => CommentWidget(
      post: postId,
    ),
  ),
);
homeController.setModalBottomSheet(false);}

Widget containing ListView and TextField

class _CommentWidgetState extends State<CommentWidget> {
  @override
  void initState() {
    Future.delayed(Duration.zero, () => getAllComments(widget.post.id));
    super.initState();
  }

  final TextEditingController commentController = TextEditingController();
  final FeedsController _feedsController = Get.find();

  @override
  void dispose() {
    commentController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 20.0),
          child: SingleChildScrollView(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisSize: MainAxisSize.min,
              children: [
                Text(
                  'Comments',
                  style: titleLargeTextStyle.copyWith(
                      fontSize: 22, fontWeight: FontWeight.w600),
                ),
                const SizedBox(
                  height: 20,
                ),
                widget.post.totalcomments == '0'
                    ? const Center(
                        child: Text(
                            'Oops! No one has commented yet, Be the first one to comment.'),
                      )
                    : Obx(() => _feedsController.isLoading.value
                        ? const Center(
                            child: CircularProgressIndicator(
                            color: gradientBlue,
                          ))
                        : SizedBox(
                            height: size.height * 0.3,
                            child: ListView.builder(
                              itemBuilder: (ctx, index) => CommentItemWidget(
                                  comment:
                                      _feedsController.getPostComments[index]),
                              itemCount:
                                  _feedsController.getPostComments.length,
                            ),
                          ))
              ],
            ),
          ),
        ),
        const Spacer(),
        const Divider(
          color: colorSubtitle,
        ),
        Row(
          children: [
            Expanded(
                child: TextField(
              controller: commentController,
              decoration: const InputDecoration(
                  hintText: 'Type your comment here...',
                  hintStyle: titleMediumTextStyle,
                  border: InputBorder.none,
                  focusedBorder: InputBorder.none),
            )),
            IconButton(onPressed: () {}, icon: SvgPicture.asset(emoji)),
            Container(
                margin: const EdgeInsets.only(right: 10, bottom: 5),
                decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    gradient: RallyRateAppTheme.blueGradient),
                child: IconButton(
                    onPressed: () async {
                      await _feedsController.addCommentToPost(
                          commentController.text,
                          widget.post.userId,
                          widget.post.id);
                      commentController.text = '';
                    },
                    icon: SvgPicture.asset(icSendBtn)))
          ],
        )
      ],
    );
  }

  Future<List<Comment>> getAllComments(String postID) async {
    return await _feedsController.getPostsComments(postID);
  }
}

I've tried solutions from the below link which suggests to set paddingInsets and isScrollControlled: true, but it covers whole screen when bottom sheet opens without textField focus

Approach tried

and this was the result

Result of above approach

What I want is that bottomSheet only moves up when user is writing in textField.

0 Answers0