meltdown_ultra
meltdown_ultra

Reputation: 95

How do I put text under an icon in a textbutton.icon in Flutter?

I am new to coding and I am not sure how to put the text in a TextButton.icon under the actual icon. Please can you help? Here is the code:

        TextButton.icon(
          onPressed: () => {},
          icon: Icon(
            Icons.add,
            color: Colors.white,
            size: 50,
          ),
          label: Text(
              'Label',
              style: TextStyle(
                color: Colors.white,
              ),
          )),

Upvotes: 3

Views: 2725

Answers (2)

Coupido
Coupido

Reputation: 151

You can read here that it will always be in row, but you can wrap an Icon and a Textbutton in a column.

Column(
   children: [
      Icon(
         Icons.add_outlined,
          ),
      TextButton(
         child: Text("Label"),
         onPressed: () => {},
          ),
      ]
)

Upvotes: 1

Akif
Akif

Reputation: 7660

You can use Column widget for icon like this:

         TextButton.icon(
              onPressed: () => {},
              icon: Column(
                children: [
                  Icon(
                    Icons.add,
                    color: Colors.red,
                    size: 50,
                  ),
                  Text(
                    'Label',
                    style: TextStyle(
                      color: Colors.red,
                    ),
                  ),
                ],
              ),
              label: Text(
                '', //'Label',
                style: TextStyle(
                  color: Colors.red,
                ),
              ),
            ),
         

enter image description here

Upvotes: 7

Related Questions