[Solved] Text under the button flutter

Question

Asked by William_Dantas on January 12, 2022 (source).

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'),
        ),
    );
  }
}

Answer

Question answered by Ernest C (source).

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),
        ],
      ),
    );
  }
}
FLUTTER
SHARE: