0

I have a screen where there is a text which is at the top under the appbar. And there's also two text which are at the bottom of the screen. Whenever someones enters that screen a modal bottom sheet opens from bottom and the bottom sheet contains a textfield.As there's a textfield keyboard also pops up with modal sheet. The issue is that when the modal bottom sheet opens the texts that are at bottom of the screen gets hidden. I want them to go upward whenever the modal sheet is open with keyboard so that they can be visible. I'm not able to do this behaviour in Flutter. can anyone please help me with that?

here's my code:

import 'package:flutter/material.dart';
import 'package:prototype_app/modules/home/domain/entity/coin.dart';

class BuySellDetailsScreen extends StatefulWidget {
  
  const BuySellDetailsScreen(
      {super.key,});

  @override
  _BuySellDetailsScreenState createState() => _BuySellDetailsScreenState();
}

class _BuySellDetailsScreenState extends State<BuySellDetailsScreen> {
  bool _isBottomSheetOpen = false;
  final _textController = TextEditingController();

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      displaySheet();
    });
  }

  void displaySheet() {
    showModalBottomSheet<void>(
      context: context,
      isScrollControlled: true,
      builder: (BuildContext context) {
        return Padding(
          padding: const EdgeInsets.only(bottom: 8),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              TextField(
                controller: _textController,
                decoration: const InputDecoration(
                  hintText: 'Enter text',
                ),
              ),
              ElevatedButton(
                onPressed: () {
                  setState(() {
                    _isBottomSheetOpen = false;
                  });
                  Navigator.pop(context);
                },
                child: const Text('Close'),
              ),
            ],
          ),
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    final keyboardHeight = MediaQuery.of(context).viewInsets.bottom;
    final screenHeight = MediaQuery.of(context).size.height;

    final topText = Container(
      alignment: Alignment.topCenter,
      child: const Text(
        'This is the top text',
        style: TextStyle(fontSize: 20),
      ),
    );

    final bottomTexts = Container(
      alignment: Alignment.bottomCenter,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: const [
          Text('Left bottom text'),
          Text('Right bottom text'),
        ],
      ),
    );

    return Scaffold(
      resizeToAvoidBottomInset: false,
      appBar: AppBar(
        title: const Text('My Screen'),
      ),
      body: Column(
        children: [
          topText,
          Expanded(
            child: Align(
              alignment: Alignment.bottomCenter,
              child: bottomTexts,
            ),
          )
        ],
      ),
    );
  }
}
Inan Mahmud
  • 226
  • 3
  • 14

1 Answers1

0
Scaffold(
   resizeToAvoidBottomInset: false, 
    ... 
 );
Koffi Innocent Konan
  • 156
  • 3
  • Could you please look onto my code? I've edited my post and added my code. – Inan Mahmud Feb 23 '23 at 14:33
  • in this case you need to use the DraggableScrollableSheet – Koffi Innocent Konan Feb 23 '23 at 21:36
  • Remember that Stack Overflow isn't just intended to solve the immediate problem, but also to help future readers find solutions to similar problems, which requires understanding the underlying code. This is especially important for members of our community who are beginners, and not familiar with the syntax. Given that, **can you [edit] your answer to include an explanation of what you're doing** and why you believe it is the best approach? – Jeremy Caney Feb 24 '23 at 03:36