Text under the button flutter-CodePudding

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

CodePudding user response：

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

CodePudding user response：

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