how to reduce textbutton cosuming size reduce to it’s child ( text or container ) , in flutter

i have a problem to reducing the size of the textbutton
enter image description here
around the blute text is the size that i want to reduce to it’s child which is a containar that include text() as it’s child

                      childeren:[
                       .
                       .
                       .
                       TextButton(
                        onPressed: () => Navigator.push(
                          context,
                          MaterialPageRoute(
                            builder: (context) => const LoginModal(),
                          ),
                        ),
                        child: Container(
                          padding: const EdgeInsets.only(bottom: 0.5),
                          decoration: const BoxDecoration(
                            border: Border(
                              bottom: BorderSide(
                                color: cprimary,
                                width: 1,
                              ),
                            ),
                          ),
                          child: const Text(
                            'قوانین و مقررات',
                            style: TextStyle(
                                color: cprimary,
                                fontSize: 12,
                                fontWeight: FontWeight.w500),
                          ),
                        ),
                      ),

i try wrapping expanded and sized box and minimum size in style !
if you have info , happy to hear from you guys !

  • Material Design dictates some minimum tap sizes for accessibility. It would be best to know if you’re trying to violate that, and then reconsider your design. The sizing is meant to enable better experiences for everyone.

    – 

Why don’t you consider RichText.?

RichText(
        text: TextSpan(
          text: 'Click here to visit our website',
          style: TextStyle(
            color: Colors.black,
            fontSize: 18.0,
          ),
          children: <TextSpan>[
            TextSpan(
              text: ' قوانین و مقررات',
              style: TextStyle(
                color: Colors.blue,
                decoration: TextDecoration.underline,
              ),
              recognizer: TapGestureRecognizer()
                ..onTap = () {
                  Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => const LoginModal(),
                      ),
                    );
                },
            ),
          ],
        ),
      ),

or you can use GestureDetector

    GestureDetector(
   child: Text('Text here'),
onTap: () {
            print('Tapped');
          },
)

You can set tapTargetSize and padding to the TextButton as below:

TextButton(
  ...
  style: TextButton.styleFrom(
    tapTargetSize: MaterialTapTargetSize.shrinkWrap,
    padding: EdgeInsets.zero, // or other value
  ),
);

Leave a Comment