Text Button in flutter-CodePudding

I'm new to flutter want to create below send again text as a button. How can I do that? appreciate your help on this.

Align(
   alignment: Alignment.bottomLeft,
      child: Text(
          'send again  ',
          style: TextStyle(
            height: 1.2,
            fontFamily: 'Dubai',
            fontSize: 13,
            color: Colors.blue,
            fontWeight: FontWeight.w500,
          )
      )
)

CodePudding user response：

You can use the TextButton widget for this

TextButton(
    style: TextButton.styleFrom(
              TextStyle(
                height: 1.2,
                fontFamily: 'Dubai',
                fontSize: 13,
                color: Colors.blue,
                fontWeight: FontWeight.w500,
              ),
           ),
    onPressed: () {},
    child: const Text('Send again'),

or you can just wrap your Text widget with gestureDetector

 Align(
   alignment: Alignment.bottomLeft,
              child: GestureDetector(
                  onTap: () {}
                  Text(
                   'send again  ',
                   style: TextStyle(
                    height: 1.2,
                    fontFamily: 'Dubai',
                    fontSize: 13,
                    color: Colors.blue,
                    fontWeight: FontWeight.w500,
                  )
              ))
          )

CodePudding user response：

Align(
    alignment: Alignment.bottomLeft,
    child: InkWell(
      onTap: () {
        // add action here whatever you want.
      },
      child: Text('send again  ',
        style: TextStyle(
           height: 1.2,
           fontFamily: 'Dubai',
           fontSize: 13,
           color: Colors.blue,
           fontWeight: FontWeight.w500,
        )
      ),
    )
)

CodePudding user response：

In Flutter almost everything is a Widget. That means even a gesture detector is a widget.

Knowing that, and being able to create a Text widget you are half way there to your destination. You need to just wrap your Text widget with a TextButton that expects its child property to be a Widget and you could provide your Text widget as the child of the TextButton.

Here is the documentation for TextButton and that even includes a very good video on how to use TextButtons in Flutter.

CodePudding user response：

This might work ,

TextButton(
    child: Text('send again'),
    style: TextButton.styleFrom(
      primary: Colors.teal,
      onPrimary: Colors.white,
      textStyle: TextStyle(
          color: Colors.black,
          fontSize: 40,
          fontStyle: FontStyle.italic
      ),
    ),
    onPressed: () {
      print('Pressed');
    },
  )

CodePudding user response：

You can use buttons available in flutter like MaterialButton, TextButton, ElevatedButton, etc. or you can use InkWell or GestureDetector

Align(
                alignment: Alignment.bottomLeft,
                child: GestureDetector(
                  onTap: () {},
                  child: Text('send again  ',
                      style: TextStyle(
                        height: 1.2,
                        fontFamily: 'Dubai',
                        fontSize: 13,
                        color: Colors.blue,
                        fontWeight: FontWeight.w500,
                      )),
                ))

Or
   

  Align(
                alignment: Alignment.bottomLeft,
                child: InkWell(
                  onTap: () {},
                  child: Text('send again  ',
                      style: TextStyle(
                        height: 1.2,
                        fontFamily: 'Dubai',
                        fontSize: 13,
                        color: Colors.blue,
                        fontWeight: FontWeight.w500,
                      )),
                ))

Align(
                alignment: Alignment.bottomLeft,
                child: MaterialButton(
                  onPressed: (){},
                  child: Text('send again  ',
                      style: TextStyle(
                        height: 1.2,
                        fontFamily: 'Dubai',
                        fontSize: 13,
                        color: Colors.blue,
                        fontWeight: FontWeight.w500,
                      )),
                ))