Flutter: Full bottom button with safe area

user_13412304 0
Viewed 535

I faced with this problem: I found the only way to do so that the background of the button was in full height when using safearea on iPhone 11. But now the button is pressed partially podskajet. Please how to make the entire blue area pressed as a button. Thank you all for your answers. I add a screenshot and a piece of code as it is implemented now.

enter image description here

      Container(
        color: Colors.blue,
        child: SafeArea(
          left: false,
          right: false,
          child: Expanded(
            flex: 1,
            child: SizedBox(
              width: double.infinity,
              child: RaisedButton(
                elevation: 0,
                onPressed: () {},
                child: Text("Add", style: TextStyle(color: Colors.white)),
                color: Colors.blue,
              ),
            ),
          ),
        ),
      ),
flutter-layout flutter
1 Answers

You can check by changing the color of this Container.

   Container(
    color: Colors.red,

Or you can use Debug Paint using the inspector. And then you will realize that some area is not in the button. This is the reason why onTap is not working.

After that time you can use InkWell easily with wrapping all your Container.

  InkWell(
      onTap: () {
       // Here is your onTap function
      },
      Container(
        color: Colors.red,
        child: SafeArea(
          left: false,
          right: false,
          child: Expanded(
            flex: 1,
            child: SizedBox(
              width: double.infinity,
              // In fact, you don't need a button anymore.
              child: RaisedButton(
                elevation: 0,
                onPressed: () {},
                child: Text("Add", style: TextStyle(color: Colors.white)),
                color: Colors.blue,
          ),
        ),
       ),
      ),
     ),
    ),
user_106594820
Related