Home > Back-end >  How to put one text below the other? - Flutter
How to put one text below the other? - Flutter

Time:10-05

I'd like to organize these 4 pieces of texts in a column. The thing is that they are displaying in a row.

AlertDialog alert = AlertDialog(
                                    title: Text("Informações"),
                                    content: Text("P - Selvagem ou Aguti"
                                        "p - preto"
                                        "A - Permite a pigmentação"
                                        "a - Inibe a pigmentação (epistático)"),
                                    actions: [
                                      okButton,
                                    ],
                                    backgroundColor: Colors.white,
                                  );

How to put them one below the other?

CodePudding user response:

Insert "\n" in your string for a new line:

"p - preto\nA - Permite a pigmentação\na - Inibe a pigmentação (epistático)"

CodePudding user response:

You can use Triple Quotes :

child: Container(
             AlertDialog alert = AlertDialog(('''
                              Text1
                              Text2
                              Text3''',)
          ),

You can also use \n for new line :

AlertDialog alert = AlertDialog(
                                title: Text("Informações"),
                                content: Text("P - Selvagem ou Aguti\np - preto\nA - Permite a pigmentação\na - Inibe a pigmentação (epistático)"),
                                actions: [
                                  okButton,
                                ],
                                backgroundColor: Colors.white,
                              );

You can refer this link to know more : https://api.dartlang.org/stable/2.5.0/dart-core/String-class.html

CodePudding user response:

Wrap the Dialog's content in the column , if you want to style every new line differently

    AlertDialog alert = AlertDialog(
                  title: Text("Informações"),
                  content: Column(
                    mainAxisSize: MainAxisSize.min,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text("P - Selvagem ou Aguti"),
                      Text("p - preto"),
                      Text("A - Permite a pigmentação"),
                      Text("a - Inibe a pigmentação (epistático)"),
                    ],
                  ),
                  actions: [
okButton,],
                  backgroundColor: Colors.white,
                );

If you want to use same style for all text , you can use \n for new line

AlertDialog alert =AlertDialog(
              title: Text("Informações"),
              content: Text(
                  "P - Selvagem ou Aguti \n p - preto \n A - Permite a pigmentação \n a - Inibe a pigmentação (epistático)"),
              actions: [
okButton,],
              backgroundColor: Colors.white,
            );
  • Related