Form gets pushed up with keyboard & how to remove Dropdown Arrow

user_2237148 0
Viewed 3721

I am trying develop an input form and currently the page looks like this, which is quite good:

Reports Page

However, there are a few things I can't figure out how to accomplish:

  1. How can I remove the DropDown arrow icons?
  2. When the user taps on a TextField to enter a date, the keyboard opens and smashes all the UI up, like in image below.
  3. Is there a way to intercept the tap action on the TextField so I can prevent the keyboard from opening and instead, show a DatePicker? (So the user will see the TextField, but won't be able to edit it manually.) I've already opens a DatePicker when the user taps on the icon next to the TextField.

Here is how it looks when the keyboard opens: enter image description here

The code for this page is long, so here is the full code on GitHub.

dart flutter
2 Answers

1. and 2. are straight forward answers:

You can specify the iconSize in your DropdownButton widgets to be 0.0, which effectively removes the icon:

DropdownButton(
  iconSize: 0.0,
  ...
)

Because of your BoxDecoration, you will need to add a Padding to your Text widgets:

DropdownMenuItem<Project>(
  value: value,
  child: Padding(
      padding: EdgeInsets.only(right: 20.0),
      child: Text(value.name, style: TextStyle(fontSize: 25.0))));

You might want to adjust the padding value according to your needs.

To avoid the soft keyboard pushing up your content, you can specify resizeToAvoidBottomPadding to be false in your Scaffold, which should be on top of your widget tree:

Scaffold(
  resizeToAvoidBottomPadding: false,
  ...
)

For 3. I think that you then should not be using a TextField, but rather a Text with a GestureDetector or InkWell (InkWell grants some Material highlight an splash effects) because you do not need the properties of a TextField in that case:

GestureDetector(
  onTap: () {
    // Your code to show the DatePicker and make use of it.
    showDatePicker();
    ...
  },
  child: Text(dateText)
)
user_65097510

Good morning,

So for the first question I'm not sure if it's currently possible, but one way to do it, is to set the iconSize at 0.0 I'm not able to test it right now but it should works.

The second one, is caused by 2 Scaffold in one page. I can see a BottomNavBar that must be in a Scaffold and I'm pretty sure that the "input form" page is also in a Scaffold, so remove the scaffold from this page and the problem will be solved.

For the third one, I'll recommend to not use a TextField to opening a DatePicker, it's absolutely not recommended. You can create a widget that looks like a textfield and intercept the "onTap" with a GestureDetector.

Hoping this will help you,

Have a nice day

user_80358480
Related