Created
May 5, 2018 07:46
-
-
Save matthew-carroll/37da21d9723a30d0dc520ad621327c59 to your computer and use it in GitHub Desktop.
50x50 circle button centered on screen with bad touch area
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// At center of screen... | |
new FractionalTranslation( | |
translation: const Offset(0.5, 0.5), | |
// Stack whose origin is centered on screen | |
child: new Stack( | |
children: <Widget>[ | |
// This FractionalTranslation pulls the button back by | |
// 50% in both directions to center the button at the | |
// Stack's origin | |
new FractionalTranslation( | |
translation: const Offset(-0.5, -0.5), | |
// 50x50 circle button with search icon that is centered | |
// on screen, but the touch area only exists in the lower | |
// right quadrant of the button. I think this is because | |
// the button is moved 50% to the top and left of the | |
// Stack's positive coordinate system. In other words, | |
// the button is 50% to the top and left of the Stack's | |
// origin. So I'm guessing that the Stack is suppressing | |
// that touch area. | |
child: new Container( | |
width: 50.0, | |
height: 50.0, | |
child: new RawMaterialButton( | |
shape: new CircleBorder(), | |
fillColor: Colors.purple, | |
child: new Icon( | |
Icons.search, | |
color: Colors.white, | |
), | |
onPressed: () { | |
print('Pressed'); | |
}, | |
), | |
), | |
), | |
], | |
) | |
), |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment