Text under the button flutter - 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'),
),
);
}
}

Answer 1

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

Answer 2

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