Text under the button flutter

Question

this is the code:

class DocClinVisi extends StatelessWidget {
  const DocClinVisi({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: (){},
      child: Container(
        padding: const EdgeInsets.all(20.0),
        height: 110,
        width: 110,
        decoration: const BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.all(Radius.circular(10)),
          ),
        child: Image.asset('imagens/frame-1.png'),
        ),
    );
  }
}

Are you saying that the text is under the button, or that you want the text to be under the button — Samathingamajig
– Samathingamajig, Commented Jan 12, 2022 at 20:39
But are you asking how to do that, or are you complaining that the text is currently there — Samathingamajig
– Samathingamajig, Commented Jan 12, 2022 at 23:02

Ernest Collection · Accepted Answer · 2022-01-13 01:25:49Z

There are several ways to show text "outside" the button. If you need to "float" text outside the container you can use Stack:

class DocClinVisi extends StatelessWidget {
  const DocClinVisi({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {},
      child: Stack(
        clipBehavior: Clip.none,
        children: [
          Container(
            padding: const EdgeInsets.all(20.0),
            height: 110,
            width: 110,
            decoration: const BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.all(Radius.circular(10)),
            ),
          ),
          const Positioned(
            bottom: -20,
            left: 0,
            right: 0,
            child: Text('Hello World', textAlign: TextAlign.center),
          ),
        ],
      ),
    );
  }
}

Note that this method could overlap the text with other widgets in some cases. If you need to make the text part of the widget so it will not overlap, you could replace Stack for a Column:

class DocClinVisi extends StatelessWidget {
  const DocClinVisi({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {},
      child: Column(
        children: [
          Container(
            padding: const EdgeInsets.all(20.0),
            height: 110,
            width: 110,
            decoration: const BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.all(Radius.circular(10)),
            ),
          ),
          const Text('Hello World', textAlign: TextAlign.center),
        ],
      ),
    );
  }
}

Ravindra S. Patil · Accepted Answer · 2022-01-13 04:18:19Z

1

Just wrap your container with column, then set text below the container, you can see and copy paste code below:

class DocClinVisi extends StatelessWidget {
  const DocClinVisi({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: (){},
      child: Column( // add column
        children: [
           Container(
              padding: const EdgeInsets.all(20.0),
              height: 110,
              width: 110,
              decoration: const BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.all(Radius.circular(10)),
              ),
              child: Image.asset('imagens/frame-1.png'),
           ),
          Text('My Button'), // then add the text
        ]
      ),
    );
  }
}

edited Jan 13, 2022 at 4:18

Ravindra S. Patil

15.3k5 gold badges22 silver badges60 bronze badges

answered Jan 13, 2022 at 1:52

Eko Muhammad Rilo Pembudi

3093 silver badges14 bronze badges

Collectives™ on Stack Overflow

Text under the button flutter

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related