CODEWITHSUNDEEP
flutterdartflutter-layout
Max
Max

Reputation: 1301

How to remove padding from TextButton and place it under widget Flutter

Need help. I want to put the text Want to get your money? and TextButton Redeem under button 611 (screenshot below) removing all padding. I have already tried many methods, but in the end it did not work out to place the widget under the button itself. Through the Flutter Inspector, you can see that there is still a distance at the top, but I don’t understand how to put it there. I will be grateful for help.

body

Padding(
        padding: const EdgeInsets.symmetric(horizontal: 24),
        child: Column(
          children: [
            const SizedBox(height: 24),
            const TotalCoinsWidget(
              coins: '611',
            ),
            const RedeemButton(
                textStyle: constants.Styles.smallBookTextStyleWhite,
                buttonStyle: constants.Styles.smallMediumTextStyleWhite),
            Padding(
              padding: EdgeInsets.only(bottom: 50),
              child: Text('Hello'),
            )
          ],
        ),
      );

textbutton

Widget build(BuildContext context) => Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text('Want to get your money?', style: textStyle),
          TextButton(
            style: TextButton.styleFrom(
              padding: EdgeInsets.zero,
              minimumSize: Size.zero,
            ),
            onPressed: () {},
            child: Text(
              'Redeem',
              style: buttonStyle,
            ),
          ),
        ],
      );

TotalCoinsWidget

Widget build(BuildContext context) => Container(
        alignment: Alignment.center,
        width: _width,
        height: _height,
        decoration: BoxDecoration(
          color: color,
          borderRadius: BorderRadius.circular(25),
          boxShadow: [
            BoxShadow(
                color: color.withOpacity(0.5),
                blurRadius: _blurRadius,
                offset: Offset(_xOffset, _yOffset)),
          ],
        ),
        child: Text(
          coins,
          style: textStyle,
        ),
      );

Upvotes: 2

Views: 3066

Answers (2)

Greenlight
Greenlight

Reputation: 195

tapTargetSize: MaterialTapTargetSize.shrinkWrap

is not sufficient. Just add

padding: EdgeInsets.zero

Upvotes: 1

KreatorDev
KreatorDev

Reputation: 253

you are using TextButton widget, and if you check out the property style: TextButton.styleFrom(), you will find a property called tapTargetSize, by default tapTargetSize property uses MaterialTapTargetSize.padded, and to fix your problem you must assign tapTargetSize property to MaterialTapTargetSize.shrinkWrap to shrinks the tap target size to the minimum size.

Upvotes: 4

Related Questions