Question 173743 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – How can I leave textButton below the Text

I’m doing a project on Flutter. I’m having a hard time making this button, I’ll leave the photo and the code.enter image description here

Positioned(
        bottom: -50,
        child: Container(
          width: 281,
          height: 111,
          decoration: BoxDecoration(
            color: orangeDetails.withOpacity(0.8),
            borderRadius: BorderRadius.circular(9),
            boxShadow: [
              BoxShadow(
                color: Colors.black.withOpacity(0.1),
                spreadRadius: 3,
                blurRadius: 4,
                offset: Offset(0, 2) // muda a posição da sombra
              ),
            ],
          ),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Image.asset(
                  "assets/images/metro.png",
                  width: 100,
              ),
              Align(
                alignment: Alignment.center,
                child: Text(
                  "Acompanhe a rotas das linhas n e estações do metrô n de Recife",
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 12,
                    fontWeight: FontWeight.w700,
                  ),
                ),
              ),
              // TextButton(
              //   onPressed: (){},
              //   child: Text("VER LINHAS"),
              //   style: ButtonStyle(
              //       foregroundColor: MaterialStateProperty.all(Colors.black),
              //       backgroundColor:MaterialStateProperty.all(blueDetails),
              //       fixedSize: MaterialStateProperty.all(const Size(95, 5)),
              //       shape: MaterialStateProperty.all<RoundedRectangleBorder>(
              //           RoundedRectangleBorder(
              //             borderRadius: BorderRadius.circular(3),
              //           )
              //       )
              //   ),
              // ),
            ],
          ),
        ),
      ),´

How can I increment this textButton of the photo? Pls, someone can help me??

Tags:

2

Answers


  1. 0

    Don’t worry, we same as you when we start learning Flutter 🙂 Take a look as my picture, you would understand how to analyze the layout:

    Row(children: [
  Image... // your image here
  Expanded( // expand rest of right space
    child: Column(
      mainAxisSize: MainAxisSize.min, //minimize the size of column, if don't have this code, layout will be broken
      children: [
        Text // your text here,
        TextButton // your text button here
      ]
    )
  )
])

    Good luck! enter image description here

    Login or Signup to reply.
  2. 0

    in order to leave the textButton below the Text , you can use Row instead of Column.
    Have a nice day.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search