CODEWITHSUNDEEP
flutterflutter-layout
ike13
ike13

Reputation: 157

Flutter: Full bottom button with safe area

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,
              ),
            ),
          ),
        ),
      ),

Upvotes: 2

Views: 1392

Answers (1)

Akif
Akif

Reputation: 7640

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,
          ),
        ),
       ),
      ),
     ),
    ),

Upvotes: 1

Related Questions